",
"main": "dist/vue-ctk-date-time-picker.min.js",
diff --git a/src/App.vue b/src/App.vue
index 381db4e2..4059a81d 100644
--- 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
index 601966e8..b3121dbf 100644
--- 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
index bf9cedd1..f49d72ab 100644
--- a/src/vue-ctk-date-time-picker/_subs/CtkDateRangePicker.vue
+++ b/src/vue-ctk-date-time-picker/_subs/CtkDateRangePicker.vue
@@ -22,7 +22,7 @@
- {{ getDateFormatted() }}
+ {{ getRangeDatesFormatted }}
@@ -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
index 81769c3f..cfa451bf 100644
--- 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
index 4796398a..6f2293f4 100644
--- 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)))