让我们看看Datepicker插件的属性表：

使用日历插件的第一个实例首先导入所需的类库文件：

/span script type=' text/JavaScript ' src=' http : $ { page context . request . context path }/js/jQuery-1 . 7 . 1 . min . js '/span script/span script type=' text/JavaScript ' src=' http : $ { page context . request . context path }/js/jQuery . UI . datepicker-zh-cn . js '/span script/span script type=' text/JavaScript ' src

/SPan div class=' demo '/SPan pdates :/SPan put type=' text ' id=' date picker '/SPan p//SPan div

然后用js代码调用插件。

效果截图：

以下示例验证了一些常见属性：1。altField:使用替代输出字段，即将选择的日期以另一种格式输出到另一个控件，值为selector，即要输出的控件altFormat:altField输出格式实例验证：page code:

/spanDiv class=' demo '/spanPdates :/spanDiv type=' text ' id=' date picker '/spanDiv type=' text ' id=' alternate ' size=' 30 '/spanP///spanDiv

Js代码：

$(function() {$('#datepicker '))。date picker({ altfield : ' # alternate '，altFormat: 'DD，d MM，YY ' })；});效果截图：

2.showAnim:设置日期面板中显示或隐藏的动画名称js代码：

$(function() {$('#datepicker '))。datepicker()；$('#anim ')。change(function(){ $(' # date picker '))。datepicker('option '，' showAnim '，$(this)。val())；});});3.showButtonPanel:显示按钮面板Js代码：[JavaScript]查看plainpyprint？$('#datepicker ')。date picker({ showbuttonpanel : true })；

如图，面板下方有两个按钮：点击“今天”跳转到今天的日期，点击“关闭”关闭面板。

4.日期格式：指定显示日期的格式Js代码：

$('#datepicker ')。date picker({ dateformat : ' YY/mm/DD ' })；效果截图：

从图中可以看出，文本框中的日期格式已经从“yy-mm-dd”变为“by/mm/dd”。当然还有其他的格式，可以根据自己的喜好来设置。5.changeMonth:使用下拉列表选择月份changeYear:使用下拉列表选择年份在js代码中添加此属性：changeMonth:true或changeYear:true，其中标题栏中的月份或年份将以下拉菜单的形式出现：

6.yearRange:设置下拉列表框中显示的年份范围，可以是相对于今年(-nn: nn)或相对于所选年份(c-nn3360cnn)或绝对年份(nnnn:nnnn)。在js代码中添加属性：

$('#datepicker ')。date picker({ changyear : true，year range : ' 2011:2012 ' })；效果截图：

从图中可以看出，年份的位置是下拉菜单的形式，其中下拉菜单中只会出现2011年和2012年的选项。注意：仅当changeYear为真时，才使用yearRange属性。

7.月数：设置一次显示多少个月。可以是一个包含两个数字的数组，表示显示的行数和列数Js代码：

$('#datepicker ')。date picker({ number of months 3360 3 })；上面指定的月数是3，所以弹出的日历面板会显示当前和未来两个月，如图所示：

8.showOn:设置触发器选择器按钮的事件名称Text:指定触发器按钮上显示的文本。showOn属性应设置为button或bothbuttonImage:指定弹出按钮图像的URL。如果设置，buttonText将变成alt value buttonImageOnly:是否将控件后面的图像作为触发器。如果设置为true，则只有图片会保留为按钮，因此页面更加美观。这里我写了三个文本框来比较上面的属性：1) Js代码：

$(' # datepiker 2 ')。date picker({ show : ' both '，button text : ' calendar button ' })；效果截图：

2)将按钮设置为图片：Js代码：

$('#datepicker ')。date picker({ show : ' button '，buttonimage : ' images/calendar . gif '，buttonimageonly : true })；

通过上面的比较，我们可以了解buttonImageOnly属性的功能。9.minDate:可以选择的最小日期；null表示无限制maxDate:可以选择的最大日期。Null表示无限制。两者都是基于今天的日期。Js代码：

$ (function () {$ ('# datepicker '))。datepicker({//表示以当天为准，mindate 3360-20和maxdate :' 10d '只能在20天之前和10天之后的日期之间选择)；});7号之前不能选择下图(当前日期为27号):

以上是对jquery UI Datepicker时间控件使用方法的深入研究，为以后的研究打下基础。希望大家继续关注jquery UI Datepicker时间控件最后一章的学习。