这篇文章主要介绍了JQuery日期选择器用法详解的相关资料，需要的朋友可以参考下
jQuery UI很强大，其中的日期选择插件日期选择器是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
官方地址：http://docs.jquery.com/UI/Datepicker，官方示例：http://jquery ui . com/demos/date picker/.
一个不错的地址，用来DIY jQuery用户界面界面效果的站点http://jqueryui.com/themeroller/
DatePicker基本使用方法：
！文档类型超文本标记语言
超文本标记语言
头
链接href=' http://Ajax。谷歌API。com/Ajax/libs/jquery ui/1.8/themes/base/jquery-ui。CSS ' rel='样式表' type=' text/CSS '/
脚本src=' http://Ajax。谷歌API。com/Ajax/libs/jquery/1.4/jquery。量滴js '/脚本
脚本src=' http://Ajax。谷歌API。com/Ajax/libs/jquery ui/1.8/jquery-ui。量滴js '/脚本
脚本
$(文档)。ready(function() {
$('#datepicker ').日期选取器()；
});
/脚本
/头
body style=' font-size:62.5%；'
div type=' text ' id='日期选取器'/div
/body
/html
向上/向下翻页-上一月、下一月
计算机的ctrl按键向上/向下翻页-上一年、下一年
计算机的ctrl按键主页-当前月或最后一次打开的日期
计算机的ctrl按键左/右-上一天、下一天
计算机的ctrl按键向上/向下-上一周、下一周
输入-确定选择日期
计算机的ctrl按键结束-关闭并清除已选择的日期
逃跑-关闭并取消选择
$.datepicker.setDefaults(设置)-全局设置日期选择插件的参数。
$.datepicker.formatDate(格式，日期，设置)-格式化显示的日期字符串
$ .日期选择器。iso 8601周(日期)给出一个日期，确实他是一年中的第几周
$.datepicker.parseDate(格式，值，设置)-按照指定格式获取日期字符串
d -每月的第几天（没有前导零)
dd -每月的第几天（两位数字)
哦-一年中的第几天（没有前导零)
表示"卵"一年中的第几天（三位数字)
登陆日简称
日长名称
间位月份（没有前导零)
嗯-月份（两位数字)
间位月份名称缩写
嗯-月份名称长
你-年份（两位数字)
yy -年份（四位数字)
@ - Unix时间戳（从01/01/1970 开始)
'.'-文本
'' - 单引号
（其它) - 文本
原子-'年-月-日'(与RFC 3339/ISO 8601相同)
饼干-'年月日'
ISO_8601 -'年月日'
RFC_822 - 'D，D，M y '
RFC_850 -'年月日'
RFC_1036 - 'D，D，M y
RFC_1123 -'年月日'
RFC_2822 -'年月日'
RSS - 'D，D，M y '
时间戳-"@"
W3C——”年-月-日"
奥尔特菲尔德：字符串：""
将选择的日期同步到另一个域中，配合替代格式可以显示不同格式的日期字符串。
初始：$('.选择器)。日期选取器({ alt字段：' #实际日期' })；
获取：var altField=$(' .选择器)。datepicker('option '，' alt field ')；
设置：$('.选择器)。datepicker('option '，' altField '，' # actual date ')；
替代格式：字符串：""
当设置了奥尔特菲尔德的情况下，显示在另一个域中的日期格式。
初始：$('.选择器)。日期选取器({ alt格式：' YY-月-日' })；
获取：var altFormat=$(' .选择器)。datepicker('option '，' alt format ')；
设置：$('.选择器)。datepicker('option '，' altFormat '，' YY-mm-DD ')；
附录文本：字符串：""
在日期插件的所属域后面添加指定的字符串。
初始：$('.选择器)。日期选取器({ appendText:'(yyyy-mm-DD)' })；
获取：var appendText=$(' .选择器)。datepicker('option '，' appendText ')；
设置：$('.选择器)。datepicker('option '，' appendText '，'(yyyy-mm-DD)')；
按钮图像：字符串：""
设置弹出按钮的图片，如果非空，则按钮的文本将成为中高音属性，不直接显示。
初始：$('.选择器)。日期选取器({按钮图像：'/图像/日期选取器。gif ' })；
获取：var buttonImage=$(' .选择器)。datepicker('option '，'按钮图像')；
设置：$('.选择器)。日期选择器(' option '，' buttonImage '，'/images/日期选择器。gif’)；
buttonImageOnly : Boolean : false
设定为真实的以将图像放置在字段之后用作触发器，而图像不会出现在按钮上。
初始：$('.选择器)。日期选取器({ buttonImageOnly:true })；
获取：var buttonImageOnly=$(' .选择器)。datepicker('option '，'仅按钮图像')；
设置：$('.选择器)。datepicker('option '，' buttonImageOnly '，true)；
buttonText : String:" . "
设置触发按钮的文本内容。
初始：$('.选择器)。日期选取器({ button text:' Choose ' })；
获取：var buttonText=$(' .选择器)。datepicker('option '，'按钮文本')；
设置：$('.选择器)。datepicker('option '，' buttonText '，' Choose ')；
变更月份：布尔值：错误
设置允许通过下拉框列表选取月份。
初始：$('.选择器)。日期选择器({ change month:true })；
获取：var changeMonth=$(' .选择器)。datepicker('option '，' change month ')；
设置：$('.选择器)。datepicker('option '，' changeMonth '，true)；
变更年份：布尔值：错误
设置允许通过下拉框列表选取年份。
初始：$('.选择器)。日期选取器({更改年份：true })；
获取：var changeYear=$(' .选择器)。datepicker('option '，'更改年份')；
设置：$('.选择器)。datepicker('option '，' changeYear '，true)；
关闭文本类型：字符串默认值：“完成”
设置关闭按钮的文本内容，此按钮需要通过显示按钮面板参数的设置才显示。
初始：$('.选择器)。日期选取器({ close text:' X ' })；
获取：var closeText=$(' .选择器)。datepicker('option '，' closeText ')；
设置：$('.选择器)。datepicker('option '，' closeText '，' X ')；
约束输入：布尔值：正确
如果设置为没错，则约束当前输入的日期格式。
初始：$('.选择器)。日期选择器({ constraint input:false })；
获取：var constrainInput=$(' .选择器)。datepicker('option '，' constraint input ')；
设置：$('.选择器)。datepicker('option '，' constrainInput '，false)；
当前文本：字符串："今天"
设置当天按钮的文本内容，此按钮需要通过显示按钮面板参数的设置才显示。
初始：$('.选择器)。日期选择器({ current text:' Now ' })；
获取：var currentText=$(' .选择器)。datepicker('option '，' current text ')；
设置：$('.选择器)。datepicker('option '，' currentText '，' Now ')；
日期格式：字符串："年/月/日"
设置日期字符串的显示格式。
初始：$('.选择器)。日期选取器({日期格式：' YY-年月日' })；
获取：var dateFormat=$(' .选择器)。datepicker('option '，'日期格式')；
设置：$('.选择器)。datepicker('option '，' dateFormat '，' YY-mm-DD ')；
日名：数组：['星期日','星期一','星期二','星期三','星期四','星期五','星期六]
设置一星期中每天的名称，从星期天开始。此内容用于日期格式时显示，以及日历中当鼠标移至行头时显示。
初始：$('.选择器)。日期选取器({日期名称：[' Dimanche '，' Lundi '，' Mardi '，' Mercredi '，' Jeudi '，' Vendredi '，' Samedi ']})；
获取：var dayNames=$(' .选择器)。datepicker('option '，'日名')；
设置：$('.选择器)。datepicker('option '，' dayNames '，['Dimanche '，' Lundi '，' Mardi '，' Mercredi '，' Jeudi '，' Vendredi '，' Samedi '])；
dayNamesMin : Array : ['Su '，' Mo '，' Tu '，' We '，' Th '，' Fr '，' Sa']
设置一星期中每天的缩语，从星期天开始，此内容用于日期格式时显示，以前日历中的行头显示。
初始：$('.选择器)。datepicker({ dayNamesMin: ['Di '，' Lu '，' Ma '，' Me '，' Je '，' Ve '，' Sa ']})；
获取：var dayNamesMin=$(' .选择器)。datepicker('option '，' day name smin ')；
设置：$('.选择器)。datepicker('option '，' dayNamesMin '，['Di '，' Lu '，' Ma '，' Me '，' Je '，' Ve '，' Sa '])；
dayNamesShort : Array : ['Sun '，' Mon '，' Tue '，' Wed '，' Thu '，' Fri '，' Sat']
设置一星期中每天的缩语，从星期天开始，此内容用于日期格式时显示，以前日历中的行头显示。
初始：$('.选择器)。日期选取器({ dayNamesShort:[' Dim '，' Lun '，' Mar '，' Mer '，' Jeu '，' Ven '，' Sam ']})；
获取：var dayNamesShort=$(' .选择器)。datepicker('option '，' day name short ')；
设置：$('.选择器)。datepicker('option '，' dayNamesShort '，['Dim '，' Lun '，' Mar '，' Mer '，' Jeu '，' Ven '，' Sam '])；
默认日期：日期，数字，字符串：空
设置默认加载完后第一次显示时选中的日期。可以是日期对象，或者是数字（从今天算起，例如7),或者有效的字符串(' y '代表年，' m '代表月，' w '代表周，' d '代表日，例如：' 1m 7d ')。
初始：$('.选择器)。日期选取器({默认日期：7 })；
获取：var defaultDate=$(' .选择器)。datepicker('option '，'默认日期')；
设置：$('.选择器)。datepicker('option '，' defaultDate '，7)；
持续时间：字符串，数字："正常"
设置日期控件展开动画的显示时间，可选是慢速','正常','快速',''代表立刻，数字代表毫秒数。
初始：$('.选择器)。日期选择器({ duration:' slow ' })；
获取：var duration=$(' .选择器)。datepicker('option '，' duration ')；
设置：$('.选择器)。日期选择器('选项','持续时间','慢速');
第一天：数字：0
设置一周中的第一天。星期天为0,星期一为1,以此类推。
初始：$('.选择器)。日期选取器({第一天：1 })；
获取：var firstDay=$(' .选择器)。datepicker('option '，'第一天')；
设置：$('.选择器)。datepicker('option '，' firstDay '，1)；
gotoCurrent:布尔值：错误
如果设置为没错，则点击当天按钮时，将移至当前已选中的日期，而不是今天。
初始：$('.选择器)。日期选取器({ goto current:true })；
获取：var gotoCurrent=$(' .选择器)。datepicker('option '，' goto current ')；
设置：$('.选择器)。datepicker('option '，' gotoCurrent '，true)；
hideIfNoPrevNext : Boolean : false
设置当没有上一个/下一个可选择的情况下，隐藏掉相应的按钮。(默认为不可用)
初始：$('.选择器)。日期选取器({ hideIfNoPrevNext:true })；
获取：var hideIfNoPrevNext=$(' .选择器)。datepicker('option '，' hideIfNoPrevNext ')；
设置：$('.选择器)。datepicker('option '，' hideIfNoPrevNext '，true)；
isRTL : Boolean : false
如果设置为没错，则所有文字是从右自左。
初始：$('.选择器)。日期选取器({ is RTL:true })；
获取：var isRTL=$(' .选择器)。datepicker('option '，' isRTL ')；
设置：$('.选择器)。datepicker('option '，' isRTL '，true)；
最大日期：日期，数字，字符串：空
设置一个最大的可选日期。可以是日期对象，或者是数字（从今天算起，例如7),或者有效的字符串(' y '代表年，' m '代表月，' w '代表周，' d '代表日，例如：' 1m 7d ')。
初始：$('.选择器)。日期选取器({ maxDate:' 1m 1w ' })；
获取：var maxDate=$(' .选择器)。datepicker('option '，' maxDate ')；
设置：$('.选择器)。datepicker('option '，' maxDate '，' 1m 1w ')；
$('.选择器)。datepicker('option '，' maxDate '，' 12/25/2012 ')；
minDate:日期，数字，字符串：空
设置一个最小的可选日期。可以是日期对象，或者是数字（从今天算起，例如7),或者有效的字符串(' y '代表年，' m '代表月，' w '代表周，' d '代表日，例如：' 1m 7d ')。
初始：$('.选择器)。日期选择器({ minDate:new Date(2007，1 - 1，1)})；
获取：var minDate=$(' .选择器)。datepicker('option '，' minDate ')；
设置：$('.选择器)。datepicker('option '，' minDate '，new Date(2007，1 - 1，1))；
$('.选择器)。datepicker('option '，' minDate '，' 12/25/2012 ')；
monthNames:数组：['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月]
设置所有月份的名称。
初始：$('.选择器)。日期选取器({ monthNames:[' January '，' Februar '，' Marts '，' April '，' Maj '，'由尼，'朱莉'，'八月'，'九月'，'啤酒节'，'十一月','十二月']});
获取：var monthNames=$(' .选择器)。datepicker('option '，'月份名称')；
设置：$('.选择器)。datepicker('option '，' monthNames '，['Januar '，' Februar '，' Marts '，' April '，' Maj '，'由尼，'朱莉'，'奥古斯特'，'九月，'啤酒节'，'十一月','十二月');
monthnameshort:Array:[' Jan '，' Feb '，' Mar '，' Apr '，' May '，' Jun '，' Jul '，' Aug '，' Sep '，' Oct '，' Nov '，' Dec']
设置所有月份的缩写。
初始：$('.选择器)。日期选取器({ monthnameshort:[' Jan '，' Feb '，' Mar '，' Apr '，' Maj '，' Jun '，' Jul '，' Aug '，' Sep '，' Okt '，' Nov '，' Dec '])；
获取：var monthNamesShort=$(' .选择器)。datepicker('option '，' monthnameshort ')；
设置：$('.选择器)。datepicker('option '，' monthNamesShort '，['Jan '，' Feb '，' Mar '，' Apr '，' Maj '，' Jun '，' Jul '，' Aug '，' Sep '，' Okt '，' Nov '，' Dec ')；
navigationdate format:Boolean:false
如果设置为没错，则格式化日期函数将应用到前一文本，后一文本和当前文本的值中显示，例如显示为月份名称。
初始：$('.选择器)。日期选取器({ navigationsdateformat:true })；
获取：var navigationAsDateFormat=$(' .选择器)。datepicker('option '，' navigationsdateformat ')；
设置：$('.选择器)。datepicker('option '，' navigationAsDateFormat '，true)；
nextText : String:"下一个"
设置"下个月"链接的显示文字。
初始：$('.选择器)。日期选取器({ next text:' la ter ' })；
获取：var nextText=$(' .选择器)。datepicker('option '，' next text ')；
设置：$('.选择器)。datepicker('option '，' nextText '，' la ter ')；
月数：数字，数组：1
设置一次要显示多少个月份。如果为整数则是显示月份的数量，如果是数组，则是显示的行与列的数量。
初始：$('.选择器)。datepicker({ numberOfMonths: [2，3]})；
获取：var numberOfMonths=$(' .选择器)。datepicker('option '，'月数')；
设置：$('.选择器)。datepicker('option '，' numberOfMonths '，[2，3])；
前一篇文章：字符串："上一个"
设置"上个月"链接的显示文字。
初始：$('.选择器)。日期选取器({ prev text:' early ' })；
获取：var prevText=$(' .选择器)。datepicker('option '，' prev text ')；
设置：$('.选择器)。datepicker('option '，' prevText '，' Earlier ')；
短期截止日期：字符串，数字："10"
设置截止年份的值。如果是(0-99)的数字则以当前年份开始算起，如果为字符串，则相应的转为数字后再与当前年份相加。当超过截止年份时，则被认为是上个世纪。
初始：$('.选择器)。日期选取器({ short year cut off:50 })；
获取：var shortYearCutoff=$(' .选择器)。datepicker('option '，'短年截止')；
设置：$('.选择器)。datepicker('option '，' shortYearCutoff '，50)；
showAnim : String : 'show '
设置显示、隐藏日期插件的动画的名称。
初始：$('.选择器)。日期选取器({ showAnim:' fold ' })；
获取：var showAnim=$(' .选择器)。datepicker('option '，' showAnim ')；
设置：$('.选择器)。datepicker('option '，' showAnim '，' fold ')；
showButtonPanel : Boolean : false
设置是否在面板上显示相关的按钮。
初始：$('.选择器)。日期选取器({ showButtonPanel:true })；
获取：var showButtonPanel=$(' .选择器)。datepicker('option '，' showButtonPanel ')；
设置：$('.选择器)。datepicker('option '，' showButtonPanel '，true)；
showCurrentAtPos:编号：0
设置当多月份显示的情况下，当前月份显示的位置。自顶部/左边开始第x位。
初始：$('.选择器)。日期选取器({ showcurrentapos:3 })；
获取：var showCurrentAtPos=$(' .选择器)。datepicker('option '，' showcurrentapos ')；
设置：$('.选择器)。datepicker('option '，' showCurrentAtPos '，3)；
showMonthAfterYear:布尔值：错误
是否在面板的头部年份后面显示月份。
初始：$('.选择器)。日期选取器({ showMonthAfterYear:true })；
获取：var showMonthAfterYear=$(' .选择器)。datepicker('option '，' showMonthAfterYear ')；
设置：$('.选择器)。datepicker('option '，' showMonthAfterYear '，true)；
showOn:字符串："聚焦"
设置什么事件触发显示日期插件的面板，可选值：焦点、按钮、两者
初始：$('.选择器)。日期选取器({ showOn:' both ' })；
获取：var showOn=$(' .选择器)。datepicker('option '，' showOn ')；
设置：$('.选择器)。datepicker('option '，' showOn '，' both ')；
显示选项：选项：{}
如果使用showAnim来显示动画效果的话，可以通过此参数来增加一些附加的参数设置。
初始：$('。选择器)。date picker({ show options:{ direction:' up ' })；
Get: var show options=$('。选择器)。date picker(“option”、“show options”)；
设置：$('。选择器)。datepicker ('option '，' show options '，{ direction:' up ')；
showOtherMonths:布尔值：false
是否在当前面板中显示前两个月和后两个月的一些日期数字(可选)。
初始：$('。选择器)。date picker({ showothermonths:true })；
Get: var showothermonths=$('。选择器)。datepicker ('option '，' showothermonths ')；
设置：$('。选择器)。datepicker ('option '，' showothermonths '，true)；
stepMonths:数字：1
当点击“上一月/下一月”时，一次浏览几个月。
初始：$('。选择器)。date picker({ step months:3 })；
Get: var stepmonths=$('。选择器)。datepicker ('option '，' step months ')；
设置：$('。选择器)。datepicker ('option '，' stepmonths '，3)；
yearRange:字符串：“-10: 10”
控制年下拉列表中显示的年数可以是相对于当年的(-nn: nn)，也可以是绝对值(-nnnn: nnnn)。
初始：$('。选择器)。date picker({ year range:' 2000:2010 ' })；
Get: var年范围=$('。选择器)。datepicker ('option '，'年份范围')；
设置：$('。选择器)。datepicker ('option '，'年份范围'，' 2000:2010 ')；
beforeShow:函数(输入)
在日期控件显示面板之前触发此事件，并返回当前触发该事件的控件的实例对象。
初始：$('。选择器)。date picker({ before show:function(input){.}});
beforeShowDay:函数(日期)
在日期控件显示面板之前，当绑定每个面板上的日期时会触发此事件，参数是触发事件的日期。调用函数后，必须返回一个数组：[0]此日期是否可选(true/false)，[1]此日期的CSS样式名称('表示默认)，[2]鼠标移过时出现提示。
初始：$('。选择器)。date picker({ before show day:function(date){.}});
onChangeMonthYear:函数(年、月、月)
当年份或月份发生变化时，会触发此事件。这些参数是更改的年、月和当前日期插件实例。
初始：$('。选择器)。date picker({ onchangemontyear:function(year，month，inst) {.}});
onClose : function(dateText，inst)
当日期面板关闭时，将触发此事件(无论是否有选定的日期)。参数是选定的日期和当前日期插件实例。
初始：$('。选择器)。date picker({ on close:function(date text，inst) {.}});
onSelect:函数(日期文本，实例)
当在日期面板中选择日期时，将触发此事件。参数是选定的日期和当前日期插件实例。
$('.选择器)。date picker({ on select:function(date text，inst) {.} });
以上内容介绍了JQuery datepicker的用法。我希望你喜欢它。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。