aristath/kirki

import "./control.scss";

wp.customize.controlConstructor['kirki-date'] = wp.customize.kirkiDynamicControl.extend({

    handleWidth: (input) => {
        var styleTag = document.querySelector('#kirki-style-datepicker');
        styleTag.innerHTML = '.kirki-datepicker-popup {width: ' + input.clientWidth.toString() + 'px;}';
    },

    initKirkiControl: function (control) {
        var selector;

        control = control || this;
        selector = control.selector + ' input.datepicker';

        var styleTag = document.querySelector('#kirki-style-datepicker');

        if (!styleTag) {
            styleTag = document.createElement('style');
            styleTag.id = 'kirki-style-datepicker';
            document.head.appendChild(styleTag);
        }

        // Init the datepicker.
        jQuery(selector).datepicker({
            dateFormat: 'yy-mm-dd',
            duration: 200,
            beforeShow: function (input, inst) {
                inst.dpDiv[0].classList.add('kirki-datepicker-popup');
                control.handleWidth(input);
            }
        });

        // Save the changes
        this.container.on('change keyup paste', 'input.datepicker', function () {
            control.setting.set(jQuery(this).val());
        });
    }
});