当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】

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

2019年09月06日  | 移动技术网IT编程  | 我要评论

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

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

效果1

会自动判断当前年份

以下为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)转换工具：

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网