refactor: refactor

Author: Bedram Tamang

__tests__/Calendar.test.ts

@@ -99,7 +99,7 @@ describe('CalendarPanel', () => {
   [true, false].forEach((holidayClickable) => {
     it('props: holidayClickable', () => {
       const holidayDate = (date: Date) => {
-        return date === new Date(2019, 9, 1);
+        return date < new Date(2019, 9, 1) || date > new Date(2019, 9, 20);
       };
       const mockFn = jest.fn();
       wrapper = mount(Calendar, {

lib/Picker.tsx

@@ -25,6 +25,8 @@ export interface PickerBaseProps {
   confirmText?: string;
   shortcuts?: Array<{ text: string; onClick: () => Date | Date[] }>;
   disabledDate?: (v: Date) => boolean;
+  holidayDate?: (v: Date) => boolean;
+  holidayClickable?: boolean;
   disabledTime?: (v: Date) => boolean;
   onClose?: () => void;
   onOpen?: () => void;
@@ -49,6 +51,8 @@ function Picker(originalProps: PickerProps, { slots }: SetupContext) {
     format: 'YYYY-MM-DD',
     type: 'date' as PickerType,
     disabledDate: () => false,
+    holidayDate: () => false,
+    holidayClickable: false,
     disabledTime: () => false,
     confirmText: 'OK',
   });

lib/PickerInput.tsx

@@ -26,6 +26,8 @@ export interface PickerInputProps extends PickerInputBaseProps {
   formatDate: (v: Date) => string;
   parseDate: (v: string) => Date;
   disabledDate: (v: Date) => boolean;
+  holidayDate: (v: Date) => boolean;
+  holidayClickable?: boolean;
   onChange: (v: Date | Date[] | null | null[]) => void;
   onFocus: () => void;
   onBlur: () => void;

lib/calendar/Calendar.tsx

@@ -42,7 +42,7 @@ function Calendar(originalProps: CalendarProps) {
     defaultValue: startOfDay(new Date()),
     type: 'date' as PickerType,
     disabledDate: () => false,
-    holidayClickable: () => false,
+    holidayClickable: false,
     holidayDate: () => false,
     getClasses: () => [],
     titleFormat: 'YYYY-MM-DD',
@@ -97,10 +97,7 @@ function Calendar(originalProps: CalendarProps) {
     if (isDisabled(date)) {
       return false;
     }
-    if (!props.holidayClickable && isHoliday(date)) {
-      return false;
-    }
-    return true;
+    return !(!props.holidayClickable && isHoliday(date));
   };
 
   const emitDate = (date: Date, type: string) => {

src/App.vue

@@ -1,88 +1,101 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
-import DatePicker from 'vue-datepicker-next';
-import { format, parse } from 'date-format-parse';
+    import { format, parse } from "date-format-parse"
+    import { defineComponent } from "vue"
+    import DatePicker from "vue-datepicker-next"
 
-export default defineComponent({
-  components: {
-    DatePicker,
-  },
-  data() {
-    return {
-      inputProps: {
-        clearable: false,
-        editable: false,
-        placeholder: 'test placeholder',
-        inputAttr: {
-          name: 'test',
-          id: 'test',
+    export default defineComponent({
+        components: {
+            DatePicker,
         },
-      },
-      shortcuts: [
-        {
-          text: 'range',
-          onClick() {
-            return [new Date(), new Date()];
-          },
+        data() {
+            return {
+                inputProps: {
+                    clearable: false,
+                    editable: false,
+                    placeholder: "test placeholder",
+                    inputAttr: {
+                        name: "test",
+                        id: "test",
+                    },
+                },
+                shortcuts: [
+                    {
+                        text: "range",
+                        onClick() {
+                            return [new Date(), new Date()]
+                        },
+                    },
+                ],
+                value: new Date(),
+                append: false,
+                rangeValue: [new Date(2019, 9, 4, 8, 30, 0), new Date(2019, 9, 4, 18, 30, 0)],
+                formatter: {
+                    stringify(date: Date) {
+                        return format(date, "DD/MMM/YYYY")
+                    },
+                    parse(value: string) {
+                        return parse(value, "DD/MMM/YYYY")
+                    },
+                    getWeek(date: Date) {
+                        return date.getDate()
+                    },
+                },
+            }
         },
-      ],
-      value: new Date(),
-      append: false,
-      rangeValue: [new Date(2019, 9, 4, 8, 30, 0), new Date(2019, 9, 4, 18, 30, 0)],
-      formatter: {
-        stringify(date: Date) {
-          return format(date, 'DD/MMM/YYYY');
+        methods: {
+            handleChange() {
+                console.log("change")
+            },
+            handleUpdate(val: Date) {
+                this.value = val
+            },
         },
-        parse(value: string) {
-          return parse(value, 'DD/MMM/YYYY');
-        },
-        getWeek(date: Date) {
-          return date.getDate();
-        },
-      },
-    };
-  },
-  methods: {
-    handleChange() {
-      console.log('change');
-    },
-    handleUpdate(val: Date) {
-      this.value = val;
-    },
-  },
-});
+    })
 </script>
 
 <template>
-  <div>
-    <button @click="append = !append">ass</button>
-    <DatePicker
-      v-model:value="value"
-      v-bind="inputProps"
-      :clearable="false"
-      :append-to-body="append"
-      type="datetime"
-      :time-picker-options="{ start: '00:00', end: '09:00', step: '00:30' }"
-      :disabled-date="(date) => date < new Date(2021, 10, 9)"
-      :open="true"
-    ></DatePicker>
-    <DatePicker
-      v-model:value="rangeValue"
-      :append-to-body="false"
-      range
-      :shortcuts="shortcuts"
-      :editable="false"
-    ></DatePicker>
-  </div>
+    <div>
+        <button @click="append = !append">ass</button>
+        <DatePicker
+            v-model:value="value"
+            v-bind="inputProps"
+            :clearable="false"
+            :append-to-body="append"
+            type="datetime"
+            :time-picker-options="{ start: '00:00', end: '09:00', step: '00:30' }"
+            :disabled-date="(date) => date < new Date(2021, 10, 9)"
+            :holiday-clickable="false"
+            :holiday-date="(date)=>date > new Date()"
+            :open="true"
+        ></DatePicker>
+        <DatePicker
+            v-model:value="rangeValue"
+            :append-to-body="false"
+            range
+            :shortcuts="shortcuts"
+            :disabled-date="(date) => date < new Date(2021, 10, 9)"
+            :editable="false"
+            :holiday-clickable="false"
+            :holiday-date="(date)=>date > new Date()"
+        ></DatePicker>
+        <DatePicker v-model:value="value"
+                    :holiday-clickable="true"
+                    :holiday-date="(date)=>date > new Date()">
+        </DatePicker>
+    </div>
 </template>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  /* color: #2c3e50; */
-  margin-top: 60px;
-  margin-left: 60px;
-}
+    #app {
+        font-family: Avenir, Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        /* color: #2c3e50; */
+        margin-top: 60px;
+        margin-left: 60px;
+    }
+
+    .holiday {
+        color: #ff0000;
+    }
 </style>