您的位置：首页 > Web前端 > JQuery

JqueryUI datepicker(日历)插件的from to的一个小实例

2012-03-27 21:36 621 查看

JqueryUI datepicker(日历)插件的from to的一个小实例

我们通过上一节，我们了解并会写了用jqueryUI datepicker插件选择日期的方法，现在我来简单的介绍一下一个起始日期和结束日期的效果。

也就是说，当我们选择一个起始日期的时候，我们在选择结束日期的时候，我们所选的结束日期时，所选的起始日期以前的日期就不能选择了。可能这样说有一点的绕，那么下面我们来看一下实现的效果吧。如下图所示：

正如我们选择了出生日期为“2012-03-21”，那么，当我们选定结束日期的时候，如图中一样，在“2012-03-21”之前的日期就会变成这样的浅灰色，不能再进行选择了。只能选择“2012-03-21”之后的日期了。

相反的来说，当我们先选择结束日期的时候，那么当我们再选定出生日期的时候，则我们所选定结束日期之后的日期就不能在进行选择了。

说了这么多，我们来具体看一下它的实现流程和代码吧。

一、首先，我们要将所需要的相应的jqueryUI类库文件导入到JSP中。

如下：


<script
type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script
type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script>
<script
src="${pageContext.request.contextPath}/js/jquery.ui.datepicker.js"></script>
<link
rel="stylesheet"
type="text/css"
href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">
二、下面我们要将显示的效果编写出来，如下代码：

<body>

<h1>日历插件</h1>

<div id="datepicker"></div>

<form action="" method="get">

出生日期：<input type="text" id="dp"/>

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

</form>

</body>

三、最后，我们就要编写Javascript代码了，来实现我们所需的效果。

<script type="text/javascript">

$(document).ready(function(){

//开始日期

var dates = $("#dp,#end").datepicker({

//inline:true,

changeMonth:true, //在日期的标题栏中是否出现下拉选择框，选择日期中的月份。true代表有选择框，false代表无选择框

changeYear:false, //在日期的标题栏中是否出现下拉选择框，选择日期中的年份。true代表有选择框，false代表无选择框

showButtonPanel:true,  //在日期面板的下方出现两个按钮，一个是今天，一个是关闭。默认值是false,不显示的

closeText:"关闭",  //必须结合showButtonPanel使用，并且showButtonPanel的值必须是true，否则看不到效果

dateFormat:"yy-mm-dd",  //表示日期显示的格式

defaultDate:-3,  //缺省值在当前日期中加或减几天

showAnim:"toggle",  //日期界面出现的动画效果

showWeek:true,    //显示周  当前中的第几周

firstDay:1,   //默认firstDay 当前的第一天

yearRange:"2011:2012",   //表示下拉框中年份的范围

onSelect:function(selectedDate){

//alert(selectedDate);

//获取当前对象this。id=dp minDate  //开始日期的最小值

//获取 option的值是minDat或者是maxDate  根据dom对象的

var option = this.id == "dp" ? "minDate" : "maxDate",

//获取当前日期的实例对象，每遍历一次就获取一次

instance = $( this ).data( "datepicker" ),

//获取日期   instance.settings 获取日期的值

date = $.datepicker.parseDate(

instance.settings.dateFormat ||

$.datepicker._defaults.dateFormat,

selectedDate, instance.settings );

//设置日期

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

}

});

});

</script>

通过以上的代码就能实现我们所需的效果，代码的一些解析如代码中的注释。如有其它问题，请留言。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航