💊 [1.3.1] { hotfix } Range datepicker with empty values (#43)

* 💊 { hotfix } Fix error with date range picker & empty values * Finish fix for empty values in range mode * 🏗️ Build1.3.1
chronotruck · Oct 22, 2018 · e292dc2 · e292dc2
1 parent c83f057
commit e292dc2
Show file tree

Hide file tree

Showing 23 changed files with 76 additions and 59 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>vue-ctk-date-time-picker</title><link rel=stylesheet href=./assets/main.css><link href=./static/css/app.596179cf1d5485374e4ea3ebb34a61c7.css rel=stylesheet></head><body><div id=app></div><script src=/build/build.js></script><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.1eb7121699eee7ac0a43.js></script><script type=text/javascript src=./static/js/app.946a614ca530d8f4d7da.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>vue-ctk-date-time-picker</title><link rel=stylesheet href=./assets/main.css><link href=./static/css/app.82ec24b8a763f7789a8bb63122344983.css rel=stylesheet></head><body><div id=app></div><script src=/build/build.js></script><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.1eb7121699eee7ac0a43.js></script><script type=text/javascript src=./static/js/app.12e502addb1fc36b12c2.js></script></body></html>
diff --git a/.../app.596179cf1d5485374e4ea3ebb34a61c7.css → .../app.82ec24b8a763f7789a8bb63122344983.css b/.../app.596179cf1d5485374e4ea3ebb34a61c7.css → .../app.82ec24b8a763f7789a8bb63122344983.css
diff --git a/....596179cf1d5485374e4ea3ebb34a61c7.css.map → ....82ec24b8a763f7789a8bb63122344983.css.map b/....596179cf1d5485374e4ea3ebb34a61c7.css.map → ....82ec24b8a763f7789a8bb63122344983.css.map
diff --git a/demo/static/js/app.12e502addb1fc36b12c2.js b/demo/static/js/app.12e502addb1fc36b12c2.js
diff --git a/demo/static/js/app.12e502addb1fc36b12c2.js.map b/demo/static/js/app.12e502addb1fc36b12c2.js.map
diff --git a/demo/static/js/app.946a614ca530d8f4d7da.js b/demo/static/js/app.946a614ca530d8f4d7da.js
diff --git a/demo/static/js/app.946a614ca530d8f4d7da.js.map b/demo/static/js/app.946a614ca530d8f4d7da.js.map
diff --git a/demo/static/js/manifest.3ad1d5771e9b13dbdad2.js.map b/demo/static/js/manifest.3ad1d5771e9b13dbdad2.js.map
diff --git a/dist/umd/vue-ctk-date-time-picker.min.css b/dist/umd/vue-ctk-date-time-picker.min.css
diff --git a/dist/umd/vue-ctk-date-time-picker.min.css.map b/dist/umd/vue-ctk-date-time-picker.min.css.map
diff --git a/dist/umd/vue-ctk-date-time-picker.min.js b/dist/umd/vue-ctk-date-time-picker.min.js
diff --git a/dist/umd/vue-ctk-date-time-picker.min.js.map b/dist/umd/vue-ctk-date-time-picker.min.js.map
diff --git a/dist/vue-ctk-date-time-picker.min.css b/dist/vue-ctk-date-time-picker.min.css
diff --git a/dist/vue-ctk-date-time-picker.min.css.map b/dist/vue-ctk-date-time-picker.min.css.map
diff --git a/dist/vue-ctk-date-time-picker.min.js b/dist/vue-ctk-date-time-picker.min.js
diff --git a/dist/vue-ctk-date-time-picker.min.js.map b/dist/vue-ctk-date-time-picker.min.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ctk-date-time-picker",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A vue component for select date & time (by Chronotruck)",
   "author": "Louis Mazel <[email protected]>",
   "main": "dist/vue-ctk-date-time-picker.min.js",

diff --git a/src/App.vue b/src/App.vue
@@ -264,6 +264,10 @@
           start: '2018-04-05',
           end: '2018-04-20'
         },
+        rangeValues2: {
+          start: null,
+          end: null
+        },
         timePickerValue: '14:26',
         minuteInterval: 5,
         minuteInterval2: 10,

diff --git a/src/vue-ctk-date-time-picker/_subs/CtkDatePickerAgenda.vue b/src/vue-ctk-date-time-picker/_subs/CtkDatePickerAgenda.vue
@@ -85,7 +85,6 @@
             :min-date="minDate"
             :max-date="maxDate"
             :disabled-dates="disabledDates"
-            :value="value"
             :dark="dark"
             @change-date="selectDate"
             @change-month="changeMonth"

diff --git a/src/vue-ctk-date-time-picker/_subs/CtkDateRangePicker.vue b/src/vue-ctk-date-time-picker/_subs/CtkDateRangePicker.vue
@@ -22,7 +22,7 @@
           </div>
 
           <div class="flex justify-content-between">
-            <span class="datepicker-date dots-text flex-1">{{ getDateFormatted() }}</span>
+            <span class="datepicker-date dots-text flex-1">{{ getRangeDatesFormatted }}</span>
           </div>
         </div>
         <div class="datetimepicker-container flex">
@@ -46,7 +46,6 @@
             :color="color"
             :min-date="minDate"
             :max-date="maxDate"
-            :value="value"
             :dark="dark"
             class="date-range-picker"
             range-mode
@@ -113,32 +112,42 @@
         }
       },
       year () {
-        const date = this.dateTime.end ? this.dateTime.end : this.dateTime.start
+        const date = this.dateTime.start || this.dateTime.end
+          ? this.dateTime.end ? this.dateTime.end : this.dateTime.start
+          : moment()
         return date.format('YYYY')
+      },
+      getRangeDatesFormatted () {
+        const hasStartValues = this.value && this.value.start
+        const hasEndValues = this.value && this.value.end
+        if (!hasStartValues && !hasEndValues) {
+          return '... - ...'
+        } else if (hasStartValues || hasEndValues) {
+          const datesFormatted = hasStartValues ? `${moment(this.dateTime.start).locale(this.locale).format('ddd D MMM')}` : '...'
+          return hasEndValues ? `${datesFormatted} - ${moment(this.dateTime.end).locale(this.locale).format('ddd D MMM')}` : `${datesFormatted} - ...`
+        } else {
+          return null
+        }
       }
     },
     watch: {
       dateTime: {
         handler () {
           this.month = this.getMonth()
-          this.getDateFormatted()
         },
         deep: true
       },
       locale () {
         this.month = this.getMonth()
-        this.getDateFormatted()
       }
     },
     methods: {
       getMonth () {
-        const date = this.dateTime.end ? this.dateTime.end : this.dateTime.start
+        const date = this.dateTime.start || this.dateTime.end
+          ? this.dateTime.end ? this.dateTime.end : this.dateTime.start
+          : moment()
         return new Month(date.month(), date.year())
       },
-      getDateFormatted () {
-        const datesFormatted = `${moment(this.dateTime.start).locale(this.locale).format('ddd D MMM')}`
-        return this.dateTime.end ? `${datesFormatted} - ${moment(this.dateTime.end).locale(this.locale).format('ddd D MMM')}` : `${datesFormatted} - ?`
-      },
       selectDate (dateTime) {
         this.$emit('change-date', dateTime)
         this.$refs['calendar-shortcut'].unSelectAllShortcuts()

diff --git a/src/vue-ctk-date-time-picker/_subs/_subs/CtkDatePicker.vue b/src/vue-ctk-date-time-picker/_subs/_subs/CtkDatePicker.vue
@@ -58,7 +58,7 @@
             v-for="day in monthDays"
             :key="day.format('D')"
             :class="{
-              selected: isSelected(day) && value && !isDisabled(day),
+              selected: isSelected(day) && !isDisabled(day),
               disabled: (isDisabled(day) || isWeekEndDay(day)),
               enable: !(isDisabled(day) || isWeekEndDay(day)),
               between: isBetween(day) && rangeMode,
@@ -102,7 +102,6 @@
       locale: {type: String, default: String},
       inline: {type: Boolean, default: Boolean},
       noWeekendsDays: {type: Boolean, default: Boolean},
-      value: {type: [String, Object], default: String},
       rangeMode: {type: Boolean, default: false},
       disabledDates: {type: Array, default: Array},
       dark: {type: Boolean, default: false}
@@ -111,11 +110,7 @@
       return {
         transitionDaysName: 'slidenext',
         transitionLabelName: 'slidevnext',
-        weekDays: getWeekDays(this.locale),
-        days: {
-          start: null,
-          end: null
-        }
+        weekDays: getWeekDays(this.locale)
       }
     },
     computed: {
@@ -161,8 +156,12 @@
       },
       isSelected (day) {
         const date = [
-          ...(this.dateTime.start ? [this.dateTime.start.format('YYYY-MM-DD')] : [this.dateTime.format('YYYY-MM-DD')]),
-          ...(this.dateTime.end ? [this.dateTime.end.format('YYYY-MM-DD')] : [])
+          ...(this.dateTime.start
+            ? [this.dateTime.start.format('YYYY-MM-DD')]
+            : this.rangeMode ? [] : [this.dateTime.format('YYYY-MM-DD')]),
+          ...(this.dateTime.end
+            ? [this.dateTime.end.format('YYYY-MM-DD')]
+            : this.rangeMode ? [] : [this.dateTime.format('YYYY-MM-DD')])
         ]
         return date.indexOf(day.format('YYYY-MM-DD')) > -1
       },
@@ -185,13 +184,13 @@
       },
       selectDate (day) {
         if (this.rangeMode) {
-          if (!this.days.start || this.days.end || day.isBefore(this.days.start)) {
-            this.days.start = day
-            this.days.end = null
+          if (!this.dateTime.start || this.dateTime.end || day.isBefore(this.dateTime.start)) {
+            this.dateTime.start = day
+            this.dateTime.end = null
           } else {
-            this.days.end = day
+            this.dateTime.end = day
           }
-          this.$emit('change-date', this.days)
+          this.$emit('change-date', this.dateTime)
         } else {
           this.$emit('change-date', day)
         }

diff --git a/src/vue-ctk-date-time-picker/vue-ctk-date-time-picker.vue b/src/vue-ctk-date-time-picker/vue-ctk-date-time-picker.vue
@@ -186,30 +186,18 @@
           ? this.getRangeDatesTimeFormat(val)
           : this.getDateTimeFormat(val))
         )
+      } else if (this.rangeMode) {
+        this.$emit('input', this.getRangeDatesTimeFormat({}))
       }
       moment.locale(this.locale)
     },
     methods: {
-      getRangeDatesTime () {
-        const dates = {
-          start: moment(this.value.start),
-          end: this.value.end ? moment(this.value.end) : null
-        }
-        return dates
-      },
       getDateTime () {
         const date = this.disableDate
           ? this.value ? moment(`${moment().format('YYYY-MM-DD')} ${this.value}`) : moment()
           : this.value ? moment(this.value) : moment()
         return nearestMinutes(this.minuteInterval, date, moment)
       },
-      getRangeDatesTimeFormat (day) {
-        const dates = {
-          start: moment(day.start).format(this.format),
-          end: day.end ? moment(day.end).format(this.format) : null
-        }
-        return dates
-      },
       getDateTimeFormat (day) {
         return nearestMinutes(this.minuteInterval, day, moment).format(this.format)
       },
@@ -221,9 +209,27 @@
           : null
         return date ? nearestMinutes(this.minuteInterval, date, moment).locale(this.locale).format(this.formatted) : null
       },
+      getRangeDatesTime () {
+        const hasStartValues = this.value && this.value.start
+        const hasEndValues = this.value && this.value.end
+        return { start: hasStartValues ? moment(this.value.start) : null, end: hasEndValues ? moment(this.value.end) : null }
+      },
+      getRangeDatesTimeFormat (day) {
+        const { start, end } = day
+        return {
+          start: start ? moment(start).format(this.format) : null,
+          end: end ? moment(end).format(this.format) : null
+        }
+      },
       getRangeDatesFormatted () {
-        const datesFormatted = `${moment(this.value.start).locale(this.locale).format(this.formatted)}`
-        return this.value.end ? `${datesFormatted} - ${moment(this.value.end).locale(this.locale).format(this.formatted)}` : `${datesFormatted} - ?`
+        const hasStartValues = this.value && this.value.start
+        const hasEndValues = this.value && this.value.end
+        if (hasStartValues || hasEndValues) {
+          const datesFormatted = hasStartValues ? `${moment(this.value.start).locale(this.locale).format(this.formatted)}` : '...'
+          return hasEndValues ? `${datesFormatted} - ${moment(this.value.end).locale(this.locale).format(this.formatted)}` : `${datesFormatted} - ...`
+        } else {
+          return null
+        }
       },
       changeDate (day) {
         this.$emit('input', (this.rangeMode ? this.getRangeDatesTimeFormat(day) : this.getDateTimeFormat(day)))
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>vue-ctk-date-time-picker</title><link rel=stylesheet href=./assets/main.css><link href=./static/css/app.596179cf1d5485374e4ea3ebb34a61c7.css rel=stylesheet></head><body><div id=app></div><script src=/build/build.js></script><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.1eb7121699eee7ac0a43.js></script><script type=text/javascript src=./static/js/app.946a614ca530d8f4d7da.js></script></body></html>
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>vue-ctk-date-time-picker</title><link rel=stylesheet href=./assets/main.css><link href=./static/css/app.82ec24b8a763f7789a8bb63122344983.css rel=stylesheet></head><body><div id=app></div><script src=/build/build.js></script><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.1eb7121699eee7ac0a43.js></script><script type=text/javascript src=./static/js/app.12e502addb1fc36b12c2.js></script></body></html>