diff options
Diffstat (limited to 'plugins/CoreHome/vue/src/DateRangePicker')
| -rw-r--r-- | plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue | 146 |
1 files changed, 82 insertions, 64 deletions
diff --git a/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue b/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue index c2af7ecb1c..a3f68387b0 100644 --- a/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue +++ b/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue @@ -5,57 +5,59 @@ --> <template> - <div id="calendarRangeFrom"> - <h6> - {{ translate('General_DateRangeFrom') }} - <input - type="text" - id="inputCalendarFrom" - name="inputCalendarFrom" - class="browser-default" - v-model="startDateText" - v-on:change="onRangeInputChanged('from', $event)" - v-on:keyup="handleEnterPress($event)" - /> - </h6> - <DatePicker - id="calendarFrom" - :view-date="startDate" - :selected-date-start="fromPickerSelectedDates[0]" - :selected-date-end="fromPickerSelectedDates[1]" - :highlighted-date-start="fromPickerHighlightedDates[0]" - :highlighted-date-end="fromPickerHighlightedDates[1]" - @date-select="setStartRangeDate($event.date)" - @cell-hover="fromPickerHighlightedDates = getNewHighlightedDates($event.date, $event.$cell)" - @cell-hover-leave="fromPickerHighlightedDates = [null, null]" - > - </DatePicker> - </div> - <div id="calendarRangeTo"> - <h6> - {{ translate('General_DateRangeTo') }} - <input - type="text" - id="inputCalendarTo" - name="inputCalendarTo" - class="browser-default" - v-model="endDateText" - v-on:change="onRangeInputChanged('to', $event)" - v-on:keyup="handleEnterPress($event)" - /> - </h6> - <DatePicker - id="calendarTo" - :view-date="endDate" - :selected-date-start="toPickerSelectedDates[0]" - :selected-date-end="toPickerSelectedDates[1]" - :highlighted-date-start="toPickerHighlightedDates[0]" - :highlighted-date-end="toPickerHighlightedDates[1]" - @date-select="setEndRangeDate($event.date)" - @cell-hover="toPickerHighlightedDates = getNewHighlightedDates($event.date, $event.$cell)" - @cell-hover-leave="toPickerHighlightedDates = [null, null]" - > - </DatePicker> + <div> + <div id="calendarRangeFrom"> + <h6> + {{ translate('General_DateRangeFrom') }} + <input + type="text" + id="inputCalendarFrom" + name="inputCalendarFrom" + class="browser-default" + v-model="startDateText" + @keydown="onRangeInputChanged('from', $event)" + @keyup="handleEnterPress($event)" + /> + </h6> + <DatePicker + id="calendarFrom" + :view-date="startDate" + :selected-date-start="fromPickerSelectedDates[0]" + :selected-date-end="fromPickerSelectedDates[1]" + :highlighted-date-start="fromPickerHighlightedDates[0]" + :highlighted-date-end="fromPickerHighlightedDates[1]" + @date-select="setStartRangeDate($event.date)" + @cell-hover="fromPickerHighlightedDates = getNewHighlightedDates($event.date, $event.$cell)" + @cell-hover-leave="fromPickerHighlightedDates = [null, null]" + > + </DatePicker> + </div> + <div id="calendarRangeTo"> + <h6> + {{ translate('General_DateRangeTo') }} + <input + type="text" + id="inputCalendarTo" + name="inputCalendarTo" + class="browser-default" + v-model="endDateText" + @keydown="onRangeInputChanged('to', $event)" + @keyup="handleEnterPress($event)" + /> + </h6> + <DatePicker + id="calendarTo" + :view-date="endDate" + :selected-date-start="toPickerSelectedDates[0]" + :selected-date-end="toPickerSelectedDates[1]" + :highlighted-date-start="toPickerHighlightedDates[0]" + :highlighted-date-end="toPickerHighlightedDates[1]" + @date-select="setEndRangeDate($event.date)" + @cell-hover="toPickerHighlightedDates = getNewHighlightedDates($event.date, $event.$cell)" + @cell-hover-leave="toPickerHighlightedDates = [null, null]" + > + </DatePicker> + </div> </div> </template> @@ -66,6 +68,8 @@ import DatePicker from '../DatePicker/DatePicker.vue'; import { parseDate, format } from '../Periods/utilities'; import ChangeEvent = JQuery.ChangeEvent; +const DATE_FORMAT = 'YYYY-MM-DD'; + export default defineComponent({ props: { startDate: String, @@ -96,6 +100,8 @@ export default defineComponent({ toPickerHighlightedDates: [null, null], startDateText: this.startDate, endDateText: this.endDate, + startDateInvalid: false, + endDateInvalid: false, }; }, emits: ['rangeChange', 'submit'], @@ -124,11 +130,13 @@ export default defineComponent({ this.rangeChanged(); }, onRangeInputChanged(source: string, event: ChangeEvent) { - if (source === 'from') { - this.setStartRangeDateFromStr(event.target.value); - } else { - this.setEndRangeDateFromStr(event.target.value); - } + setTimeout(() => { + if (source === 'from') { + this.setStartRangeDateFromStr(event.target.value); + } else { + this.setEndRangeDateFromStr(event.target.value); + } + }); }, getNewHighlightedDates(date: Date, $cell: JQuery) { if ($cell.hasClass('ui-datepicker-unselectable')) { @@ -148,32 +156,42 @@ export default defineComponent({ }); }, setStartRangeDateFromStr(dateStr: string) { + this.startDateInvalid = true; + let startDateParsed: Date; try { - startDateParsed = parseDate(dateStr); + if (dateStr.length === DATE_FORMAT.length) { + startDateParsed = parseDate(dateStr); + } } catch (e) { - this.startDateText = this.startDate; + // ignore } if (startDateParsed) { this.fromPickerSelectedDates = [startDateParsed, startDateParsed]; - } + this.startDateInvalid = false; - this.rangeChanged(); + this.rangeChanged(); + } }, setEndRangeDateFromStr(dateStr: string) { + this.endDateInvalid = true; + let endDateParsed: Date; try { - endDateParsed = parseDate(dateStr); + if (dateStr.length === DATE_FORMAT.length) { + endDateParsed = parseDate(dateStr); + } } catch (e) { - this.endDateText = this.endDate; + // ignore } if (endDateParsed) { this.toPickerSelectedDates = [endDateParsed, endDateParsed]; - } + this.endDateInvalid = false; - this.rangeChanged(); + this.rangeChanged(); + } }, rangeChanged() { this.$emit('rangeChange', { |