feat: can set dates

src/composables/dateOpt.ts

@@ -1,13 +1,35 @@
+import { type DateValue, parseDate } from '@internationalized/date'
+
 function _useOptions() {
   const options = reactive({
-    castBeginDate: '2022-01-01',
+    castBeginDate: '',
     castDayNo: 0,
     renderMode: 'heatmap' as 'heatmap' | 'image',
     isPlaying: false,
   })
 
+  function setCastBeginDate(date: DateValue) {
+    const datestr = date.toString()
+    options.castBeginDate = datestr.replaceAll('-', '')
+  }
+
+  function setTargetDate(date: DateValue) {
+    const castBeginDateStr = options.castBeginDate.toString()
+    if (castBeginDateStr.length !== 8) {
+      console.error(castBeginDateStr)
+      throw new Error('castBeginDate is invalid')
+    }
+    const newDateStr = `${castBeginDateStr.slice(0, 4)}-${castBeginDateStr.slice(4, 6)}-${castBeginDateStr.slice(6, 8)}`
+    const castBeginDate = parseDate(newDateStr)
+    const dayNo = date.compare(castBeginDate)
+    options.castDayNo = dayNo
+    return dayNo
+  }
+
   return {
     options,
+    setCastBeginDate,
+    setTargetDate,
   }
 }
 

src/layouts/map.vue

@@ -18,7 +18,7 @@ const df = new DateFormatter('en-US', {
 const castBeginDate = ref<DateValue>()
 const castTargetDate = ref<DateValue>()
 
-const { options } = useOptions()
+const { options, setCastBeginDate, setTargetDate } = useOptions()
 
 const mapping = ref < Record<string, string>>({})
 
@@ -62,6 +62,13 @@ const isTargetDateDisabled = computed(() => {
   }
   return _functionIsTargetDateDisabled
 })
+
+watch([castBeginDate, castTargetDate], () => {
+  if (castBeginDate.value && castTargetDate.value) {
+    setCastBeginDate(castBeginDate.value)
+    setTargetDate(castTargetDate.value)
+  }
+})
 </script>
 
 <template>
@@ -72,6 +79,7 @@ const isTargetDateDisabled = computed(() => {
           <legend class="px-1 text-sm font-medium -ml-1">
             日期设置
           </legend>
+          {{ options }}
           <div class="grid gap-3">
             <Label for="model">渲染模式</Label>
             <Select v-model="options.renderMode">