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实现图片轮播器
May 23 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery实现简单全选框
Sep 13 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 日期时间处理函数小结
2009/12/18 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
php错误日志简单配置方法
2016/07/11 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
python生成特定分布数的实例
2019/12/05 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
如何提高MySql的安全性
2014/06/19 面试题
机电专业大学生职业规划书范文
2014/02/25 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js