基于jqUI的日期选择(‘yy-mm-dd’)
今天看某公司的网页,其中有个筛选条件是选择一个时间区间,从而选择出符合条件的项。什么也不说了,先看图左边的输入框,点击具体的日期,这里我选择的是2017-3-9,然后右边的输入框就只能选择这个日期以后的了,这点还是非常的人性化的,然后我就追根溯源,找到了这是Jquery Ui的组件。datapicker,这里就不详细的介绍了,菜鸟教程一大堆。我就简单的说一下用法:
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
minDate:0,
dateFormat:"yy-mm-dd",
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</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表示年;
最后附上菜鸟的url,感兴趣的可以去看看点我
基于jqUI的日期选择(‘yy-mm-dd’)的更多相关文章
- 打造基于jQuery的日期选择控件
终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...
- Excel日期格式单元格写成yyyy.MM.dd格式将无法读取到DataTable
最近在改公司的订单系统,遇到了一个奇怪的问题.C#程序需要从Excel文件中将数据全部读取到DataTable,其中Excel文件的第一列是日期格式yyyy/MM/dd,而这一列中大部分的单元格都是按 ...
- 移动设备日期选择插件(基于JQUERY)
上周花了2个小时写的一个日期选择插件,比较适合移动端的设备.先看个效果图吧.如果刚好是你需要的就往下吧,不需要的也可以继续..... 其实网络上已经有的了类似的成熟插件,比如基于mobiscroll, ...
- 让用户输入一个日期字符串,将其转换成日期格式, 格式是(yyyy/MM/dd,yyyyMMdd,yyyy-MM-dd)中的一种, 任何一种转换成功都可以; 如果所有的都无法转换,输出日期格式非法。
第三种方法 while(true) { Date d; System.out.println("正在进行第一次匹配,请稍后~—~"); ...
- 基于DateTime Picker修改成类似旅游网站出发日期选择的功能
原版说明文档:http://www.bootcss.com/p/bootstrap-datetimepicker/ 修改后可支持多日期选择和控制可选日期,这样就能在后台设置哪些日期可选,前台展示时可以 ...
- webapp中的日期选择
你是否在开发webapp时,选择用哪种第三方日期选择控件绞尽脑汁? 其实不用那么麻烦,现在移动端都是WebKit内核,支持HTML5,其实只要弱弱的将input中将type="date&qu ...
- 页面日期选择控件--jquery ui datepicker 插件
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...
- 038. asp.netWeb用户控件之六实现日期选择的用户控件
web用户控件的ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile=&qu ...
- JS年月日三级联动下拉框日期选择代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 'utf8' codec can't decode byte 0xd1 in position 931: invalid continuation byte解决方法
有时候,我得到这样的字符œ导致的UnicodeDecodeError错误. 我需要能够使串的UTF-8有或没有这些字符. 在工作中,经常遇到,读取一个文件,或者是从网页获取一个问题,明明看着是gb23 ...
- 设置border属性变化不同形状:三角形、圆形、弧形 2017-03-20
一.通过设置边框----正方形.三角形 <style> .c{ height: 0px; width: 0px; border-top: 50px solid red; border-ri ...
- windows 下编译php扩展库pecl里的扩展memcache
Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果等.简单的说就是将数据调用到内 ...
- [Openfire]使用WebSocket建立Openfire的客户端
近日工作闲暇之余,对IM系统产生了兴趣,转而研究了IM的内容.找了半天,知道比较流行的是Openfire的系统,Openfire有许多平台实现,由于我是做Web的,所以当然是希望寻找Web的实现.Op ...
- 组件Prop验证
<div id="example"> <kkk></kkk> </div> <script src="https:/ ...
- node.js 模板 ejs 转
node.js 模板引ejs. 搜了一把推荐用ejs的最多. 速度比对:http://www.cnblogs.com/fengmk2/archive/2011/04/28/2031971.html e ...
- OpenCV局部变形算法探究
OpenCV是跨平台的强大的计算机视觉识别和图像处理的开源库,可以利用他来实现:模式识别.构建神经网络.深度学习,总之用途多多,入门级就先做一下图像处理吧! 基本的图像处理算法(图像灰阶化.二值化.仿 ...
- css 样式表 基础 样式
1大小 width 宽度 height 高度 2 背景 background-color 背景色 background-image:url(图片位置) 背景图片 background-repeat: ...
- CSS3学习笔记(1)-CSS3选择器
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- POPTEST 150801 祝大家前途似锦
POPTEST 150801 祝大家前途似锦 PT20150801学员不断在就业,同学们走好,远兵辛苦了!!!