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实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery 实现扁平式小清新导航
Jul 07 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 getsiteurl()函数
2009/09/05 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
vue登录注册实例详解
2019/09/14 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
对Python 数组的切片操作详解
2018/07/02 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
django form和field具体方法和属性说明
2020/07/09 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
工程力学专业毕业生求职信
2013/10/06 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
淘宝好评语大全
2014/05/05 职场文书
售后客服工作职责
2014/06/16 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
教师三严三实心得体会
2014/10/11 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
用python自动生成日历
2021/04/24 Python
windows系统搭建WEB服务器详细教程
2022/08/05 Servers