本文實(shí)例講述了JavaScript實(shí)現(xiàn)的自動(dòng)生成 年月范圍 選擇功能。分享給大家供大家參考，具體如下：
近日做項(xiàng)目涉及到日期選擇，為了用戶界面友好，于是加入了一年內(nèi)的年月段的查詢功能，先看效果
會(huì)自動(dòng)判斷當(dāng)前年份
以下為html代碼 其中用到了 Jquery 和 struts 標(biāo)簽 但是這兩個(gè)都不是重要的 主要書 用于賦值 和 取值方便
還用到了 WdatePicker 插件進(jìn)行具體日期選擇
<%@ 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){//獲得某年某月最大天數(shù)var d= new Date();d.setUTCFullYear(year,month);return new Date(d.getFullYear(), d.getMonth()+1,0).getDate();}function getEndTime(){ //動(dòng)態(tài)生成 月初日期 和 月末日期 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>以上為核心代碼，有需要的兄弟盡管拿去用，如有更好的請(qǐng)幫忙推薦。
PS：這里再為大家推薦幾款時(shí)間及日期相關(guān)工具供大家參考使用：
在線日期/天數(shù)計(jì)算器：
http://tools.VeVB.COm/jisuanqi/date_jisuanqi
在線日期計(jì)算器/相差天數(shù)計(jì)算器：
http://tools.VeVB.COm/jisuanqi/datecalc
在線日期天數(shù)差計(jì)算器：
http://tools.VeVB.COm/jisuanqi/onlinedatejsq
Unix時(shí)間戳(timestamp)轉(zhuǎn)換工具：
http://tools.VeVB.COm/code/unixtime
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery日期與時(shí)間操作技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
