scripts/django_cradmin/DateTimePicker.js | django_cradmin API Document

# scripts/django_cradmin/DateTimePicker.js

    import AbstractWidget from "ievv_jsbase/widget/AbstractWidget";
    import ElementCreator from "./utilities/ElementCreator";

    import moment from 'moment';

    export default class DateTimePicker extends AbstractWidget {
      constructor(element) {
        super(element);
        this.logger = new window.ievv_jsbase_core.LoggerSingleton().getLogger("ievv_jsui.DateTimePicker");
        this.logger.setLogLevel(window.ievv_jsbase_core.LOGLEVEL.DEBUG);

        this._initializeCalendarCoordinators();

        this.elementCreator = new ElementCreator();
        this._buildCalendarTable();
        this.logger.debug(`Got moment: \n`, moment);
      }

      _initializeCalendarCoordinators() {
        this.selectedMomentObject = null;
        this.nowMomentObject = moment(this.config.now);

        this.calendarCoordinator = new CalendarCoordinator({
          selectedMomentObject: this.selectedMomentObject,
          minimumDatetime: this.config.minimumDatetime,
          maximumDatetime: this.config.maximumDatetime,
          nowMomentObject: this.nowMomentObject
        });

        this.monthlyCalendarCoordinator = new MonthlyCalendarCoordinator({
          calendarCoordinator: this.calendarCoordinator,
          yearselectValues: this.config.yearselect_values,
          hourselectValues: this.config.hourselect_values,
          minuteselectValues: this.config.minuteselect_values,
          yearFormat: this.config.yearselect_momentjs_format,
          monthFormat: this.config.monthselect_momentjs_format,
          dayOfMonthSelectFormat: this.config.dayofmonthselect_momentjs_format,
          dayOfMonthTableCellFormat: this.config.dayofmonthtablecell_momentjs_format,
          hourFormat: this.config.hourselect_momentjs_format,
          minuteFormat: this.config.minuteselect_momentjs_format
        });

      }

      /**
       * Table caption must be set using HTMLTableElement.createCaption()... so cant use {@link ElementCreator} for this one
       *
       * @param {HTMLTableElement} tableElement  the table as it looks by now..
       * @returns {HTMLTableElement}  the same tableElement, only with caption set according to values from this.config
       * @private
       */
      _setupTableCaption(tableElement) {
        tableElement.createCaption();
        tableElement.caption.innerHTML = this.config.dateselectorTableScreenreaderCaptionText;
        tableElement.caption.classList.add(this.config.dateselectorTableScreenreaderCaptionCssClass);
        return tableElement;
      }

      /**
       * build a plain table row and return it
       * @returns {HTMLTableRowElement}
       * @private
       */
      _buildTableRowElement() {
        this.elementCreator.reset('tr');
        return this.elementCreator.renderElement();
      }

      /**
       * build the full table header, with a row containing days of week and such.
       *
       * @returns {HTMLTableSectionElement}
       * @private
       */
      _buildTableHeadElement() {
        this.elementCreator.reset('thead');
        const tableHead = this.elementCreator.renderElement();
        tableHead.appendChild(this._buildTableRowElement());
        //TODO: loop monthlyCalendarCoordinator.shortWeekdays and make <th> elements

        return tableHead;
      }

      _buildTableBodyElement() {
        this.elementCreator.reset('tbody');
        const tableBody = this.elementCreator.renderElement();

        return tableBody;
      }

      /**
       * Build the full calendar table element and return it
       * uses most of the other `_build...()` functions to build the actual table parts
       *
       * @returns {HTMLTableElement}
       * @private
       */
      _buildCalendarTable() {
        this.elementCreator.reset('table');
        this.elementCreator.addCssClass(this.config.tableCssClass);
        let tableElement = this.elementCreator.renderElement();
        tableElement = this._setupTableCaption(tableElement);

        tableElement.appendChild(this._buildTableHeadElement());
        tableElement.appendChild(this._buildTableBodyElement());
        this.logger.debug("got table:\n", tableElement);
        this.logger.debug("as html: \n", tableElement.outerHTML);

        return tableElement
      }

      getDefaultConfig() {
        return {
          tableCssClass: "django-cradmin-datetime-selector-table",
          dateselectorTableScreenreaderCaptionCssClass: "sr-only",
          dateselectorTableScreenreaderCaptionText: "Select date",
          now: null,
          minimumDatetime: null,
          maximumDatetime: null,
          yearselect_values: [],
          hourselect_values: [],
          minuteselect_values: [],
          yearselect_momentjs_format: "YYYY",
          monthselect_momentjs_format: "MMM",
          dayofmonthselect_momentjs_format: "DD",
          dayofmonthtablecell_momentjs_format: "D",
          hourselect_momentjs_format: "HH",
          minuteselect_momentjs_format: "mm"
        };
      }

      destroy() {

      }
    }