Last active
February 23, 2017 15:35
-
-
Save knorthfield/c4635bd7f8a84486baa1d54378fd772b to your computer and use it in GitHub Desktop.
iOS like date and time pickers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
// Making up for Safari's lack of native date picker | |
// Trying to ape the iOS one | |
var mac_os_safari_datetime_picker = { | |
init: function(){ | |
document.querySelectorAll('input[type="date"]').forEach(function(date_input){ | |
date_input.addEventListener('focus', mac_os_safari_datetime_picker.date.show_date_picker); | |
date_input.addEventListener('click', function(event){ | |
event.stopPropagation(); | |
}); | |
}); | |
document.querySelectorAll('input[type="time"]').forEach(function(time_input){ | |
time_input.addEventListener('focus', mac_os_safari_datetime_picker.time.show_time_picker); | |
time_input.addEventListener('click', function(event){ | |
event.stopPropagation(); | |
}); | |
}); | |
document.addEventListener('click', function(){ | |
mac_os_safari_datetime_picker.hide_pickers(); | |
}); | |
}, | |
styles: 'position: absolute; border: 1px solid #ccc; background-color: #fff; z-index: 10; padding: 15px 20px; text-align: center;', | |
date: { | |
date_picker: function(){ | |
var date_picker = document.createElement('fieldset'), | |
year_select = document.createElement('select'), | |
month_select = document.createElement('select'), | |
day_select = document.createElement('select'); | |
date_picker.setAttribute('id', 'date_picker'); | |
date_picker.setAttribute('style', mac_os_safari_datetime_picker.styles); | |
year_select.setAttribute('name', 'year'); | |
month_select.setAttribute('name', 'month'); | |
day_select.setAttribute('name', 'day'); | |
for (var day = 1; day <= 31; day++) { | |
day_select.options[day_select.options.length] = new Option(day, day); | |
} | |
['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'].forEach(function(month, i){ | |
var month_padded = ('00' + (i + 1)).slice(-2); | |
month_select.options[month_select.options.length] = new Option(month, month_padded); | |
}); | |
var this_year = new Date().getFullYear(); | |
for (var year = this_year; year < this_year + 3; year++) { | |
year_select.options[year_select.options.length] = new Option(year, year); | |
} | |
date_picker.appendChild(day_select); | |
date_picker.appendChild(month_select); | |
date_picker.appendChild(year_select); | |
return date_picker; | |
}, | |
show_date_picker: function(event){ | |
var date_picker = mac_os_safari_datetime_picker.date.date_picker(), | |
current_value = event.target.value.split('-'); | |
mac_os_safari_datetime_picker.hide_pickers(); | |
event.target.parentNode.insertBefore(date_picker, event.target.nextSibling); | |
if( current_value.length == 3 ){ | |
date_picker.querySelector('select[name="year"]').value = current_value[0]; | |
date_picker.querySelector('select[name="month"]').options[current_value[1]-1].selected = 'selected'; | |
date_picker.querySelector('select[name="day"]').value = current_value[2]; | |
} else { | |
var current_date = new Date(); | |
date_picker.querySelector('select[name="year"]').value = current_date.getFullYear(); | |
date_picker.querySelector('select[name="month"]').options[current_date.getMonth()].selected = 'selected'; | |
date_picker.querySelector('select[name="day"]').value = current_date.getDate(); | |
} | |
date_picker.addEventListener('change', function(){ | |
var selects = date_picker.querySelectorAll('select'); | |
this.previousSibling.value = [selects[2].value, selects[1].value, selects[0].value].join('-'); | |
}); | |
date_picker.addEventListener('click', function(event){ | |
event.stopPropagation(); | |
}); | |
} | |
}, | |
time: { | |
time_picker: function(){ | |
var time_picker = document.createElement('fieldset'), | |
hour_select = document.createElement('select'), | |
minute_select = document.createElement('select'); | |
time_picker.setAttribute('id', 'time_picker'); | |
time_picker.setAttribute('style', mac_os_safari_datetime_picker.styles); | |
hour_select.setAttribute('name', 'hour'); | |
minute_select.setAttribute('name', 'minute'); | |
for (var hour = 0; hour <= 23; hour++) { | |
var hour_padded = ('00' + hour).slice(-2); | |
hour_select.options[hour_select.options.length] = new Option(hour_padded, hour_padded); | |
} | |
for (var minute = 0; minute <= 59; minute++) { | |
var minute_padded = ('00' + minute).slice(-2); | |
minute_select.options[minute_select.options.length] = new Option(minute_padded, minute); | |
} | |
time_picker.appendChild(hour_select); | |
time_picker.appendChild(minute_select); | |
return time_picker; | |
}, | |
show_time_picker: function(event){ | |
var time_picker = mac_os_safari_datetime_picker.time.time_picker(), | |
current_value = event.target.value.split(':'); | |
mac_os_safari_datetime_picker.hide_pickers(); | |
event.target.parentNode.insertBefore(time_picker, event.target.nextSibling); | |
if( current_value.length == 2 ){ | |
time_picker.querySelector('select[name="hour"]').value = current_value[0]; | |
time_picker.querySelector('select[name="minute"]').value = parseInt(current_value[1]); | |
} else { | |
var current_time = new Date(); | |
time_picker.querySelector('select[name="hour"]').value = current_time.getHours(); | |
time_picker.querySelector('select[name="minute"]').value = current_time.getMinutes(); | |
} | |
time_picker.addEventListener('change', function(){ | |
var selects = time_picker.querySelectorAll('select'), | |
minute_padded = ('00' + selects[1].value).slice(-2); | |
this.previousSibling.value = [selects[0].value, minute_padded].join(':'); | |
}); | |
time_picker.addEventListener('click', function(event){ | |
event.stopPropagation(); | |
}); | |
} | |
}, | |
hide_pickers: function(){ | |
var existing_pickers = document.querySelector('fieldset#date_picker, fieldset#time_picker'); | |
if( existing_pickers ){ | |
existing_pickers.parentElement.removeChild(existing_pickers); | |
} | |
} | |
}; | |
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; | |
if( !iOS ){ | |
mac_os_safari_datetime_picker.init(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment