月份是硬编码的（因为它们总是相同的），而日和年的值是根据当前选择的月份和年份以及当年分别动态生成的（请参阅下面的代码注释，了解这些函数的详细解释）。我们也决定动态地生成小时和月份，因为有这么多！

该代码可能会感兴趣的另一部分是特征检测码-来检测浏览器是否支持，我们创建了一个新的元素，设置其type到date，然后立即检查什么的类型设置为-不支持的浏览器将返回text，因为这个date类型会回到类型text。如果不支持，我们隐藏本地选择器并显示后备选取器UI（）。

// define variablesvar nativePicker = document.querySelector('.nativeDateTimePicker');var fallbackPicker = document.querySelector('.fallbackDateTimePicker');var fallbackLabel = document.querySelector('.fallbackLabel');var yearSelect = document.querySelector('#year');var monthSelect = document.querySelector('#month');var daySelect = document.querySelector('#day');var hourSelect = document.querySelector('#hour');var minuteSelect = document.querySelector('#minute');// hide fallback initiallyfallbackPicker.style.display = 'none';fallbackLabel.style.display = 'none';// test whether a new date input falls back to a text input or notvar test = document.createElement('input');test.type = 'date';// if it does, run the code inside the if() {} blockif(test.type === 'text') { // hide the native picker and show the fallback nativePicker.style.display = 'none'; fallbackPicker.style.display = 'block'; fallbackLabel.style.display = 'block'; // populate the days and years dynamically // (the months are always the same, therefore hardcoded) populateDays(monthSelect.value); populateYears(); populateHours(); populateMinutes();}function populateDays(month) { // delete the current set of  elements out of the // day 

, ready for the next set to be injected while(daySelect.firstChild){ daySelect.removeChild(daySelect.firstChild); } // Create variable to hold new number of days to inject var dayNum; // 31 or 30 days? if(month === 'January' | month === 'March' | month === 'May' | month === 'July' | month === 'August' | month === 'October' | month === 'December') { dayNum = 31; } else if(month === 'April' | month === 'June' | month === 'September' | month === 'November') { dayNum = 30; } else { // If month is February, calculate whether it is a leap year or not var year = yearSelect.value; (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28; } // inject the right number of new elements into the day for(i = 1; i <= dayNum; i++) { var option = document.createElement('option'); option.textContent = i; daySelect.appendChild(option); } // if previous day has already been set, set daySelect's value // to that day, to avoid the day jumping back to 1 when you // change the year if(previousDay) { daySelect.value = previousDay; // If the previous day was set to a high number, say 31, and then // you chose a month with less total days in it (e.g. February), // this part of the code ensures that the highest day available // is selected, rather than showing a blank daySelect if(daySelect.value === "") { daySelect.value = previousDay - 1; } if(daySelect.value === "") { daySelect.value = previousDay - 2; } if(daySelect.value === "") { daySelect.value = previousDay - 3; } }}function populateYears() { // get this year as a number var date = new Date(); var year = date.getFullYear(); // Make this year, and the 100 years before it available in the year for(var i = 0; i <= 100; i++) { var option = document.createElement('option'); option.textContent = year-i; yearSelect.appendChild(option); }}function populateHours() { // populate the hours with the 24 hours of the day for(var i = 0; i <= 23; i++) { var option = document.createElement('option'); option.textContent = (i < 10) ? ("0" + i) : i; hourSelect.appendChild(option); }}function populateMinutes() { // populate the minutes with the 60 hours of each minute for(var i = 0; i <= 59; i++) { var option = document.createElement('option'); option.textContent = (i < 10) ? ("0" + i) : i; minuteSelect.appendChild(option); }}// when the month or year values are changed, rerun populateDays()// in case the change affected the number of available daysyearSelect.onchange = function() { populateDays(monthSelect.value);}monthSelect.onchange = function() { populateDays(monthSelect.value);}//preserve day selectionvar previousDay;// update what day has been set to previously// see end of populateDays() for usagedaySelect.onchange = function() { previousDay = daySelect.value;}

规范

Specification	Status	Comments
HTML Living StandardThe definition of '' in that specification.	Living Standard
HTML5The definition of '' in that specification.	Recommendation

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	20	12	No support1	No support	10.62	No support2

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	?	(Yes)	(Yes)

上一篇： 下一篇：

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)