fix: add calOptions as reactive prop

carbon-design-system · Apr 8, 2024 · 0cd0485 · 0cd0485
1 parent 37d7693
commit 0cd0485
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 14 deletions.
diff --git a/src/components/CvDatePicker/CvDatePicker.stories.js b/src/components/CvDatePicker/CvDatePicker.stories.js
@@ -237,11 +237,32 @@ SingleUsingDate.parameters = storyParametersObject(
 );
 
 /* SINGLE USING MIN MAX PARAMS STORY */
-
+const calOptions = ref({
+  minDate: now,
+  maxDate: nextWeek,
+  dateFormat: 'm/d/Y',
+});
+function toggleDateFormat() {
+  if (calOptions.value.dateFormat === 'm/d/Y')
+    calOptions.value.dateFormat = 'Y-m-d';
+  else calOptions.value.dateFormat = 'm/d/Y';
+}
+function changeMaxDate(inc) {
+  calOptions.value.maxDate = new Date(
+    nextWeek.setDate(nextWeek.getDate() + inc)
+  );
+}
 const templateSingleUsingMinMax = `
 <div>
   <cv-date-picker v-bind='args' @change="onChange" kind="single" :value="now" :cal-options="calOptions">
   </cv-date-picker>
+  <div style="margin-top:2rem; background-color: #888888;  padding:1rem; width:fit-content">
+  <div>Reactive updates</div>
+  <button @click='toggleDateFormat'>change date format to 'm/d/Y' or 'Y-m-d'</button><br/>
+  <button @click='changeMaxDate(1)'>+1 day to max date</button>
+  <button @click='changeMaxDate(-1)'>-1 day from max date</button>
+  <div>Max date: {{calOptions.maxDate}}</div>
+  </div>
 </div>
 `;
 
@@ -251,11 +272,9 @@ const TemplateSingleUsingMinMax = args => {
     setup: () => ({
       args,
       now,
-      calOptions: {
-        minDate: now,
-        maxDate: nextWeek,
-        dateFormat: 'm/d/Y',
-      },
+      calOptions,
+      toggleDateFormat,
+      changeMaxDate,
       onChange: action('change'),
     }),
     template: templateSingleUsingMinMax,

diff --git a/src/components/CvDatePicker/CvDatePicker.vue b/src/components/CvDatePicker/CvDatePicker.vue
@@ -135,7 +135,7 @@ const dateWrapper = ref(null);
 const date = ref(null);
 const todate = ref(null);
 
-let calendar;
+const calendar = ref(null);
 
 const props = defineProps({
   modelValue: { type: [String, Object, Array, Date], default: undefined },
@@ -307,10 +307,19 @@ const onCalReady = (selectedDates, dateStr, instance) => {
 const initFlatpickr = () => {
   return flatpickr(date.value, getFlatpickrOptions());
 };
+watch(
+  () => props.calOptions,
+  () => {
+    for (const [key, value] of Object.entries(props.calOptions)) {
+      calendar.value.set(key, value);
+    }
+  },
+  { deep: true }
+);
 
 let dateToString = val => {
   if (!val) return '';
-  return calendar.formatDate(val, props.calOptions.dateFormat);
+  return calendar.value?.formatDate(val, props.calOptions.dateFormat);
 };
 
 // eslint-disable-next-line no-unused-vars
@@ -349,9 +358,9 @@ const setDate = value => {
   try {
     if (value === undefined) return;
     if (isSingle.value) {
-      calendar.setDate(value, true);
+      calendar.value?.setDate(value, true);
     } else if (isRange.value) {
-      calendar.setDate([value.startDate, value.endDate], true);
+      calendar.value?.setDate([value.startDate, value.endDate], true);
     } else {
       date.value.value = value;
     }
@@ -393,16 +402,14 @@ onBeforeMount(() => {
 
 onMounted(() => {
   if (['range', 'single'].includes(props.kind)) {
-    calendar = initFlatpickr();
+    calendar.value = initFlatpickr();
   }
 
   setDate(props.modelValue || props.value);
 });
 
 onUnmounted(() => {
-  if (calendar) {
-    calendar.destroy();
-  }
+  calendar.value?.destroy();
 });
 </script>