基于jqUI的日期选择(‘yy-mm-dd’)
来源:互联网 发布:hp1536 无线连接网络 编辑:程序博客网 时间:2024/06/16 01:30
今天看某公司的网页,其中有个筛选条件是选择一个时间区间,从而选择出符合条件的项。什么也不说了,先看图左边的输入框,点击具体的日期,这里我选择的是2017-3-9,然后右边的输入框就只能选择这个日期以后的了,这点还是非常的人性化的,然后我就追根溯源,找到了这是Jquery Ui的组件。datapicker,这里就不详细的介绍了,菜鸟教程一大堆。我就简单的说一下用法:
1 <script> 2 $(function() { 3 $( "#from" ).datepicker({ 4 defaultDate: "+1w", 5 changeMonth: true, 6 numberOfMonths: 1, 7 minDate:0, 8 dateFormat:"yy-mm-dd", 9 onClose: function( selectedDate ) {10 $( "#to" ).datepicker( "option", "minDate", selectedDate );11 }12 });13 $( "#to" ).datepicker({14 defaultDate: "+1w",15 changeMonth: true,16 numberOfMonths: 1,17 onClose: function( selectedDate ) {18 $( "#from" ).datepicker( "option", "maxDate", selectedDate );19 }20 });21 });22 </script>
html:
<label for="from">从</label><input type="text" id="from" name="from"><label for="to">到</label><input type="text" id="to" name="to">
defaultDate指的是默认的时间,是从当前的日期最多能选择的时间;
changeMonth是否能更换月份,true是能更换;
numberOfMonths显示几个月份,后面跟的是数字,表示显示几个月的,最小是1,如果是0,那就什么也看不到了;
dateFormat值得是选择完日期后,输入框中需要显示的让日期的格式;
onClose这是最重要的了,这里就能看出来为什么第二个的日期选择输入框只能选择上个输入框以后的日期了。
minDate的意思的是能选择的最小日期,距离今天的时间跨度。在表示时间跨度中使用‘+-’表示是向前还是向后,w表示周 d表示天 m表示月 y表示年;
阅读全文
0 0
- 基于jqUI的日期选择(‘yy-mm-dd’)
- 数据库日期使用RR-MM-DD保存年份与使用YY-MM-DD的区别
- java中设置日期格式的方式一般用SimpleDateFormat("YY-MM-dd")就可以了,但为什么有的 SimpleDateFormat("YY-MM-dd",locale.getDefau
- sql语句中如何将datetime格式的日期转换为yy-mm-dd格式
- 正则式判断MM/DD/YY日期格式
- 一些共通的方法(今日の日付,排序,YY/MM/DD,SimpleDateFormat)
- 日期转变经典 ‘dd-m月 -yy’转变为‘yyyy-mm-dd’的语句 字符串中子字符串出现N次的位置
- Js 判断日期是否正确("yyyy-mm-dd || yyyy/mm/dd || dd-mm-yyyy || dd/mm/yyyy || mm-dd-yyyy || mm/dd/yyyy")
- 日期格式yyyy-MM-dd HH:mm:ss的解释
- 前台选择的日期格式是yyyy-MM-dd,数据库中是Timestamp,查不到结束日期当天的数据
- 日期 yyyy-mm-dd 的正则表达式(能够区分真实日期,区分闰年)
- js 获取两个日期之间所有的日期(YYYY-MM-DD)
- iOS - 日期格式YYYY-MM-dd和yyyy-MM-dd的区别
- 如何解决:Android中 Error generating final archive: Debug Certificate expired on yy/mm/dd hh:mm 的错误
- 匹配yyyy-mm-dd日期格式的的正则表达式
- 编写程序,利用GregorianCalendar类,输入日期(yyyy-MM-dd),打印当前月份的日历。
- Oracle和MySQL简单的日期比较(格式为yyyy-mm-dd)
- DataBinder.Eval 显示YYYY-MM-DD的日期型格式
- 动态规划入门(二)DP 基本思想 具体实现 经典题目 POJ1088
- Linux命令
- git reset
- ajax异步之false
- android 蓝牙4.0(BLE)开发
- 基于jqUI的日期选择(‘yy-mm-dd’)
- XML document structures must start and end within the same entity
- Windows04.CMap
- 笔试之排序算法(一)
- 蓝桥杯 PREV-21 历届试题 回文数字
- [AHK]遍历窗口
- 深入理解js闭包
- 初学数据结构---树和二叉树
- WeX5之Data插入