JavaScript 自动生成 年月范围 选择

近日做项目涉及到日期选择,为了用户界面友好,于是加入了一年内的年月段的查询功能,先看效果

效果1

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

会自动判断当前年份

以下为html代码 其中用到了 Jquery 和 struts 标签 但是这两个都不是重要的 主要书 用于赋值 和 取值方便

还用到了 WdatePicker 插件进行具体日期选择

 

[html][/html] view plaincopy

  1. <%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8″%>
  2. <%@ taglib uri=”/struts-tags”  prefix=”s”%>
  3. <script type=”text/javascript” src=”<%=path%>/js/jquery-1.9.0.js”>
  4. <script type=”text/javascript”>
  5.     $(function(){
  6.          selectMonth();
  7.     })
  8. //年月选择 star
  9.         function selectMonth(){
  10.      var myDate =  new Date();
  11.      var year = myDate.getUTCFullYear();
  12.      var month = myDate.getUTCMonth ();
  13.      var dateList = new Array();
  14.      var endDay;
  15.      for(var i=0;i<=12;i++){
  16.         var m = month+i;
  17.         endDay = maxDay(m,year-1);
  18.         if(m<12)
  19.         dateList.push((year-1)+”-“+(m+1)+”~”+endDay);
  20.         else
  21.         dateList.push(year+”-“+(m-11)+”~”+endDay);
  22.      }
  23.      dateList.reverse();
  24.     $.each(dateList,function(idx,item){
  25.         var ym = item.split(“~”);
  26.             var mon = ym[0].split(“-“);
  27.             if(mon[1]==(month+1) && mon[0] == year)
  28.             $(“#dateList”).append(“<option value=”+myDate.getDate()+”>”+”本月”+”</option>”);
  29.             else
  30.             $(“#dateList”).append(“<option value=”+ym[1]+”>”+ym[0]+”</option>”);
  31.             })
  32.    getEndTime();
  33. }
  34. function maxDay(month,year){//获得某年某月最大天数
  35. var d= new Date();
  36. d.setUTCFullYear(year,month);
  37. return new Date(d.getFullYear(), d.getMonth()+1,0).getDate();
  38. }
  39. function getEndTime(){ //动态生成 月初日期 和 月末日期
  40.     var list = $(“#dateList option:selected”);
  41.     var selMonth = $(“#dateList option:selected”).html()
  42.     if( selMonth == “本月”){
  43.      var d = new Date();
  44.         $(“#starTime”).val(d.getUTCFullYear()+”-“+(d.getUTCMonth()+1)+”-1″);
  45.         $(“#endTime”).val(d.getUTCFullYear()+”-“+(d.getUTCMonth()+1)+”-“+list.val());
  46.     }else{
  47.     $(“#starTime”).val(selMonth+”-1″);
  48.     $(“#endTime”).val(selMonth+”-“+list.val());
  49.     }
  50. }
  51. //年月选择end
  52.     </script>
  53.   <body>
  54. <td nowrap=”nowrap” style=”width: 15%” align=”center”>
  55.                     日期:
  56.                     <select id=”dateList” onchange=”getEndTime()”> </select>
  57.                     从
  58.                     <input name=”starTime” id=”starTime”
  59.                         value=”<s:date name=”starTime” format=”yyyy-MM-dd”/>”
  60.                         onFocus=”WdatePicker()” class=”Wdate”
  61.                         style=”width: 110px; height: 17px; border-left: 0; border-top: 0; border-right: 0; border-bottom-color: #C06″ />
  62.                     至
  63.                     <input name=”endTime” id=”endTime”
  64.                         value=”<s:date name=”endTime” format=”yyyy-MM-dd”/>”
  65.                         onFocus=”WdatePicker()” class=”Wdate”
  66.                         style=”width: 110px; height: 17px; border-left: 0; border-top: 0; border-right: 0; border-bottom-color: #C06″ />
  67.                 </td>
  68.   </body>

以上为核心代码,有需要的兄弟尽管拿去用,如有更好的请帮忙推荐。

标签