手机版

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

时间:2021-08-20 来源:互联网 编辑:宝哥软件园 浏览:

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

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

效果1

会自动判断当前年份

以下为超文本标记语言代码其中用到了框架和支杆标签但是这两个都不是重要的主要书用于赋值和取值方便

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

“% @”页面语言=“Java”导入=“Java”。乌提尔。* "页面编码=' UTF-8 ' % @ taglib uri='/struts-tags '前缀=' s ' % script src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(function(){ select month();})//年月选择星函数选择月(){ var myDate=new Date();var year=MyDate。GetTuckfullyear();var month=mydate。getutchmonth();var日期列表=新数组();var enddayFOr(var I=0;i=12i ){ var m=第一个月;endDay=maxDay(m,year-1);if(M12)日期列表。push((year-1)'-'(m1)' ~ ' end day);else日期列表。push(year '-'(m-11)' ~ ' end day);} DateList。反向();$.每个(dateList,function(idx,item){ var ym=item。拆分(' ~ ');var mon=ym[0].拆分('-');if(mon[1]==(第一个月)周一[0]==年)$('#dateList ').追加('选项值=' myDate.getDate()' ')本月/option ');else $('#dateList ').追加('选项值=' ym[1]' ' ym[0]'/option ');})getEndTime();}函数maxDay(月、年){//获得某年某月最大天数var d=新日期();d.setUTCFullYear(年、月);返回新日期(d.getFullYear()、d . getmonth()(1,0).getDate();}函数getEndTime(){ //动态生成月初日期和月末日期var列表=$(' #日期列表选项:选中');var selMonth=$(' #选择的日期列表选项: ').html() if(selMonth=='本月){ var d=新日期();$('#starTime ').val(d . getutchfullyear()'-'(d . getutchmonth()1)'-1 ');$('#endTime ').val(d . getutchfullyear()'-'(d . getutchmonth()1)'-'列表。val());}else{ $('#starTime ').val(selMonth '-1 ');$('#endTime ').val(selMonth '-'列表。val());}}//年月选择end/脚本正文TD nowrap=' nowrap ' style=' width : 15% ' align=' center '日期:选择id=' dateList 'n change=' getEndTime()'/select从输入名称=' starTime ' id=' starTime ' value=' s 3360 date name=' starTime ' format=' yyyyy-MM-DD '/onFocus=' WdatePicker()' class=' Wdate ' style=' width : 110 px;高度: 17px边框-左侧: 0;边框-top : 0;右边框: 0;边框-底部-颜色: #C06' /至输入名称=' end time ' id=' end time ' value=' s 3360 date name=' end time ' format=' yyyyy-MM-DD '/onFocus=' WdatePicker()' class=' Wdate ' style=' width : 110 px;高度: 17px边框-左侧: 0;边框-top : 0;右边框: 0;边框-底部-颜色: # C06 '/TD/车身以上为核心代码,有需要的兄弟尽管拿去用,如有更好的请帮忙推荐。

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

在线日期/天数计算器:http://工具。JB 51。net/jisuanqi/date _ jisuanqi

在线日期计算器/相差天数计算器:http://工具。JB 51。net/jis uan qi/日期计算

在线日期天数差计算器:http://工具。JB 51。net/jis uan qi/online datejsq

Unix操作系统操作系统时间戳(时间戳)转换工具:http://工具。JB 51。网络/代码/UNIX时间

更多关于框架相关内容感兴趣的读者可查看本站专题: 《jQuery日期与时间操作技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常见事件用法与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

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

版权声明:JavaScript自动生成年月范围选择功能完整示例【基于框架插件】是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。