Advertisement
Guest User

Untitled

a guest
Feb 23rd, 2017
75
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.48 KB | None | 0 0
  1. 'use strict';
  2.  
  3. // Making up for Safari's lack of native date picker
  4. // Trying to ape the iOS one
  5. var mac_os_safari_date_picker = {
  6. init: function(){
  7.  
  8. document.querySelectorAll('input[type="date"]').forEach(function(date_input){
  9. date_input.addEventListener('focus', mac_os_safari_date_picker.show_date_picker);
  10. });
  11.  
  12. },
  13. date_picker: function(){
  14.  
  15. var date_picker = document.createElement('fieldset'),
  16. year_select = document.createElement('select'),
  17. month_select = document.createElement('select'),
  18. day_select = document.createElement('select');
  19.  
  20. date_picker.setAttribute('id', 'date_picker');
  21. date_picker.setAttribute('style', 'position: absolute; border: 1px solid #ccc; background-color: #fff; z-index: 10; padding: 15px 20px; text-align: center;');
  22.  
  23. year_select.setAttribute('name', 'year');
  24. month_select.setAttribute('name', 'month');
  25. day_select.setAttribute('name', 'day');
  26.  
  27. for (var day = 1; day <= 31; day++) {
  28. day_select.options[day_select.options.length] = new Option(day, day);
  29. }
  30.  
  31. ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'].forEach(function(month, i){
  32. var month_padded = ('00' + (i + 1)).slice(-2);
  33. month_select.options[month_select.options.length] = new Option(month, month_padded);
  34.  
  35. });
  36.  
  37. var this_year = new Date().getFullYear();
  38. for (var year = this_year; year < this_year + 3; year++) {
  39. year_select.options[year_select.options.length] = new Option(year, year);
  40. }
  41.  
  42. date_picker.appendChild(day_select);
  43. date_picker.appendChild(month_select);
  44. date_picker.appendChild(year_select);
  45.  
  46. return date_picker;
  47.  
  48. },
  49. show_date_picker: function(event){
  50.  
  51. var date_picker = mac_os_safari_date_picker.date_picker(),
  52. current_value = event.target.value.split('-');
  53.  
  54. mac_os_safari_date_picker.hide_date_picker();
  55.  
  56. event.target.parentNode.insertBefore(date_picker, event.target.nextSibling);
  57.  
  58. if( current_value.length == 3 ){
  59. date_picker.querySelector('select[name="year"]').value = current_value[0];
  60. date_picker.querySelector('select[name="month"]').options[current_value[1]-1].selected = 'selected';
  61. date_picker.querySelector('select[name="day"]').value = current_value[2];
  62. } else {
  63. var current_date = new Date();
  64. date_picker.querySelector('select[name="year"]').value = current_date.getFullYear();
  65. date_picker.querySelector('select[name="month"]').options[current_date.getMonth()].selected = 'selected';
  66. date_picker.querySelector('select[name="day"]').value = current_date.getDate();
  67. }
  68.  
  69. date_picker.addEventListener('change', function(){
  70. var selects = date_picker.querySelectorAll('select');
  71. this.previousSibling.value = [selects[2].value, selects[1].value, selects[0].value].join('-');
  72. });
  73.  
  74. },
  75. hide_date_picker: function(){
  76.  
  77. var existing_date_picker = document.querySelector('fieldset#date_picker');
  78. if( existing_date_picker ){
  79. existing_date_picker.parentElement.removeChild(existing_date_picker);
  80. }
  81.  
  82. }
  83. };
  84.  
  85. var mac_os_safari_time_picker = {
  86. init: function(){
  87.  
  88. document.querySelectorAll('input[type="time"]').forEach(function(time_input){
  89. time_input.addEventListener('focus', mac_os_safari_time_picker.show_time_picker);
  90. });
  91.  
  92. },
  93. time_picker: function(){
  94.  
  95. var time_picker = document.createElement('fieldset'),
  96. hour_select = document.createElement('select'),
  97. minute_select = document.createElement('select');
  98.  
  99. time_picker.setAttribute('id', 'time_picker');
  100. time_picker.setAttribute('style', 'position: absolute; border: 1px solid #ccc; background-color: #fff; z-index: 10; padding: 15px 20px; text-align: center;');
  101.  
  102. hour_select.setAttribute('name', 'hour');
  103. minute_select.setAttribute('name', 'minute');
  104.  
  105. for (var hour = 0; hour <= 23; hour++) {
  106. var hour_padded = ('00' + hour).slice(-2);
  107. hour_select.options[hour_select.options.length] = new Option(hour_padded, hour_padded);
  108. }
  109.  
  110. for (var minute = 0; minute <= 59; minute++) {
  111. var minute_padded = ('00' + minute).slice(-2);
  112. minute_select.options[minute_select.options.length] = new Option(minute_padded, minute_padded);
  113. }
  114.  
  115. time_picker.appendChild(hour_select);
  116. time_picker.appendChild(minute_select);
  117.  
  118. return time_picker;
  119.  
  120. },
  121. show_time_picker: function(event){
  122.  
  123. var time_picker = mac_os_safari_time_picker.time_picker(),
  124. current_value = event.target.value.split(':');
  125.  
  126. mac_os_safari_time_picker.hide_time_picker();
  127.  
  128. event.target.parentNode.insertBefore(time_picker, event.target.nextSibling);
  129.  
  130. if( current_value.length == 2 ){
  131. time_picker.querySelector('select[name="hour"]').value = current_value[0];
  132. time_picker.querySelector('select[name="minute"]').value = current_value[1];
  133. } else {
  134. var current_time = new Date();
  135. time_picker.querySelector('select[name="hour"]').value = current_time.getHours();
  136. time_picker.querySelector('select[name="minute"]').value = current_time.getMinutes();
  137. }
  138.  
  139. time_picker.addEventListener('change', function(){
  140. var selects = time_picker.querySelectorAll('select');
  141. this.previousSibling.value = [selects[0].value, selects[1].value].join(':');
  142. });
  143.  
  144. },
  145. hide_time_picker: function(){
  146.  
  147. var existing_time_picker = document.querySelector('fieldset#time_picker');
  148. if( existing_time_picker ){
  149. existing_time_picker.parentElement.removeChild(existing_time_picker);
  150. }
  151.  
  152. }
  153. };
  154.  
  155. var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  156. if( !iOS ){
  157. mac_os_safari_date_picker.init();
  158. mac_os_safari_time_picker.init();
  159. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement