欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】

程序员文章站 2022-04-28 20:55:22
本文实例讲述了javascript实现的自动生成 年月范围 选择功能。分享给大家供大家参考,具体如下: 近日做项目涉及到日期选择,为了用户界面友好,于是加入了一年内的年月...

本文实例讲述了javascript实现的自动生成 年月范围 选择功能。分享给大家供大家参考,具体如下:

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

JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】

JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】

会自动判断当前年份

以下为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" 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:这里再为大家推荐几款时间及日期相关工具供大家参考使用:

在线日期/天数计算器:

在线日期计算器/相差天数计算器:

在线日期天数差计算器:

unix时间戳(timestamp)转换工具: