104 lines
3.4 KiB
JavaScript
104 lines
3.4 KiB
JavaScript
Vue.component('tt-date-picker', {
|
|
template: `
|
|
<input type="text" class="form-control form-control-sm" ref="input"
|
|
style="cursor: pointer;background-color: #ffffff">
|
|
`, props: ['value'],
|
|
data() {
|
|
return {
|
|
inputValue: '',
|
|
isInitialized: false,
|
|
moment: window.moment,
|
|
locale: {
|
|
"format": "DD.MM.YYYY HH:mm",
|
|
"separator": " - ",
|
|
"applyLabel": "Übernehmen",
|
|
"cancelLabel": "Löschen",
|
|
"fromLabel": "Von",
|
|
"toLabel": "Bis",
|
|
"customRangeLabel": "Benutzerdefiniert",
|
|
"weekLabel": "W",
|
|
"daysOfWeek": [
|
|
"So",
|
|
"Mo",
|
|
"Di",
|
|
"Mi",
|
|
"Do",
|
|
"Fr",
|
|
"Sa"
|
|
],
|
|
"monthNames": [
|
|
"Januar",
|
|
"Februar",
|
|
"März",
|
|
"April",
|
|
"Mai",
|
|
"Juni",
|
|
"Juli",
|
|
"August",
|
|
"September",
|
|
"Oktober",
|
|
"November",
|
|
"Dezember"
|
|
],
|
|
"firstDay": 1
|
|
},
|
|
}
|
|
},
|
|
mounted() {
|
|
this.isInitialized = true;
|
|
$(this.$refs.input).daterangepicker({
|
|
autoUpdateInput: true,
|
|
startDate: this.value?.from ? this.moment.unix(this.value.from) : undefined,
|
|
endDate: this.value?.to ? this.moment.unix(this.value.to) : undefined,
|
|
timePicker: true,
|
|
timePicker24Hour: true,
|
|
locale: this.locale,
|
|
});
|
|
|
|
const _this = this;
|
|
$(this.$refs.input).on('apply.daterangepicker', function (ev, picker) {
|
|
_this.$emit('input', {
|
|
from: picker.startDate.unix(),
|
|
to: picker.endDate.unix()
|
|
}
|
|
);
|
|
$(_this.$refs.input).val(picker.startDate.format(_this.locale.format) + _this.locale.separator + picker.endDate.format(_this.locale.format));
|
|
});
|
|
|
|
function checkIfAppliedElseClear() {
|
|
if (this.value && this.value.from && this.value.to) return;
|
|
$(_this.$refs.input).val('');
|
|
}
|
|
|
|
function clearIfCancelled() {
|
|
_this.$emit('input', {from: null, to: null});
|
|
$(_this.$refs.input).val('');
|
|
}
|
|
|
|
$(this.$refs.input).on('cancel.daterangepicker', clearIfCancelled);
|
|
$(this.$refs.input).on('hide.daterangepicker', checkIfAppliedElseClear.bind(this));
|
|
|
|
// if value from or to is undefined then clear the input field
|
|
if (!this.value || this.value.from === null || this.value.to === null) {
|
|
$(_this.$refs.input).val('');
|
|
}
|
|
|
|
},
|
|
watch: {
|
|
value: function (newVal) {
|
|
if (!this.isInitialized) return;
|
|
|
|
const datePicker = $(this.$refs.input).data('daterangepicker');
|
|
if (!newVal || newVal.from === null || newVal.to === null) {
|
|
$(this.$refs.input).val('');
|
|
} else {
|
|
datePicker.setStartDate(this.moment.unix(newVal.from));
|
|
datePicker.setEndDate(this.moment.unix(newVal.to));
|
|
}
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
$(this.$refs.input).off('apply.daterangepicker');
|
|
},
|
|
})
|