Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 'use strict';
- // Making up for Safari's lack of native date picker
- // Trying to ape the iOS one
- var mac_os_safari_date_picker = {
- init: function(){
- document.querySelectorAll('input[type="date"]').forEach(function(date_input){
- date_input.addEventListener('focus', mac_os_safari_date_picker.show_date_picker);
- });
- },
- 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', 'position: absolute; border: 1px solid #ccc; background-color: #fff; z-index: 10; padding: 15px 20px; text-align: center;');
- 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_date_picker.date_picker(),
- current_value = event.target.value.split('-');
- mac_os_safari_date_picker.hide_date_picker();
- 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('-');
- });
- },
- hide_date_picker: function(){
- var existing_date_picker = document.querySelector('fieldset#date_picker');
- if( existing_date_picker ){
- existing_date_picker.parentElement.removeChild(existing_date_picker);
- }
- }
- };
- var mac_os_safari_time_picker = {
- init: function(){
- document.querySelectorAll('input[type="time"]').forEach(function(time_input){
- time_input.addEventListener('focus', mac_os_safari_time_picker.show_time_picker);
- });
- },
- 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', 'position: absolute; border: 1px solid #ccc; background-color: #fff; z-index: 10; padding: 15px 20px; text-align: center;');
- 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_padded);
- }
- time_picker.appendChild(hour_select);
- time_picker.appendChild(minute_select);
- return time_picker;
- },
- show_time_picker: function(event){
- var time_picker = mac_os_safari_time_picker.time_picker(),
- current_value = event.target.value.split(':');
- mac_os_safari_time_picker.hide_time_picker();
- 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 = 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');
- this.previousSibling.value = [selects[0].value, selects[1].value].join(':');
- });
- },
- hide_time_picker: function(){
- var existing_time_picker = document.querySelector('fieldset#time_picker');
- if( existing_time_picker ){
- existing_time_picker.parentElement.removeChild(existing_time_picker);
- }
- }
- };
- var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
- if( !iOS ){
- mac_os_safari_date_picker.init();
- mac_os_safari_time_picker.init();
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement