jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)(10级学员 林常禹总结)

转载 2012年03月27日 21:44:24

jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

 

  使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表。代码示例如下:

<script src="js/jquery-1.7.1.js"></script>   

<script src="js/jquery-ui-1.8.18.custom.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css">

注:引入js脚本时,需先引入jQuery类库,后引入jQuery ui 脚本

 

下面为两种实现步骤:

 

思路一:

第一步  实现两个datepicker组件。

  需要定义两个input标签,类型为text,并指定id属性

HTML代码如下

开始日期:<input type="text" id="start">

结束日期:<input type="text" id="end">

  js代码中得到两个input元素的jQuery对象,并将其转化为datepicker组件

Js代码如下

$(document).ready(function(){

    $("#start").datepicker();

    $("#end").datepicker();

});


实现以上操作后,在页面中点击文本框,如果出现datepicker则代表成功。

 

第二步  设置开始和结束日期

  当选择开始日期的值后,则结束日期的最小值应该就是开始日期;同理,当选择结束日期后,开始日期的最大值则应该是结束日期。我们可以利用datepicker中的onSelect属性来设置当选择指定日期后触发的事件,通过该事件来指定对应的datepicker最小日期或最大日期。

Js代码如下

$("#start").datepicker({

    onSelect:function(dateText,inst){

       $("#end").datepicker("option","minDate",dateText);

    }

});

$("#end").datepicker({

    onSelect:function(dateText,inst){

        $("#start").datepicker("option","maxDate",dateText);

    }

});

注:匿名函数中的dateText属性为当前选择日期的字符串

思路二:

第一步  同时获得两个文本框对象,并将其转换为datepicker(利用jQuery的选择器)

HTML代码如下

开始日期:<input type="text" id="start">

结束日期:<input type="text" id="end">

Js代码如下

var dates = $("#start,#end");

dates.datepicker();


第二步  同样在选择日期后,触发onSelect事件,调用函数传递selectedDate参数,

函数体中首先判断触发事件的是开始日期还是结束日期,通过该判断来指定设置minDate或者是maxDate,然后利用not()函数,来反向选择另一个datepicker对象,并设置其对应的属性。

Js代码如下

dates.datepicker({

    onSelect: function(selectedDate){

       var option = this.id == "start" ? "minDate" : "maxDate";

       dates.not(this).datepicker("option", option, selectedDate);

    }

});


这样在设置一方后,另一方就会被限制了。

实现的效果如图:

 

相关文章推荐

jQueryUI中Datepicker(日历)插件的介绍和使用(10级学员 郞志课堂笔记)

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 说明 ...

Wdatepicker日期控件的使用指南

目前的版本是:4.0 正式版 发布于2008-05-30 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名My97Dat...

Wdatepicker日期控件的使用指南

示例2-3-1 起始日期简单应用 示例2-3-2 alwaysUseStartDate属性应用示例2-3-3 使用内置参数示例 2-4-1: 年月日时分秒示例 2-4-2 时分秒示例 2-4-3 年...

jQuery-ui插件datepicker的参数使用详解

jsp需要引入的文件: "> "> "> "> jsp中的HTML: — jsp中的JS: $().ready(func...

jQueryUI中Datepicker(日历)插件的介绍和使用

http://jqueryui.com/datepicker/ jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: ...

BootStrap dateRangePicker时间范围控件

 BootStrap dateRangePicker时间范围控件 1      安装引用 1.1    下载zip Github:https://github.com/da...

bootstrap之双日历时间段选择控件—daterangepicker(汉化版)

双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间,时间段的最大跨度可以在...

jQuery-ui插件datepicker的参数使用详解

概述日期选择插件是一个配置灵活的插件,你可以定义它的展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。同时,你还可以通过键盘控制它:page up/down - 上一月、下一...

DatePickerDialog 时间范围的设置方法(setMaxDate,setMinDate)

部分代码如下: Calendar mCalendar = Calendar.getInstance(); final DatePickerDialog dateDialog = new DateP...

Jquery ui datepicker 设置日期范围,如只能隔3天

jquery ui 日历控件datepicker 设置时间范围,做成只能做3天之内的查询,如果前一个日历控制选择了2013年9月1号,后面的日历控件只能选择2013年9月1号,2013年9月2号,20...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)