溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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();
})
//年月選擇 star
function 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" 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"
/>
至
<input name="endTime" id="endTime"
value="<s:date name="endTime" format="yyyy-MM-dd"/>"
onFocus="WdatePicker()" class="Wdate"
/>
</td>
</body>
以上為核心代碼，有需要的兄弟盡管拿去用，如有更好的請幫忙推薦。
PS：這里再為大家推薦幾款時間及日期相關工具供大家參考使用：
在線日期/天數計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線日期計算器/相差天數計算器：
http://tools.jb51.net/jisuanqi/datecalc
在線日期天數差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix時間戳(timestamp)轉換工具：
http://tools.jb51.net/code/unixtime
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery日期與時間操作技巧總結》、《jQuery擴展技巧總結》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
