jQueryUI实例#8211;日期选择器Datepicker.pdf

j Query UI 实例 – ⽇期选择器 （Datepicker ） j Query UI 实例 - ⽇期选择器 （Datepicker ） 从弹出框或内联⽇历选择⼀个⽇期。 如需了解更多有关 datepicker 部件的细节，请查 API ⽂档 ⽇期选择器部件 （Datepicker Widget ）。 默认功能 ⽇期选择器 （Datepicker ）绑定到⼀个标准的表单 input 字段上。把焦点移到 input 上 （点击或者使⽤ tab 键），在⼀个⼩的覆盖层上打开⼀个交互⽇历。选择⼀个⽇期， 点击页⾯上的任意地⽅ （输⼊框即失去焦点），或者点击 Esc 键来关闭。如果选择了 ⼀个⽇期，则反馈显⽰为 input 的值。 !doctype html html lang=en head meta charset=utf-8 titlejQuery UI ⽇期选择器 （Datepic er） - 默认功能/title lin rel=stylesheet href=//code.jquery .com/ui/1.10.4/themes/ script src=//code.jquery .com/jquery-1.9.1.js/script script src=//code.jquery .com/ui/1.10.4/jquery-ui.js/script lin rel=stylesheet href=/resources/demos script $(function() { $( #datepic er ).datepic er(); }); /script /head body p⽇期：input type=text id=datepic er/p /body /html 查 演⽰ 动画 当打开或关闭 datepicker 时使⽤不同的动画。从下拉框中选择⼀个动画，然后在输⼊ 框中点击来查 它的效果。您可以使⽤三个标准动画中任意⼀个，或者使⽤ UI 特效 中的任意⼀个。 !doctype html html lang=en head meta charset=utf-8 titlejQuery UI ⽇期选择器 （Datepic er） - 动画/title lin rel=stylesheet href=//code.jquery .com/ui/1.10.4/themes script src=//code.jquery .com/jquery-1.9.1.js/script script src=//code.jquery .com/ui/1.10.4/jquery-ui.js/script lin rel=stylesheet href=/resources/dem script $(function() { $( #datepic er ).datepic er(); $( #anim ).change(function() { $( #datepic er ).datepic er( option, showAnim, $ }); }); /script /head body p⽇期：input type=text id=datepic er size=30/p p动画：br select id=anim option value=showShow (默认)/option option value=slideDown滑下/option option value=fadeIn淡⼊/option option value=blindBlind (UI 百叶窗特效)/option option value=bounceBounce (UI 反弹特效)/option option value=clipClip (UI 剪辑特效)/option option value=dropDrop (UI 降落特效)/option option value=foldFold (UI 折叠特效)/option option value=slideSlide (UI 滑动特效)/option option