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

Extensible Enketo form engine

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

/**
 * For now, the whole purpose of this widget is to show a native month picker on
 * MOBILE devices with browsers that support it.
 *
 * @augments Widget
 */
class DatepickerMobile extends Widget {
    /**
     * @type {string}
     */
    static get selector() {
        return '.or-appearance-month-year input[type="date"]';
    }

    /**
     * @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 non-mobile device is used.
        return (
            !data.has(element, 'DatepickerExtended') &&
            support.touch &&
            support.inputTypes.month
        );
    }

    _init() {
        this.element.classList.add('hide');
        const fragment = document
            .createRange()
            .createContextualFragment(
                '<input class="ignore widget datepicker-mobile" type="month"/>'
            );
        this.element.after(fragment);
        this.widgetInput = this.question.querySelector('input.widget');
        // set default value
        this.value = this.originalInputValue;

        this.widgetInput.addEventListener('change', () => {
            this.originalInputValue = this.value;
        });
    }

    /**
     * @type {string}
     */
    get value() {
        return this.widgetInput.value ? `${this.widgetInput.value}-01` : '';
    }

    set value(value) {
        const toSet = value ? value.substring(0, value.lastIndexOf('-')) : '';
        this.widgetInput.value = toSet;
    }

    /**
     * Updates value
     */
    update() {
        this.value = this.originalInputValue;
    }
}

export default DatepickerMobile;