diff --git a/src/components/PlaybackController.vue b/src/components/PlaybackController.vue
index 5b42d41..a0df466 100644
--- a/src/components/PlaybackController.vue
+++ b/src/components/PlaybackController.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
-import { computed, ref, watch, onUnmounted } from 'vue';
+import type { Dayjs } from 'dayjs';
+import { computed, onUnmounted, ref, watch } from 'vue';
 
 import { useTimelineTicks } from '../hooks/useTimelineTicks';
 
@@ -8,12 +9,14 @@ const props = defineProps<{
   isPlaying: boolean;
   currentTime: number; // in milliseconds
   totalDuration: number; // in milliseconds
+  selectedDate?: Dayjs;
 }>();
 
 const emit = defineEmits<{
   (e: 'play'): void;
   (e: 'pause'): void;
   (e: 'seek', time: number): void;
+  (e: 'dateChange', date: Dayjs): void;
 }>();
 
 // --- Constants ---
@@ -75,8 +78,6 @@ watch(
       return;
     }
 
-
-
     // 仅在有效范围内才同步小时；避免负数/异常 currentTime 破坏选择器
     if (Number.isFinite(newValue) && newValue >= 0 && props.totalDuration > 0) {
       const maxHour = Math.max(Math.ceil(props.totalDuration / HOUR_IN_MS) - 1, 0);
@@ -127,6 +128,12 @@ const hourOptions = computed(() => {
 const timelineContainerRef = ref<HTMLElement | null>(null);
 let interactionTimer: number | undefined;
 
+const handleDateChange = (date: Dayjs | null) => {
+  if (date) {
+    emit('dateChange', date);
+  }
+};
+
 // 设置一个短暂的用户交互锁，以避免外部时间更新覆盖用户的即时选择
 const setUserInteraction = () => {
   isUserInteracting.value = true;
@@ -200,6 +207,12 @@ const handleTimelineClick = (event: MouseEvent) => {
 
       <!-- Hour Selector -->
       <a-col>
+        <a-date-picker
+          :value="selectedDate"
+          placeholder="请选择回放日期"
+          @change="handleDateChange"
+          style="margin-right: 8px"
+        />
         <a-select :value="selectedHour" style="width: 150px" :options="hourOptions" @change="handleHourChange" />
       </a-col>
 
diff --git a/src/pages/movement-supervision.vue b/src/pages/movement-supervision.vue
index 24a543f..4e9ae5a 100644
--- a/src/pages/movement-supervision.vue
+++ b/src/pages/movement-supervision.vue
@@ -121,6 +121,10 @@ const handleSeek = (relativeTime: number) => {
   }
 };
 
+const handleDateChange = (date: Dayjs) => {
+  selectedDate.value = date;
+};
+
 // 监听后台推送的绝对时间戳，如果跨天，则自动更新UI上的日期选择器
 watch(playback.currentTime, (newTimestamp) => {
   if (newTimestamp > 0 && selectedDate.value) {
@@ -647,8 +651,6 @@ const handleGlobalKeydown = (event: KeyboardEvent) => {
               楼层 {{ index + 1 }}
             </a-select-option>
           </a-select>
-
-          <a-date-picker v-if="isPlaybackMode" v-model:value="selectedDate" placeholder="请选择回放日期" />
         </a-space>
       </a-flex>
     </a-layout-header>
@@ -739,9 +741,11 @@ const handleGlobalKeydown = (event: KeyboardEvent) => {
       :is-playing="playback.isPlaying.value"
       :current-time="playback.currentTime.value - (selectedDate?.startOf('day').valueOf() ?? 0)"
       :total-duration="playback.totalDuration.value"
+      :selected-date="selectedDate"
       @play="playback.play"
       @pause="playback.pause"
       @seek="handleSeek"
+      @date-change="handleDateChange"
     />
   </template>
 </template>