datepicker.js

  1. /**
  2.  * @param {HTMLElement} element DOM element for component instantiation and scope
  3.  * @param {Object} options
  4.  * @param {String} options.datepickerFormat Format for dates
  5.  */
  6. export class Datepicker {
  7.   /**
  8.    * @static
  9.    * Shorthand for instance creation and initialisation.
  10.    *
  11.    * @param {HTMLElement} root DOM element for component instantiation and scope
  12.    *
  13.    * @return {Datepicker} An instance of Datepicker.
  14.    */
  15.   static autoInit(root, { DATEPICKER: defaultOptions = {} } = {}) {
  16.     const datepicker = new Datepicker(root, defaultOptions);
  17.     datepicker.init();
  18.     root.ECLDatepicker = datepicker;
  19.     return datepicker;
  20.   }
  22.   constructor(
  23.     element,
  24.     {
  25.       format = '',
  26.       theme = 'ecl-datepicker-theme',
  27.       yearRange = 40,
  28.       reposition = false,
  29.       i18n = {
  30.         previousMonth: 'Previous Month',
  31.         nextMonth: 'Next Month',
  32.         months: [
  33.           'January',
  34.           'February',
  35.           'March',
  36.           'April',
  37.           'May',
  38.           'June',
  39.           'July',
  40.           'August',
  41.           'September',
  42.           'October',
  43.           'November',
  44.           'December',
  45.         ],
  46.         weekdays: [
  47.           'Sunday',
  48.           'Monday',
  49.           'Tuesday',
  50.           'Wednesday',
  51.           'Thursday',
  52.           'Friday',
  53.           'Saturday',
  54.         ],
  55.         weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
  56.       },
  57.       showDaysInNextAndPreviousMonths = true,
  58.       enableSelectionDaysInNextAndPreviousMonths = true,
  59.     } = {},
  60.   ) {
  61.     // Check element
  62.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  63.       throw new TypeError(
  64.         'DOM element should be given to initialize this widget.',
  65.       );
  66.     }
  68.     this.element = element;
  70.     // Options
  71.     this.picker = null;
  72.     this.format = format;
  73.     this.theme = theme;
  74.     this.yearRange = yearRange;
  75.     this.i18n = i18n;
  76.     this.showDaysInNextAndPreviousMonths = showDaysInNextAndPreviousMonths;
  77.     this.enableSelectionDaysInNextAndPreviousMonths =
  78.       enableSelectionDaysInNextAndPreviousMonths;
  79.     this.reposition = reposition;
  80.     this.direction = 'ltr';
  81.   }
  83.   /**
  84.    * Initialise component.
  85.    */
  86.   init() {
  87.     if (typeof window.Pikaday === 'undefined') {
  88.       throw new TypeError(
  89.         'Pikaday is not available. Make sure to include Pikaday in your project if you want to use the ECL datepicker',
  90.       );
  91.     }
  92.     if (!ECL) {
  93.       throw new TypeError('Called init but ECL is not present');
  94.     }
  95.     ECL.components = ECL.components || new Map();
  97.     this.direction = getComputedStyle(this.element).direction;
  99.     const options = {
  100.       field: this.element,
  101.       yearRange: this.yearRange,
  102.       firstDay: 1,
  103.       i18n: this.i18n,
  104.       theme: this.theme,
  105.       reposition: this.reposition,
  106.       isRTL: this.direction === 'rtl',
  107.       position: this.direction === 'rtl' ? 'bottom right' : 'bottom left',
  108.       showDaysInNextAndPreviousMonths: this.showDaysInNextAndPreviousMonths,
  109.       enableSelectionDaysInNextAndPreviousMonths:
  110.         this.enableSelectionDaysInNextAndPreviousMonths,
  111.     };
  113.     if (this.format !== '') {
  114.       options.format = this.format;
  115.     } else {
  116.       options.toString = (date) => {
  117.         const day = `0${date.getDate()}`.slice(-2);
  118.         const month = `0${date.getMonth() + 1}`.slice(-2);
  119.         const year = date.getFullYear();
  121.         return `${day}-${month}-${year}`;
  122.       };
  123.     }
  125.     // eslint-disable-next-line no-undef
  126.     this.picker = new Pikaday({
  127.       ...options,
  128.       onOpen() {
  129.         this.direction = getComputedStyle(this.el).direction;
  131.         // Extend picker size on mobile
  132.         const vw = Math.max(
  133.           document.documentElement.clientWidth || 0,
  134.           window.innerWidth || 0,
  135.         );
  136.         const elRect = this.el.getBoundingClientRect();
  138.         if (this.direction === 'rtl') {
  139.           const pickerMargin = vw - elRect.right;
  140.           if (vw < 768) {
  141.             this.el.style.left = `${pickerMargin}px`;
  142.           } else {
  143.             this.el.style.left = 'auto';
  144.           }
  145.         } else {
  146.           const pickerMargin = elRect.left;
  147.           if (vw < 768) {
  148.             this.el.style.right = `${pickerMargin}px`;
  149.           } else {
  150.             this.el.style.right = 'auto';
  151.           }
  152.         }
  153.       },
  154.     });
  156.     // Set ecl initialized attribute
  157.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  158.     ECL.components.set(this.element, this);
  160.     return this.picker;
  161.   }
  163.   /**
  164.    * Destroy component.
  165.    */
  166.   destroy() {
  167.     if (this.picker) {
  168.       this.picker.destroy();
  169.       this.picker = null;
  170.     }
  171.     if (this.element) {
  172.       this.element.removeAttribute('data-ecl-auto-initialized');
  173.       ECL.components.delete(this.element);
  174.     }
  175.   }
  176. }
  178. export default Datepicker;