jquery UI Datepicker时间控件的用法（二）-木庄网络博客

本文摘自PHP中文网，作者PHPzhong，侵删。

这篇文章继续介绍了jquery UI Datepicker时间控件的使用方法，主要关于Datepicker插件的介绍和使用，并分享了第一个日历插件的使用实例，有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

先来看看Datepicker插件的属性表：

第一个日历插件的使用实例

首先导入需要的类库文件：

<</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></</SPAN>script>
<</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></</SPAN>script>
<</SPAN>scripttype="text/javascript"src="${pageContext.request.contextPath }/js/jquery-ui-1.8.18.custom.min.js"></</SPAN>script>
<</SPAN>linkrel="stylesheet"type="text/css"href="${pageContext.request.contextPath }/css/ui-lightness/jquery-ui-1.8.18.custom.css">

首先进行页面代码的编写：

<</SPAN>p class="demo">
<</SPAN>p>Date:<</SPAN>input type="text" id="datepicker"></</SPAN>p>
</</SPAN>p>

然后使用js代码对插件进行调用

效果截图：

下面通过实例对一些常用属性进行验证：

1、altField ：使用备用的输出字段，即将选择的日期以另一种格式，输出到另一个控件中，值为选择符，即要输出的控件

altFormat：altField输出的格式

实例验证：

页面代码：

<</SPAN>p class="demo">
<</SPAN>p>Date: <</SPAN>input type="text" id="datepicker">
<</SPAN>input type="text" id="alternate" size="30"/></</SPAN>p>
</</SPAN>p>

Js代码：

$(function() {
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
});

效果截图：

2、showAnim：设置日期面板显示或隐藏的动画名
js代码的编写：

$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});