Skip to content

Commit e292dc2

Browse files
LouisMazelLouisMazel
authored
💊 [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
1 parent c83f057 commit e292dc2

23 files changed

+76
-59
lines changed

‎demo/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +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>
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.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>

‎demo/static/css/app.596179cf1d5485374e4ea3ebb34a61c7.css renamed to ‎demo/static/css/app.82ec24b8a763f7789a8bb63122344983.css

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/static/css/app.596179cf1d5485374e4ea3ebb34a61c7.css.map renamed to ‎demo/static/css/app.82ec24b8a763f7789a8bb63122344983.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/static/js/app.12e502addb1fc36b12c2.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/static/js/app.12e502addb1fc36b12c2.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/static/js/app.946a614ca530d8f4d7da.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎demo/static/js/app.946a614ca530d8f4d7da.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎demo/static/js/manifest.3ad1d5771e9b13dbdad2.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/umd/vue-ctk-date-time-picker.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/umd/vue-ctk-date-time-picker.min.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/umd/vue-ctk-date-time-picker.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/umd/vue-ctk-date-time-picker.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-ctk-date-time-picker.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-ctk-date-time-picker.min.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-ctk-date-time-picker.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-ctk-date-time-picker.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-ctk-date-time-picker",
3-
"version": "1.3.0",
3+
"version": "1.3.1",
44
"description": "A vue component for select date & time (by Chronotruck)",
55
"author": "Louis Mazel <[email protected]>",
66
"main": "dist/vue-ctk-date-time-picker.min.js",

‎src/App.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,10 @@
264264
start: '2018-04-05',
265265
end: '2018-04-20'
266266
},
267+
rangeValues2: {
268+
start: null,
269+
end: null
270+
},
267271
timePickerValue: '14:26',
268272
minuteInterval: 5,
269273
minuteInterval2: 10,

‎src/vue-ctk-date-time-picker/_subs/CtkDatePickerAgenda.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@
8585
:min-date="minDate"
8686
:max-date="maxDate"
8787
:disabled-dates="disabledDates"
88-
:value="value"
8988
:dark="dark"
9089
@change-date="selectDate"
9190
@change-month="changeMonth"

‎src/vue-ctk-date-time-picker/_subs/CtkDateRangePicker.vue

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</div>
2323

2424
<div class="flex justify-content-between">
25-
<span class="datepicker-date dots-text flex-1">{{ getDateFormatted() }}</span>
25+
<span class="datepicker-date dots-text flex-1">{{ getRangeDatesFormatted }}</span>
2626
</div>
2727
</div>
2828
<div class="datetimepicker-container flex">
@@ -46,7 +46,6 @@
4646
:color="color"
4747
:min-date="minDate"
4848
:max-date="maxDate"
49-
:value="value"
5049
:dark="dark"
5150
class="date-range-picker"
5251
range-mode
@@ -113,32 +112,42 @@
113112
}
114113
},
115114
year () {
116-
const date = this.dateTime.end ? this.dateTime.end : this.dateTime.start
115+
const date = this.dateTime.start || this.dateTime.end
116+
? this.dateTime.end ? this.dateTime.end : this.dateTime.start
117+
: moment()
117118
return date.format('YYYY')
119+
},
120+
getRangeDatesFormatted () {
121+
const hasStartValues = this.value && this.value.start
122+
const hasEndValues = this.value && this.value.end
123+
if (!hasStartValues && !hasEndValues) {
124+
return '... - ...'
125+
} else if (hasStartValues || hasEndValues) {
126+
const datesFormatted = hasStartValues ? `${moment(this.dateTime.start).locale(this.locale).format('ddd D MMM')}` : '...'
127+
return hasEndValues ? `${datesFormatted} - ${moment(this.dateTime.end).locale(this.locale).format('ddd D MMM')}` : `${datesFormatted} - ...`
128+
} else {
129+
return null
130+
}
118131
}
119132
},
120133
watch: {
121134
dateTime: {
122135
handler () {
123136
this.month = this.getMonth()
124-
this.getDateFormatted()
125137
},
126138
deep: true
127139
},
128140
locale () {
129141
this.month = this.getMonth()
130-
this.getDateFormatted()
131142
}
132143
},
133144
methods: {
134145
getMonth () {
135-
const date = this.dateTime.end ? this.dateTime.end : this.dateTime.start
146+
const date = this.dateTime.start || this.dateTime.end
147+
? this.dateTime.end ? this.dateTime.end : this.dateTime.start
148+
: moment()
136149
return new Month(date.month(), date.year())
137150
},
138-
getDateFormatted () {
139-
const datesFormatted = `${moment(this.dateTime.start).locale(this.locale).format('ddd D MMM')}`
140-
return this.dateTime.end ? `${datesFormatted} - ${moment(this.dateTime.end).locale(this.locale).format('ddd D MMM')}` : `${datesFormatted} - ?`
141-
},
142151
selectDate (dateTime) {
143152
this.$emit('change-date', dateTime)
144153
this.$refs['calendar-shortcut'].unSelectAllShortcuts()

‎src/vue-ctk-date-time-picker/_subs/_subs/CtkDatePicker.vue

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
v-for="day in monthDays"
5959
:key="day.format('D')"
6060
:class="{
61-
selected: isSelected(day) && value && !isDisabled(day),
61+
selected: isSelected(day) && !isDisabled(day),
6262
disabled: (isDisabled(day) || isWeekEndDay(day)),
6363
enable: !(isDisabled(day) || isWeekEndDay(day)),
6464
between: isBetween(day) && rangeMode,
@@ -102,7 +102,6 @@
102102
locale: {type: String, default: String},
103103
inline: {type: Boolean, default: Boolean},
104104
noWeekendsDays: {type: Boolean, default: Boolean},
105-
value: {type: [String, Object], default: String},
106105
rangeMode: {type: Boolean, default: false},
107106
disabledDates: {type: Array, default: Array},
108107
dark: {type: Boolean, default: false}
@@ -111,11 +110,7 @@
111110
return {
112111
transitionDaysName: 'slidenext',
113112
transitionLabelName: 'slidevnext',
114-
weekDays: getWeekDays(this.locale),
115-
days: {
116-
start: null,
117-
end: null
118-
}
113+
weekDays: getWeekDays(this.locale)
119114
}
120115
},
121116
computed: {
@@ -161,8 +156,12 @@
161156
},
162157
isSelected (day) {
163158
const date = [
164-
...(this.dateTime.start ? [this.dateTime.start.format('YYYY-MM-DD')] : [this.dateTime.format('YYYY-MM-DD')]),
165-
...(this.dateTime.end ? [this.dateTime.end.format('YYYY-MM-DD')] : [])
159+
...(this.dateTime.start
160+
? [this.dateTime.start.format('YYYY-MM-DD')]
161+
: this.rangeMode ? [] : [this.dateTime.format('YYYY-MM-DD')]),
162+
...(this.dateTime.end
163+
? [this.dateTime.end.format('YYYY-MM-DD')]
164+
: this.rangeMode ? [] : [this.dateTime.format('YYYY-MM-DD')])
166165
]
167166
return date.indexOf(day.format('YYYY-MM-DD')) > -1
168167
},
@@ -185,13 +184,13 @@
185184
},
186185
selectDate (day) {
187186
if (this.rangeMode) {
188-
if (!this.days.start || this.days.end || day.isBefore(this.days.start)) {
189-
this.days.start = day
190-
this.days.end = null
187+
if (!this.dateTime.start || this.dateTime.end || day.isBefore(this.dateTime.start)) {
188+
this.dateTime.start = day
189+
this.dateTime.end = null
191190
} else {
192-
this.days.end = day
191+
this.dateTime.end = day
193192
}
194-
this.$emit('change-date', this.days)
193+
this.$emit('change-date', this.dateTime)
195194
} else {
196195
this.$emit('change-date', day)
197196
}

‎src/vue-ctk-date-time-picker/vue-ctk-date-time-picker.vue

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -186,30 +186,18 @@
186186
? this.getRangeDatesTimeFormat(val)
187187
: this.getDateTimeFormat(val))
188188
)
189+
} else if (this.rangeMode) {
190+
this.$emit('input', this.getRangeDatesTimeFormat({}))
189191
}
190192
moment.locale(this.locale)
191193
},
192194
methods: {
193-
getRangeDatesTime () {
194-
const dates = {
195-
start: moment(this.value.start),
196-
end: this.value.end ? moment(this.value.end) : null
197-
}
198-
return dates
199-
},
200195
getDateTime () {
201196
const date = this.disableDate
202197
? this.value ? moment(`${moment().format('YYYY-MM-DD')} ${this.value}`) : moment()
203198
: this.value ? moment(this.value) : moment()
204199
return nearestMinutes(this.minuteInterval, date, moment)
205200
},
206-
getRangeDatesTimeFormat (day) {
207-
const dates = {
208-
start: moment(day.start).format(this.format),
209-
end: day.end ? moment(day.end).format(this.format) : null
210-
}
211-
return dates
212-
},
213201
getDateTimeFormat (day) {
214202
return nearestMinutes(this.minuteInterval, day, moment).format(this.format)
215203
},
@@ -221,9 +209,27 @@
221209
: null
222210
return date ? nearestMinutes(this.minuteInterval, date, moment).locale(this.locale).format(this.formatted) : null
223211
},
212+
getRangeDatesTime () {
213+
const hasStartValues = this.value && this.value.start
214+
const hasEndValues = this.value && this.value.end
215+
return { start: hasStartValues ? moment(this.value.start) : null, end: hasEndValues ? moment(this.value.end) : null }
216+
},
217+
getRangeDatesTimeFormat (day) {
218+
const { start, end } = day
219+
return {
220+
start: start ? moment(start).format(this.format) : null,
221+
end: end ? moment(end).format(this.format) : null
222+
}
223+
},
224224
getRangeDatesFormatted () {
225-
const datesFormatted = `${moment(this.value.start).locale(this.locale).format(this.formatted)}`
226-
return this.value.end ? `${datesFormatted} - ${moment(this.value.end).locale(this.locale).format(this.formatted)}` : `${datesFormatted} - ?`
225+
const hasStartValues = this.value && this.value.start
226+
const hasEndValues = this.value && this.value.end
227+
if (hasStartValues || hasEndValues) {
228+
const datesFormatted = hasStartValues ? `${moment(this.value.start).locale(this.locale).format(this.formatted)}` : '...'
229+
return hasEndValues ? `${datesFormatted} - ${moment(this.value.end).locale(this.locale).format(this.formatted)}` : `${datesFormatted} - ...`
230+
} else {
231+
return null
232+
}
227233
},
228234
changeDate (day) {
229235
this.$emit('input', (this.rangeMode ? this.getRangeDatesTimeFormat(day) : this.getDateTimeFormat(day)))

0 commit comments

Comments
 (0)