64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
|
import $ from 'jquery';
|
||
|
import { config } from 'grav-config';
|
||
|
import '../../utils/bootstrap-datetimepicker';
|
||
|
|
||
|
export default class DateTimeField {
|
||
|
|
||
|
get defaults() {
|
||
|
return {
|
||
|
showTodayButton: true,
|
||
|
showClear: true,
|
||
|
locale: config.language || 'en',
|
||
|
icons: {
|
||
|
time: 'fa fa-clock-o',
|
||
|
date: 'fa fa-calendar-o',
|
||
|
up: 'fa fa-chevron-up',
|
||
|
down: 'fa fa-chevron-down',
|
||
|
previous: 'fa fa-chevron-left',
|
||
|
next: 'fa fa-chevron-right',
|
||
|
today: 'fa fa-bullseye',
|
||
|
clear: 'fa fa-trash-o',
|
||
|
close: 'fa fa-remove'
|
||
|
}
|
||
|
};
|
||
|
}
|
||
|
|
||
|
constructor(options) {
|
||
|
this.items = $();
|
||
|
this.options = Object.assign({}, this.defaults, options);
|
||
|
|
||
|
$('[data-grav-datetime]').each((index, field) => this.addItem(field));
|
||
|
$('body').on('mutation._grav', this._onAddedNodes.bind(this));
|
||
|
|
||
|
}
|
||
|
|
||
|
addItem(list) {
|
||
|
list = $(list);
|
||
|
this.items = this.items.add(list);
|
||
|
|
||
|
if (list.data('DateTimePicker')) { return; }
|
||
|
|
||
|
let options = Object.assign({}, this.options, list.data('grav-datetime') || {});
|
||
|
list.datetimepicker(options).on('dp.show dp.update', this._disableDecades);
|
||
|
list.siblings('.field-icons').on('click', () => list.mousedown().focus());
|
||
|
}
|
||
|
|
||
|
_onAddedNodes(event, target/* , record, instance */) {
|
||
|
let fields = $(target).find('[data-grav-datetime]');
|
||
|
if (!fields.length) { return; }
|
||
|
|
||
|
fields.each((index, field) => {
|
||
|
field = $(field);
|
||
|
if (!~this.items.index(field)) {
|
||
|
this.addItem(field);
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
_disableDecades() {
|
||
|
$('.datepicker-years .picker-switch').removeAttr('title').on('click', (e) => e.stopPropagation());
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export let Instance = new DateTimeField();
|