本文實例講述了JavaScript實現的自動生成 年月范圍 選擇功能。分享給大家供大家參考，具體如下：
近日做項目涉及到日期選擇，為了用戶界面友好，于是加入了一年內的年月段的查詢功能，先看效果
會自動判斷當前年份
以下為html代碼 其中用到了 Jquery 和 struts 標簽 但是這兩個都不是重要的 主要書 用于賦值 和 取值方便
還用到了 WdatePicker 插件進行具體日期選擇
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="/struts-tags" prefix="s"%><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">$(function(){ selectMonth();})//年月選擇 starfunction selectMonth(){ var myDate = new Date(); var year = myDate.getUTCFullYear(); var month = myDate.getUTCMonth (); var dateList = new Array(); var endDay; for(var i=0;i<=12;i++){ var m = month+i; endDay = maxDay(m,year-1); if(m<12) dateList.push((year-1)+"-"+(m+1)+"~"+endDay); else dateList.push(year+"-"+(m-11)+"~"+endDay); } dateList.reverse(); $.each(dateList,function(idx,item){ var ym = item.split("~"); var mon = ym[0].split("-"); if(mon[1]==(month+1) && mon[0] == year) $("#dateList").append("<option value="+myDate.getDate()+">"+"本月"+"</option>"); else $("#dateList").append("<option value="+ym[1]+">"+ym[0]+"</option>"); }) getEndTime();}function maxDay(month,year){//獲得某年某月最大天數var d= new Date();d.setUTCFullYear(year,month);return new Date(d.getFullYear(), d.getMonth()+1,0).getDate();}function getEndTime(){ //動態生成 月初日期 和 月末日期 var list = $("#dateList option:selected"); var selMonth = $("#dateList option:selected").html() if( selMonth == "本月"){ var d = new Date(); $("#starTime").val(d.getUTCFullYear()+"-"+(d.getUTCMonth()+1)+"-1"); $("#endTime").val(d.getUTCFullYear()+"-"+(d.getUTCMonth()+1)+"-"+list.val()); }else{ $("#starTime").val(selMonth+"-1"); $("#endTime").val(selMonth+"-"+list.val()); }}//年月選擇end </script><body><td nowrap="nowrap" style="width: 15%" align="center"> 日期： <select id="dateList" οnchange="getEndTime()"> </select> 從 <input name="starTime" id="starTime" value="<s:date name="starTime" format="yyyy-MM-dd"/>" onFocus="WdatePicker()" class="Wdate" style="width: 110px; height: 17px; border-left: 0; border-top: 0; border-right: 0; border-bottom-color: #C06" /> 至 <input name="endTime" id="endTime" value="<s:date name="endTime" format="yyyy-MM-dd"/>" onFocus="WdatePicker()" class="Wdate" style="width: 110px; height: 17px; border-left: 0; border-top: 0; border-right: 0; border-bottom-color: #C06" /></td></body>以上為核心代碼，有需要的兄弟盡管拿去用，如有更好的請幫忙推薦。
PS：這里再為大家推薦幾款時間及日期相關工具供大家參考使用：
在線日期/天數計算器：
http://tools.VeVB.COm/jisuanqi/date_jisuanqi
在線日期計算器/相差天數計算器：
http://tools.VeVB.COm/jisuanqi/datecalc
在線日期天數差計算器：
http://tools.VeVB.COm/jisuanqi/onlinedatejsq
Unix時間戳(timestamp)轉換工具：
http://tools.VeVB.COm/code/unixtime
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery日期與時間操作技巧總結》、《jQuery擴展技巧總結》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
