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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jquery拖动改变div大小
Jul 04 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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中for循环语句的几种变型
2006/11/26 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
jQuery实现简单弹幕效果
2019/11/28 jQuery
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python super()函数使用及多重继承
2020/05/06 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
JDK安装目录下有哪些内容
2014/08/25 面试题
财务部绩效考核方案
2014/05/04 职场文书
员工生日活动方案
2014/08/24 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
同意报考公务员证明
2015/06/17 职场文书
Python实现简繁体转换
2021/06/07 Python
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
Nginx配置https的实现
2021/11/27 Servers