基于jqUI的日期选择（‘yy-mm-dd’）

今天看某公司的网页，其中有个筛选条件是选择一个时间区间，从而选择出符合条件的项。什么也不说了，先看图左边的输入框，点击具体的日期，这里我选择的是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表示年；

基于jqUI的日期选择（‘yy-mm-dd’）相关推荐

mysql 日期格式转换mm/dd_如何将日期格式“dd/mm/yy”转换为“yy/mm/dd”以便插入mysql数据库？...
当我从格式为"dd/mm/yy"的文件中插入日期格式为"yy/mm/dd"的数据库表时,日期错误: 我得到的不是2019:04:11,而是2011:04:19. ...
年月日格式判断-正则表达式 YYYY/MM/DD、YYYY/MM/DD| YY/MM/DD、 ^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}$)|(^\d{4}…
一.简单的日期判断(YYYY/MM/DD): ^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$ 二.演化的日期判断(YYYY/MM/DD| YY/MM/DD): ^(^(\d{4}| ...
编写一个程序, 接收用户录入的日期信息并且将其显示出来. 其中, 输入日期的形式为月/日/年(mm/dd/yy), 输出日期的形式为年月日(yy.mm.dd)。
#include<stdio.h> int main(){printf("Enter a date (mm/dd/yy):\n");int m,d,y;scanf(&q ...
matlab时间转为数字,如何将日期数组(格式'mm/dd/yy HH:MM：SS')转换为数字？
我最近(1周)决定将我的工作从matlab迁移到Python.由于我习惯了matlab,所以我发现有时难以获得我想要在python中完成的任务. 这是我的问题: 我有一套我想处理的csv文件.到目前为 ...
ReactNative 基于rmc-datepicker的日期选择的使用
实现效果: API pram description type default styles 自定义DatePicker样式 Object pickerStyles value 选中值 String ...
uni-app日期选择组件-基于mx-datepicker修改
首先非常感谢mx-datepicker作者,这个时间组件非常漂亮且好用. 由于我们的需求是,在一个可用的日期范围内选择一个日期,作者并没有支持这种场景,于是在作者的基础上进行了修改. 具体的需求如下: ...
vue日期选择组件_一个Vue组件，为波斯开发人员提供日期选择器
vue日期选择组件 Vue波斯日期选择器 (vue persian datepicker) This is a Jalali date picker component for Vue. 这是Vue的 ...
daterangepicker java_日期选择插件Date Range Picker
Date Range Picker jQuery Date Range Picker 是一个基于 jQuery 的日期选择插件,使用起来也算方便,主要提日期范围.单个日期 (时间.周.快捷键.每周其 ...
yyyy/mm/dd变成yyyy-mm-dd
当电脑的日期格式不是yyyy/mm/dd的形式的时候,假使是yyyy-mm-dd格式, 即便在程序中格式化日期格式yyyy/mm/dd,但是做成的日期却是yyyy-mm-dd. 不能只是单纯的Shor ...
9 款样式华丽的 jQuery 日期选择和日历控件
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...

基于jqUI的日期选择（‘yy-mm-dd’）

基于jqUI的日期选择（‘yy-mm-dd’）相关推荐

最新文章

热门文章