JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
程序员文章站
2022-09-07 08:38:19
本文实例讲述了javascript实现的自动生成 年月范围 选择功能。分享给大家供大家参考，具体如下：
近日做项目涉及到日期选择，为了用户界面友好，于是加入了一年内的年月...
本文实例讲述了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" 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)转换工具：
上一篇： vue路由教程之静态路由