iOS like date and time pickers

datetime_picker.js

'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();
}