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

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

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

40de1695359c4406b9c81b552573e70f.png

bcb95dfe07d9ce11bcee55830593cf39.png

会自动判断当前年份

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

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

$(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(""+"本月"+"");

else

$("#dateList").append(""+ym[0]+"");

})

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

日期:

value=""

onFocus="WdatePicker()" class="Wdate"

style="width: 110px; height: 17px; border-left: 0; border-top: 0; border-right: 0; border-bottom-color: #C06" />

value=""

onFocus="WdatePicker()" class="Wdate"

style="width: 110px; height: 17px; border-left: 0; border-top: 0; border-right: 0; border-bottom-color: #C06" />

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

PS:这里再为大家推荐几款时间及日期相关工具供大家参考使用:

希望本文所述对大家jQuery程序设计有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值