diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9425a60d73cc1fbf47735536f0e966ba13bdba69..62d5d78d91a52672477b5d885463ec0f1c10ba49 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,14 @@
 
 ## [Unreleased]
 
+### Fixed
+
+    - 修复数据选择（下拉视图）初始值回显异常问题
+
+### Change
+
+    移动端日历支持自定义选择日期
+
 ## [0.0.27] - 2024-10-16
 
 ### Added
diff --git a/src/control/calendar/calendar.scss b/src/control/calendar/calendar.scss
index 9094fd36941d8508cc941df42fdfba0364688bff..4d08d02fb9f47866d970e645680f90348d8253ef 100644
--- a/src/control/calendar/calendar.scss
+++ b/src/control/calendar/calendar.scss
@@ -1,158 +1,171 @@
-$control-calendar: (text-color: getCssVar(color-text-0),
-    hover-bg-color: getCssVar(color, fill, 0),
-    active-bg-color: getCssVar(color, fill, 0),
-    border-color: getCssVar(color, primary, active),
-    font-size: getCssVar(font-size, small),
-    item-padding: getCssVar(spacing, tight),
-    border-radius: getCssVar(border-radius, small),
-    margin: getCssVar(spacing, extra-tight),
-    item-margin: getCssVar(spacing, tight) 0,
+$control-calendar: (
+  text-color: getCssVar(color-text-0),
+  hover-bg-color: getCssVar(color, fill, 0),
+  active-bg-color: getCssVar(color, fill, 0),
+  border-color: getCssVar(color, primary, active),
+  font-size: getCssVar(font-size, small),
+  item-padding: getCssVar(spacing, tight),
+  border-radius: getCssVar(border-radius, small),
+  margin: getCssVar(spacing, extra-tight),
+  item-margin: getCssVar(spacing, tight) 0,
 );
 
 @include b(control-calendar) {
-    @include set-component-css-var(control-calendar, $control-calendar);
+  @include set-component-css-var(control-calendar, $control-calendar);
 
-    --van-cell-right-icon-color: var(--van-gray-6);
-    --van-padding-md: #{getCssVar(spacing, tight)};
+  --van-cell-right-icon-color: var(--van-gray-6);
+  --van-padding-md: #{getCssVar(spacing, tight)};
 
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
 
-    .calendar_day {
-        padding: getCssVar('spacing', 'extra-tight') 0;
-    }
+  .calendar_day {
+    padding: getCssVar('spacing', 'extra-tight') 0;
+  }
 
-    @include e(calendar-item) {
-        display: flex;
-        gap: getCssVar(spacing, tight);
-        align-items: center;
-        padding: getCssVar(control-calendar, item-padding);
-    }
+  @include e(calendar-item) {
+    display: flex;
+    gap: getCssVar(spacing, tight);
+    align-items: center;
+    padding: getCssVar(control-calendar, item-padding);
+  }
 
-    @include e(icon) {
-        width: rem(10px);
-        height: rem(10px);
-        border-radius: 50%;
-    }
+  @include e(icon) {
+    width: rem(10px);
+    height: rem(10px);
+    border-radius: 50%;
+  }
 
-    @include e(day) {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-    }
+  @include e(day) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
 
-    @include e(mark) {
-        @include flex(row);
-
-        position: absolute;
-        bottom: rem(-4px);
-        left: 0;
-        flex-grow: 1;
-        justify-content: space-around;
-        width: 100%;
-
-        @include m((item)) {
-            width: rem(4px);
-            height: rem(4px);
-            background-color: red;
-            border-radius: rem(50px);
-        }
-    }
+  @include e(mark) {
+    @include flex(row);
 
-    @include b(control-calendar-item) {
-        @include set-component-css-var(control-calendar, $control-calendar);
+    position: absolute;
+    bottom: rem(-4px);
+    left: 0;
+    flex-grow: 1;
+    justify-content: space-around;
+    width: 100%;
 
-        // width: calc(100% - getCssVar(control-calendar, item-margin) * 2);
-        height: auto;
+    @include m((item)) {
+      width: rem(4px);
+      height: rem(4px);
+      background-color: red;
+      border-radius: rem(50px);
+    }
+  }
 
+  @include b(control-calendar-item) {
+    @include set-component-css-var(control-calendar, $control-calendar);
 
-        // 默认项样式 不渗透到布局面板
-        @include m(default) {
-            padding: getCssVar(control-calendar, item-padding);
-            overflow: hidden;
-            font-size: getCssVar(control-calendar, font-size);
-            line-height: 25px;
-            color: getCssVar(control-calendar, text-color);
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            cursor: pointer;
-        }
+    // width: calc(100% - getCssVar(control-calendar, item-margin) * 2);
+    height: auto;
+
+    // 默认项样式 不渗透到布局面板
+    @include m(default) {
+      padding: getCssVar(control-calendar, item-padding);
+      overflow: hidden;
+      font-size: getCssVar(control-calendar, font-size);
+      line-height: 25px;
+      color: getCssVar(control-calendar, text-color);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: pointer;
     }
-
+  }
 }
 
-
 @include b(control-calendar-content) {
-    width: 100%;
-
+  width: 100%;
 }
 
-
 @include b(control-calendar-date-text) {
-    @include set-component-css-var(control-calendar, $control-calendar);
+  @include set-component-css-var(control-calendar, $control-calendar);
 
-    padding: getCssVar(control-calendar, item-padding);
-    margin-top: 0;
+  padding: getCssVar(control-calendar, item-padding);
+  margin-top: 0;
 }
 
 @include b(control-calendar-day) {
-    height: fit-content;
+  height: fit-content;
 }
 
 @include b(control-calendar-content-header) {
-    @include set-component-css-var(control-calendar, $control-calendar);
+  @include set-component-css-var(control-calendar, $control-calendar);
 
-    display: flex;
-    gap: getCssVar(control-calendar, item-padding);
-    align-items: center;
+  display: flex;
+  gap: getCssVar(control-calendar, item-padding);
+  align-items: center;
 }
 
 @include b(control-calendar-footer) {
-    flex-grow: 1;
-    min-height: 0;
+  flex-grow: 1;
+  min-height: 0;
 
-    .van-tabs {
-        height: 100%;
-    }
+  .van-tabs {
+    height: 100%;
+  }
 
-    .van-tabs__content {
-        height: calc(100% - var(--van-tabs-line-height));
-        overflow-y: auto;
-    }
+  .van-tabs__content {
+    height: calc(100% - var(--van-tabs-line-height));
+    overflow-y: auto;
+  }
 
-    .van-tab__panel,
-    .van-list {
-        height: 100%;
-    }
+  .van-tab__panel,
+  .van-list {
+    height: 100%;
+  }
 }
 
 @include b(control-calendar-title) {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .van-field {
-        width: 50%;
-    }
-
-    input {
-        font-weight: 100;
-        text-align: inherit;
-        background-color: transparent;
-        border: rem(1px) getCssVar(color, border) solid;
-        box-shadow: none;
-    }
-
-
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .van-field {
+    width: 50%;
+  }
+
+  input {
+    font-weight: 100;
+    text-align: inherit;
+    background-color: transparent;
+    border: rem(1px) getCssVar(color, border) solid;
+    box-shadow: none;
+  }
+  span {
+    top: 0;
+    left: 0;
+  }
+}
 
-    span {
-        top: 0;
-        left: 0;
-    }
-}
\ No newline at end of file
+@include b(control-calendar-header-toolbar) {
+  width: 100%;
+  display: flex;
+  @include e('select-day') {
+    padding: getCssVar(spacing, base) getCssVar(spacing, tight);
+    background-color: getCssVar(color, bg, 1);
+    border-radius: 2px;
+    font-weight: getCssVar(font-weight, bold);
+  }
+  @include e('switch-toolbar') {
+    flex: 1;
+    align-items: center;
+    display: flex;
+    justify-content: end;
+    color: getCssVar(color, primary);
+    gap: getCssVar(spacing, base);
+    padding-right: getCssVar(spacing, base);
+  }
+}
diff --git a/src/control/calendar/calendar.tsx b/src/control/calendar/calendar.tsx
index 553eed036ae113d2d0f943073bc683e280cad2be..62413de7ad9b80212d118f5b1e5b0d463f22cf0c 100644
--- a/src/control/calendar/calendar.tsx
+++ b/src/control/calendar/calendar.tsx
@@ -33,6 +33,15 @@ export const CalendarControl = defineComponent({
 
     const loadItems: Ref<ICalendarItemData[]> = ref([]);
 
+    // 显示底部弹窗
+    const visible = ref<boolean>(false);
+
+    // 日历
+    const calendar = ref();
+
+    // 弹窗选择时间
+    const currentDate = ref();
+
     // 存储月加载缓存
     const markDateItems: Ref<IData> = ref({});
     //  加载的标记数据
@@ -160,13 +169,41 @@ export const CalendarControl = defineComponent({
       loadMarkerData(c.state.selectedDate);
     };
 
+    // 自定义选择日期
+    const onCustom = () => {
+      const temptime = dayjs(c.state.selectedDate)
+        .format('YYYY-MM-DD')
+        .split('-');
+      currentDate.value = temptime;
+      visible.value = true;
+    };
+
+    // 跳转今天
+    const toDay = () => {
+      calendar.value.today();
+    };
+
+    // 确认选择日期
+    const onConfirm = () => {
+      const date = currentDate.value.join('-');
+      const time = new Date(date);
+      calendar.value.reset(time);
+      visible.value = false;
+    };
+
     return {
       c,
       ns,
       markerData,
       loadItems,
+      visible,
+      calendar,
+      currentDate,
+      onConfirm,
       calcItemStyle,
       dateChange,
+      onCustom,
+      toDay,
     };
   },
   render() {
@@ -288,11 +325,37 @@ export const CalendarControl = defineComponent({
       return renderCalendarList(list);
     };
 
+    // 绘制顶部工具栏
+    const renderHeaderToolbar = () => {
+      return (
+        <div class={this.ns.b('header-toolbar')}>
+          <div class={this.ns.be('header-toolbar', 'select-day')}>
+            {dayjs(this.c.state.selectedDate).format('YYYY年MM月DD日')}
+          </div>
+          <div class={this.ns.be('header-toolbar', 'switch-toolbar')}>
+            <div
+              class={this.ns.bem('header-toolbar', 'switch-toolbar', 'item')}
+              onClick={this.onCustom}
+            >
+              {ibiz.i18n.t('control.calendar.customPicker')}
+            </div>
+            <div
+              class={this.ns.bem('header-toolbar', 'switch-toolbar', 'item')}
+              onClick={this.toDay}
+            >
+              {ibiz.i18n.t('control.calendar.today')}
+            </div>
+          </div>
+        </div>
+      );
+    };
+
     return (
       this.c.state.isCreated && (
         <iBizControlBase controller={this.c}>
           <div class={this.ns.b('content')}>
             <VueHashCalendar
+              ref='calendar'
               show-week-view={true}
               pickerType='date'
               onChange={date => {
@@ -308,6 +371,9 @@ export const CalendarControl = defineComponent({
                     </div>
                   );
                 },
+                action: () => {
+                  return renderHeaderToolbar();
+                },
               }}
             </VueHashCalendar>
           </div>
@@ -331,6 +397,17 @@ export const CalendarControl = defineComponent({
               })}
             </van-tabs>
           </div>
+          <van-popup
+            v-model:show={this.visible}
+            style={{ height: '70%' }}
+            position='bottom'
+          >
+            <van-date-picker
+              v-model={this.currentDate}
+              onConfirm={this.onConfirm}
+              title={ibiz.i18n.t('control.calendar.pickerDate')}
+            />
+          </van-popup>
         </iBizControlBase>
       )
     );
diff --git a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx
index c8ccf1c9670a689bd4d85e16572455d1cc168331..dad19b343f72478c8f6a2c2bbf7ca653e3d08da4 100644
--- a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx
+++ b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx
@@ -87,7 +87,7 @@ export const IBizPickerSelectView = defineComponent({
         }
       },
       {
-        immediate: false,
+        immediate: true,
         deep: true,
       },
     );
diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts
index 0d69429f87578de11f1223e0b28d42aa3d9205c1..b056ef568da2914b9cded8336e730da6eb8a0c8f 100644
--- a/src/locale/en/index.ts
+++ b/src/locale/en/index.ts
@@ -86,6 +86,11 @@ export default {
       next: 'Next',
       finish: 'Finish',
     },
+    calendar: {
+      today: 'Today',
+      pickerDate: 'Picker Date',
+      customPicker: 'Custom Picker',
+    },
   },
   // 编辑器
   editor: {
diff --git a/src/locale/zh-CN/index.ts b/src/locale/zh-CN/index.ts
index 9328c60ced4e1aea2e4ba26ba9dbd70896ed3af5..4e007877a5c315202f4f3b83e842010b1bc76ddb 100644
--- a/src/locale/zh-CN/index.ts
+++ b/src/locale/zh-CN/index.ts
@@ -84,6 +84,11 @@ export default {
       next: '下一步',
       finish: '完成',
     },
+    calendar: {
+      today: '今天',
+      pickerDate: '选择日期',
+      customPicker: '自定义选择日期',
+    },
   },
   // 编辑器
   editor: {