100 lines
2.3 KiB
JavaScript
100 lines
2.3 KiB
JavaScript
|
import ngModule from '../../module';
|
||
|
|
import Field from '../field';
|
||
|
|
import {Flatpickr} from '../../vendor';
|
||
|
|
import './style.scss';
|
||
|
|
|
||
|
|
class DatePicker extends Field {
|
||
|
|
constructor($element, $scope, $compile, $translate) {
|
||
|
|
super($element, $scope, $compile);
|
||
|
|
this.$translate = $translate;
|
||
|
|
|
||
|
|
this.input = $compile(`<input type="text"></input>`)($scope)[0];
|
||
|
|
this.initPicker();
|
||
|
|
}
|
||
|
|
|
||
|
|
get field() {
|
||
|
|
return super.field;
|
||
|
|
}
|
||
|
|
|
||
|
|
set field(value) {
|
||
|
|
super.field = value;
|
||
|
|
|
||
|
|
let date = value;
|
||
|
|
if (date && !(date instanceof Date))
|
||
|
|
date = new Date(date);
|
||
|
|
|
||
|
|
this.picker.setDate(fixDate(date));
|
||
|
|
}
|
||
|
|
|
||
|
|
set options(value) {
|
||
|
|
let selectedDates = this.picker.selectedDates || [];
|
||
|
|
this._options = value;
|
||
|
|
this.initPicker();
|
||
|
|
this.picker.setDate(selectedDates[0]);
|
||
|
|
}
|
||
|
|
|
||
|
|
get options() {
|
||
|
|
return this._options;
|
||
|
|
}
|
||
|
|
|
||
|
|
initPicker() {
|
||
|
|
let locale = this.$translate.use();
|
||
|
|
let format = locale == 'es' ? 'd-m-Y' : 'Y-m-d';
|
||
|
|
|
||
|
|
let options = this.options || {};
|
||
|
|
let defaultOptions = {
|
||
|
|
locale: locale,
|
||
|
|
dateFormat: format,
|
||
|
|
enableTime: false,
|
||
|
|
disableMobile: true,
|
||
|
|
onValueUpdate: () => this.onValueUpdate()
|
||
|
|
};
|
||
|
|
|
||
|
|
if (options.enableTime) {
|
||
|
|
Object.assign(defaultOptions, {
|
||
|
|
dateFormat: `${format} h:i`,
|
||
|
|
time_24hr: true
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
let mergedOptions = Object.assign({},
|
||
|
|
defaultOptions,
|
||
|
|
options
|
||
|
|
);
|
||
|
|
|
||
|
|
if (this.picker) this.picker.destroy();
|
||
|
|
this.picker = new Flatpickr(this.input, mergedOptions);
|
||
|
|
}
|
||
|
|
|
||
|
|
onValueUpdate() {
|
||
|
|
let date = null;
|
||
|
|
|
||
|
|
if (this.picker.selectedDates.length)
|
||
|
|
date = this.picker.selectedDates[0];
|
||
|
|
|
||
|
|
super.field = fixDate(date, -1);
|
||
|
|
this.$.$applyAsync();
|
||
|
|
}
|
||
|
|
|
||
|
|
$onDestroy() {
|
||
|
|
this.picker.destroy();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
DatePicker.$inject = ['$element', '$scope', '$compile', '$translate'];
|
||
|
|
|
||
|
|
ngModule.vnComponent('vnDatePicker', {
|
||
|
|
controller: DatePicker,
|
||
|
|
bindings: {
|
||
|
|
options: '<?'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function fixDate(date, mult = 1) {
|
||
|
|
if (date) {
|
||
|
|
let offset = date.getTimezoneOffset() * 60000;
|
||
|
|
date.setTime(date.getTime() + (offset * mult));
|
||
|
|
}
|
||
|
|
|
||
|
|
return date;
|
||
|
|
}
|