enketo-core/src/widget/date-native/datepicker-native.js

Extensible Enketo form engine

import Widget from '../../js/widget';
import support from '../../js/support';
import { elementDataStore as data } from '../../js/dom-utils';

/**
 * The whole purpose of this widget is to hide the placeholder text on native date inputs
 * and show a consistent date format between readonly and non-readonly questions. This widget
 * is only activated for READONLY questions on NON-MOBILE devices.
 *
 * The placeholder is considered particularly unhelpful for month-year and year appearances.
 * For consistency it's also removed from regular date inputs.
 *
 * TODO: it looks like empty date/datetime-local inputs are hidden, so not clear to me if this widget actually
 * changes anything.
 *
 * @augments Widget
 */
class DatepickerNative extends Widget {
    /**
     * @type {string}
     */
    static get selector() {
        return '.question input[type="date"],.question input[type="datetime-local"]';
    }

    /**
     * @param {Element} element - the element to instantiate the widget on
     * @return {boolean} to instantiate or not to instantiate, that is the question
     */
    static condition(element) {
        // Do not instantiate if DatepickerExtended was instantiated on element or if mobile device is used.
        return (
            !data.has(element, 'DatepickerExtended') &&
            !data.has(element, 'DatetimepickerExtended') &&
            !support.touch
        );
    }

    _init() {
        this.element.type = 'text';
        this.element.classList.add('mask-date');
    }
}

export default DatepickerNative;