JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
时间:2019-09-03
本文章向大家介绍JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】,主要包括JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了JavaScript实现的自动生成 年月范围 选择功能。分享给大家供大家参考,具体如下:
近日做项目涉及到日期选择,为了用户界面友好,于是加入了一年内的年月段的查询功能,先看效果
会自动判断当前年份
以下为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>
以上为核心代码,有需要的兄弟尽管拿去用,如有更好的请帮忙推荐。
PS:这里再为大家推荐几款时间及日期相关工具供大家参考使用:
在线日期/天数计算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi
在线日期计算器/相差天数计算器:
http://tools.jb51.net/jisuanqi/datecalc
在线日期天数差计算器:
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix时间戳(timestamp)转换工具:
http://tools.jb51.net/code/unixtime
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery日期与时间操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
- hackme.inndy.tw的19道web题解(下)
- hackme.inndy.tw的19道web题解(中)
- hackme.inndy.tw的19道web题解(上)
- CTF中RSA题型解题思路及技巧
- 技术解析 | Web缓存欺骗测试
- SSH僵尸主机挖矿木马预警
- 看我如何通过Tor Onion在Windows中执行远程Shell
- 某租车系统JAVA代码审计
- 深入挖掘APP克隆实验
- Sickle:推荐一款优质ShellCode开发工具
- 看我教你如何修改QQ安装包实现绕过QQ语音红包验证来领红包
- “奇幻熊”(APT28)组织最新攻击
- GDB调试CVE-2018-5711 PHP-GD拒绝服务漏洞
- 高效与争议并存:大规模自动化渗透工具AutoSploit
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【收藏向】常用Java排错工具单
- MYSQL数据同步之基于GTID事务数据同步
- 【风险通告】XXL-JOB远程命令执行漏洞
- MySQL8.0特性之redo logging动态开关
- 3分钟短文:Laravel模型集合跟基类真不一样,别混为一谈
- 3分钟短文:Laravel模型一对一一对多关系真的乱吗?
- 3分钟短文:Laravel请求对象方法极多,可不是花拳绣腿
- 3分钟短文:Laravel验证用户输入,不要把啥都存到系统里
- 3分钟短文:Laravel用户自定义命令行简明教程
- 3分钟短文:Laravel命令行参数和可选项分不清?怎么可能!
- 《Offer一箩筐》求职之前你必须知道的 4 件事!!
- 3分钟短文:有趣的Laravel命令行交互,输入和输出!
- MySQL limit导致的执行计划差异
- 3分钟短文:用Laravel的方式管理服务器的文件们
- 漫画:什么是 “抽象工厂模式” ?