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


Posted in jQuery onSeptember 03, 2019

本文实例讲述了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>

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

jQuery 相关文章推荐
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
Jquery动态列功能完整实例
Aug 30 #jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 #jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 #jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 #jQuery
Jquery实现获取子元素的方法分析
Aug 24 #jQuery
jquery分页优化操作实例分析
Aug 23 #jQuery
jquery实现的分页显示功能示例
Aug 23 #jQuery
You might like
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现mysql的读写分离及负载均衡
2018/02/04 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
python获取Linux发行版名称
2019/08/30 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
网络维护中文求职信
2014/01/03 职场文书
运动会广播稿300字
2014/01/10 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
老干部工作先进事迹
2014/08/17 职场文书
总经理检讨书
2014/09/15 职场文书
公司市场部岗位职责
2015/04/15 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
解除处分决定书
2015/06/25 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏