Skip to content

Instantly share code, notes, and snippets.

@nuxodin
Created May 12, 2022 12:55
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save nuxodin/7e0bd99605054261f5411a96a002043d to your computer and use it in GitHub Desktop.
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();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment