datetime.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. import $ from 'jquery';
  2. import { config } from 'grav-config';
  3. import 'eonasdan-bootstrap-datetimepicker';
  4. export default class DateTimeField {
  5. get defaults() {
  6. return {
  7. showTodayButton: true,
  8. showClear: true,
  9. locale: config.language || 'en',
  10. icons: {
  11. time: 'fa fa-clock-o',
  12. date: 'fa fa-calendar-o',
  13. up: 'fa fa-chevron-up',
  14. down: 'fa fa-chevron-down',
  15. previous: 'fa fa-chevron-left',
  16. next: 'fa fa-chevron-right',
  17. today: 'fa fa-bullseye',
  18. clear: 'fa fa-trash-o',
  19. close: 'fa fa-remove'
  20. }
  21. };
  22. }
  23. constructor(options) {
  24. this.items = $();
  25. this.options = Object.assign({}, this.defaults, options);
  26. $('[data-grav-datetime]').each((index, field) => this.addItem(field));
  27. $('body').on('mutation._grav', this._onAddedNodes.bind(this));
  28. }
  29. addItem(list) {
  30. list = $(list);
  31. this.items = this.items.add(list);
  32. if (list.data('DateTimePicker')) { return; }
  33. let options = Object.assign({}, this.options, list.data('grav-datetime') || {});
  34. list.datetimepicker(options).on('dp.show dp.update', this._disableDecades);
  35. list.siblings('.field-icons').on('click', () => list.mousedown().focus());
  36. }
  37. _onAddedNodes(event, target/* , record, instance */) {
  38. let fields = $(target).find('[data-grav-datetime]');
  39. if (!fields.length) { return; }
  40. fields.each((index, field) => {
  41. field = $(field);
  42. if (!~this.items.index(field)) {
  43. this.addItem(field);
  44. }
  45. });
  46. }
  47. _disableDecades() {
  48. $('.datepicker-years .picker-switch').removeAttr('title').on('click', (e) => e.stopPropagation());
  49. }
  50. }
  51. export let Instance = new DateTimeField();