date-time-local-polyfill.js

c1.c1Use('onElement',function(){ 'use strict';

    // check supported

    var x = document.createElement('input');
    x.type = 'datetime-local';
    if (x.type === 'datetime-local') return;

    document.head.insertAdjacentHTML(
        'afterbegin',
        '<style>'+
        '.fake-datetime-local-container.fake-datetime-local-container {'+
            'align-items:center;'+
            'display:inline-flex;'+
            'width:auto;'+
        '}'+
        'html .fake-datetime-local-container {'+ // overwrite c1-inp
            'width:auto;'+
        '}'+
        '.fake-datetime-local-container.fake-datetime-local-container > * {'+
            'border:none !important;'+
            'padding:0 !important;'+
            '-webkit-appearance: none !important;'+
            'appearance: none !important;'+
            'line-height:1.3;'+
        '}'+
        '.fake-datetime-local-container > [type=date] {'+
            'width:calc(20px + 6.5em);'+
        '}'+
        '</style>'
    );
    c1.onElement('input[type=datetime-local]',function(el){
        var div = document.createElement('div');
        div.className = 'fake-datetime-local-container c1-inp';
        div.innerHTML =
            '<input type=date><select>'+makeOptions(24)+'</select>:<select>'+makeOptions(60)+'</select>';
        var date   = div.firstChild;
        var hour   = date.nextElementSibling;
        var minute = hour.nextElementSibling;

        var parts = el.value.match(/([^T]+)T([0-9][0-9]):([0-9][0-9])/);
        if (parts) {
            date.value = parts[1];
            hour.value = parts[2];
            minute.value = parts[3];
        }

        div.addEventListener('input',function(e){
            el.value = date.value + 'T' + hour.value + ':' + minute.value + ':00';
            el.dispatchEvent(new Event('input'));
            e.stopImmediatePropagation();
        }, true);
        div.addEventListener('change',function(e){
            el.dispatchEvent(new Event('change'));
            stopPropa(e)
        }, true);
        div.addEventListener('focus', stopPropa, true);
        div.addEventListener('blur', stopPropa, true);
        el.after(div);
        el.style.cssText = 'width:0; height:0; opacity:0; position:absolute;';
    })
    function stopPropa(e){
        e.stopImmediatePropagation();
    }
    function makeOptions(num){
        return Array.apply(null, Array(num)).map(function(v,n){ return '<option>'+(n+'').padStart(2,'0')+'</option>'; } ).join();
    }

});