最近公司有個項目模塊需要一個定時發佈功能，對時間選擇方面無合適組件可用，翻資料文檔發現了一款幾年前用JS封裝的簡易型時間選擇器(帶閏平年判斷)，感覺不錯，現分享希望對大家有用！
- <html>
- <head>
- <title>日期選擇類下拉框</title>
- <meta http-equiv="content-type" content="text/html; charset=GBK">
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" charset="GBK"></script>
- </head>
- <body>
- <form name="form">
- <input type="text" id="time_show"><br>
- <select id="time_year" onChange="javascript:YearDay(this.value);"></select>
- <select id="time_month" onChange="javascript:MonthDay(this.value);"></select>
- <select id="time_day" onChange="javascript:setTimeShow();"></select>
- <select id="time_hour" onChange="javascript:setTimeShow();"></select>
- <select id="time_minute" onChange="javascript:setTimeShow();"></select>
- <select id="time_second" onChange="javascript:setTimeShow();"></select>
- </form>
- <script type="text/javascript">
- var TimeShow = $("#time_show");
- var TimeYear = $("#time_year");
- var TimeMonth = $("#time_month");
- var TimeDay = $("#time_day");
- var TimeHour = $("#time_hour");
- var TimeMinute = $("#time_minute");
- var TimeSecond = $("#time_second");
- /*默認值*/
- var Year = null;
- var Month = null;
- var Day = null;
- var Hour = null;
- var Minute = null;
- var Second = null;
- /*賦值格式*/
- function setTimeShow(){
- var time = TimeYear.val()+"-"+TimeMonth.val()+"-"+TimeDay.val()+" "+TimeHour.val()+":"+TimeMinute.val()+":"+TimeSecond.val();
- TimeShow.attr("value",time);
- }
- //以下內容可單獨保存調用
- /***************
- * @ Name 日期選擇類 下拉框式
- * @ Version 1.0
- * @ Writer JSPGen
- * @ Time 2008年06月
- * @ Address www.jspgen.com
- * @ E-mail:[email protected] QQ 190582560
- ***************/
- var NowTime = new Date();
- if(Year == null) { Year = NowTime.getFullYear(); }
- if(Month == null) { Month = NowTime.getMonth()+1; }
- if(Day == null) { Day = NowTime.getDate(); }
- if(Hour == null) { Hour = NowTime.getHours(); }
- if(Minute == null) { Minute = NowTime.getMinutes(); }
- if(Second == null) { Second = NowTime.getSeconds(); }
- var MonthHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
- var DayMax = MonthHead[Month-1];
- /*寫年*/
- for (var i=Year; i <(Year+3); i++){
- if(i == Year){
- TimeYear.append("<option value=\"" +i+ "\" selected >" +i+ "年</option>");
- }else{
- TimeYear.append("<option value=\"" +i+ "\">" +i+ "年</option>");
- }
- }
- /*寫月*/
- for (var i = 1; i < 13; i++) {
- var m = i>9 ? i : "0"+i;
- if(m == Month){
- TimeMonth.append("<option value=\"" +m+ "\" selected >" +m+ "月</option>");
- }else{
- TimeMonth.append("<option value=\"" +m+ "\">" +m+ "月</option>");
- }
- }
- /*寫日*/
- if(Month==2 && isPinYear(Year)){DayMax++;} setTimeDay(DayMax);
- /*寫時*/
- for (var i = 0; i < 24; i++) {
- var v = i>9 ? i : "0"+i;
- if(v == Hour){
- TimeHour.append("<option value=\"" +v+ "\" selected >" +v+ "時</option>");
- }else{
- TimeHour.append("<option value=\"" +v+ "\">" +v+ "時</option>");
- }
- }
- /*寫分*/
- for (var i = 0; i < 60; i++) {
- var v = i>9 ? i : "0"+i;
- if(v == Minute){
- TimeMinute.append("<option value=\"" +v+ "\" selected >" +v+ "分</option>");
- }else{
- TimeMinute.append("<option value=\"" +v+ "\">" +v+ "分</option>");
- }
- }
- /*寫秒*/
- for (var i = 0; i < 60; i++) {
- var v = i>9 ? i : "0"+i;
- if(v == Second){
- TimeSecond.append("<option value=\"" +v+ "\" selected >" +v+ "秒</option>");
- }else{
- TimeSecond.append("<option value=\"" +v+ "\">" +v+ "秒</option>");
- }
- }
- setTimeShow();
- /*年發生變化時日期發生變化(主要是判斷閏平年)*/
- function YearDay(value){
- var mvalue = TimeMonth.val();
- if (mvalue == "") { optionsClear(TimeDay); return; }
- var dvalue = MonthHead[mvalue-1];
- if (mvalue == 2 && isPinYear(value)) dvalue++;
- setTimeDay(dvalue);
- }
- /*月發生變化時日期聯動*/
- function MonthDay(value) {
- var yvalue = TimeYear.val();
- if (yvalue == "") { optionsClear(TimeDay); return; }
- var dvalue = MonthHead[value-1];
- if (value == 2 && isPinYear(yvalue)) dvalue++;
- setTimeDay(dvalue);
- }
- /*據條件寫日期*/
- function setTimeDay(dvalue){
- optionsClear(TimeDay);
- for (var i=1; i<(dvalue+1); i++){
- var d = i>9 ? i : "0"+i;
- if(d == Day){
- TimeDay.append("<option value=\"" +d+ "\" selected >" +d+ "日</option>");
- }else{
- TimeDay.append("<option value=\"" +d+ "\">" +d+ "日</option>");
- }
- }
- setTimeShow();
- }
- /*
- //賦值
- function setTimeShow(){
- var time = TimeYear.val()+"-"+TimeMonth.val()+"-"+TimeDay.val()+" "+TimeHour.val()+":"+TimeMinute.val()+":"+TimeSecond.val();
- TimeShow.attr("value",time);
- }
- */
- /*判斷是否閏平年*/
- function isPinYear(year){
- return (0 == year%4 && (year%100 != 0 || year%400 == 0));
- }
- /*清空下拉列表*/
- function optionsClear(o){o.empty();}
- </script>
- </body>
- </html>