将被jqueryui(五)日期选择器datepicker

原文地址 jquer yui 五 日期选择器datep icker作者 kerwi n

JQuer y官方的D atepi cker控件可以很方便的使用可以让用户很方便的在输入框上选择时间。

废话少说先上实例

【代码】

<scrip t>

$(funct ion() {

$( "#datep icker ").datep icker ();

});

</scrip t>

<p>Date:<inp ut type="te xt" id="d atep icker "></p>

【效果图】

下面介绍一下具体用法

一、需要加载的js文件

(1)jquer y.js

(2)jquer y.ui.core.js

(3)jquer y.ui.widge t.js

(4)jquer y.ui.datep icker j.s

二、 ht ml代码

需要一个用来加载da tepic ker控件的输入框<input id="date" type="text"/>

三、 js代码

初始化函数 $(.selec ter).datep icker ()

【参数】

因为参数较多把所有参数根据功能分成几组进行阐述

1、动画

2、 图片按钮butto nImag e ""butto nImag eOnly false 是否把按钮安全显示成图片的样子

showO n 'focus'

3、选中之后时间格式

4、面板底部的按钮控制

5、可选中的时间范围

6、面板中上一月下一月按钮控制

7、面板其他显示参数

appendText null 在日期插件的所属域后面添加指定的字符串

8、 同步显示到其他input

【代码示例】

【效果】

四、其他

1、事件

1 creat e加载的时候此事件将被触发fun ction(event ,ui)

2 befor eShow展示之前此事件将被触发funct ion(event ,ui)

3 befo r eShow Day展示日期之前事件将被触发funct ion(date)

4 onCha ngeMo nthYe ar月份或者年份的时候此事件将被触发func tion(year,month,ui)5 onC lo se关闭的时候此事件将被触发funct ion(dateT ext,ui)

6 onSel ect选中的时候此事件将被触发fun ction(dateT ext,ui)

【示例】

$(' .se lec tor').datep icker({creat e:funct ion(event ,ui) {alert ('has creat e! ! '); }

});

2、方法

(1)desto ry销毁.datep icker ("destr oy")

(2)disab le不可用.datep icker ("disab le")

(3)enabl e可用.datep icker ("enabl e")

(4)optio n获取参数.datep icker ("optio n",optio nName )

(5)optio n设置参数.datep icker ("optio n" ,optio nName , [value])

(6)widge t返回这个e lemen t.datep icker ("widge t")

(7)getDa te获取d ate.datep icker ("date" )

(8)setDa te设置d ate.datep icker ("setDa te",date)

【示例】

//设置进度条新值

$("#divPr ogres sbar").datep icker ("setDa te", '+1m+7d');