v0.1.7

reset date when showing datepicker

Author: mathieustan

dist/vue-datepicker.esm.js

@@ -1,7 +1,7 @@
 {
   "name": "@mathieustan/vue-datepicker",
   "description": "A clean datepicker made with VueJs",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "author": "Mathieu Stanowski <[email protected]>",
   "keywords": [
     "vue",

dist/vue-datepicker.min.js

@@ -23,7 +23,7 @@
       :fullscreen-mobile="fullscreenMobile"
       :attach-to="attachTo"
       :z-index="zIndex"
-      @close="resetDate"
+      @close="hideDatePicker"
     />
     <DatepickerAgenda
       :name="name"
@@ -48,9 +48,7 @@
       :z-index="zIndex + 1"
       @selectDate="changeDate"
       @validateDate="validateDate"
-      @resetDate="resetDate"
       @close="hideDatePicker"
-      @hide="hideDatePicker"
     />
   </div>
 </template>
@@ -177,11 +175,14 @@ export default {
     },
     showDatePicker () {
       if (this.disabled) return;
+
+      this.initDate(this.value);
       this.isVisible = true;
       this.$emit('onOpen');
     },
     hideDatePicker () {
       if (!this.isVisible) return;
+
       this.isVisible = false;
       clearAllBodyScrollLocks();
       this.$emit('onClose');
@@ -196,10 +197,6 @@ export default {
       }
       this.date = date && dayjs(date, this.outputFormat);
     },
-    resetDate () {
-      this.initDate(this.value);
-      this.hideDatePicker();
-    },
     changeDate (date) {
       this.date = date;
       if (this.validate) return;

dist/vue-datepicker.umd.js

@@ -1,7 +1,7 @@
 <template>
   <transition name="datepicker-transition" appear @after-enter="setActive">
     <div
-      v-click-outside="{ handler : () => $emit('resetDate'), isActive: !inline && isActive }"
+      v-click-outside="{ handler : () => $emit('close'), isActive: !inline && isActive }"
       v-if="shouldShowAgenda"
       ref="content"
       :style="styles"
@@ -144,7 +144,7 @@
         :button-validate="buttonValidate"
         :button-cancel="buttonCancel"
         :color="color"
-        @cancel="$emit('resetDate')"
+        @cancel="$emit('close')"
         @validate="$emit('validateDate')"
       />
     </div>

package.json

@@ -66,6 +66,8 @@ export default {
       return availableDates.length > 0;
     },
     setPresetDates ({ availableDates }) {
+      if (this.isPresetSelected({ availableDates })) return;
+
       this.$emit('updateRange', {
         start: availableDates[0],
         end: availableDates[availableDates.length - 1],
@@ -148,6 +150,7 @@ export default {
 
     &--selected  {
       color: white;
+      pointer-events: none;
 
       .datepicker-preset__effect {
         opacity: 1;

src/components/datepicker/DatePicker.vue

@@ -165,6 +165,28 @@ describe('DatePicker', () => {
     });
 
     describe('showDatePicker', () => {
+      it.each([
+        [
+          { date: { start: dummyDate, end: undefined }, range: true },
+          { date: { start: dayjs('2019-02-01'), end: dayjs('2019-03-01') } },
+          { start: dayjs(dummyDate, DEFAULT_OUTPUT_DATE_FORMAT.date), end: undefined },
+        ],
+        [{ date: dummyDate }, dayjs('2019-02-01'), dayjs(dummyDate, DEFAULT_OUTPUT_DATE_FORMAT.date)],
+        [{ date: undefined }, dayjs('2019-02-01'), undefined],
+      ])(
+        'when props = %p, current date = %p, should reset date to %p & close',
+        (props, currentDate, expectedResult) => {
+          const wrapper = mountComponent(props);
+          wrapper.setData({ date: currentDate });
+          jest.spyOn(wrapper.vm, 'hideDatePicker');
+
+          wrapper.vm.showDatePicker();
+          expect(wrapper.vm.date).toEqual(expectedResult);
+          expect(wrapper.vm.isVisible).toEqual(true);
+          expect(wrapper.emitted().onOpen).toBeTruthy();
+        },
+      );
+
       it('should set isVisible to true', () => {
         const wrapper = mountComponent();
         wrapper.setData({ isVisible: false });
@@ -206,29 +228,6 @@ describe('DatePicker', () => {
       });
     });
 
-    describe('resetDate', () => {
-      it.each([
-        [
-          { date: { start: dummyDate, end: undefined }, range: true },
-          { date: { start: dayjs('2019-02-01'), end: dayjs('2019-03-01') } },
-          { start: dayjs(dummyDate, DEFAULT_OUTPUT_DATE_FORMAT.date), end: undefined },
-        ],
-        [{ date: dummyDate }, dayjs('2019-02-01'), dayjs(dummyDate, DEFAULT_OUTPUT_DATE_FORMAT.date)],
-        [{ date: undefined }, dayjs('2019-02-01'), undefined],
-      ])(
-        'when props = %p, current date = %p, should reset date to %p & close',
-        (props, currentDate, expectedResult) => {
-          const wrapper = mountComponent(props);
-          wrapper.setData({ date: currentDate });
-          jest.spyOn(wrapper.vm, 'hideDatePicker');
-
-          wrapper.vm.resetDate();
-          expect(wrapper.vm.date).toEqual(expectedResult);
-          expect(wrapper.vm.hideDatePicker).toHaveBeenCalled();
-        },
-      );
-    });
-
     describe('changeDate', () => {
       it('should update date', () => {
         const wrapper = mountComponent();

src/components/datepicker/DatePickerAgenda.vue

@@ -114,6 +114,13 @@ describe('DatePickerPresets', () => {
     });
 
     describe('setPresetDates', () => {
+      it('should do nothing if preset is already selected', () => {
+        const wrapper = mountComponent({ mutableDate: { start: '2018-01-29', end: '2018-01-31' } });
+        const preset = { availableDates: [dayjs('2018-01-29'), dayjs('2018-01-30'), dayjs('2018-01-31')] };
+        wrapper.vm.setPresetDates(preset);
+        expect(wrapper.emitted().updateRange).toBeFalsy();
+      });
+
       it('Should emit first & last day from available dates', () => {
         const wrapper = mountComponent();
         const preset = { availableDates: [dayjs('2018-01-29'), dayjs('2018-01-30'), dayjs('2018-01-31')] };