jQuery UI日期选择器

本文概述

  • 第一种方法
  • jQuery UI datepicker()示例1
  • jQuery UI datepicker()方法示例2
  • jQuery UI datepicker()方法示例3
  • jQuery UI datepicker()方法示例4
  • 第二种方法
  • jQuery UI datepicker()方法示例5
jQuery UI datepicker小部件可帮助用户轻松直观地输入日期。用户可以自定义日期格式和语言, 限制可选日期范围, 轻松添加按钮和其他导航选项。
jQuery UI datepicker()方法创建一个日期选择器, 并通过添加新的CSS类来更改页面上HTML元素的外观。
句法:
你可以两种形式使用datepicker()方法:
$(selector, context).datepicker (options) Method

$(selector, context).datepicker ("action", [params]) Method

第一种方法【jQuery UI日期选择器】datepicker(选项)方法指定应将< input> 元素(或< div> 或< span> , 取决于你选择显示日历的方式)作为日期选择器进行管理。 options参数指定datepicker元素的行为和外观。
句法:
$(selector, context).datepicker(options);

你可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项, 则应使用逗号将它们分开, 如下所示:
$(selector, context).datepicker({option1: value1, option2: value2..... });

以下是可与该方法一起使用的不同选项的列表。
选项 描述
altField 该选项为该字段指定一个jQuery选择器, 该选择器也会随着任何日期选择而更新。 altFormat选项可用于设置该值的格式。这对于将日期值设置为要提交给服务器的隐藏输入元素非常有用, 同时向用户显示更加用户友好的格式。默认情况下, 其值为“”。
altFormat 指定altField选项时使用此选项。它提供了将值写入备用元素的格式。默认情况下, 其值为“”。
appendText 此选项是要放置在< input> 元素之后的字符串值, 用于向用户显示指令。默认情况下, 其值为“”。
autoSize 设置为true时, 此选项将调整< input> 元素的大小, 以适应使用dateformat选项设置的datepicker的日期格式。默认情况下, 其值为false。
beforeShow 此选项是一个回调函数, 它在显示日期选择器之前被调用, 并使用< input> 元素和datepicker实例作为参数传递。此函数可以返回用于修改日期选择器的选项哈希。默认情况下, 其值为“”。
beforeShowDay 此选项是一个回调函数, 它以日期作为参数, 在日期选择器显示之前, 每天在日期选择器中调用该日期, 并将日期作为唯一参数。这可以用来替代day元素的某些默认行为。此函数必须返回一个三元素数组。默认情况下, 其值为null。
buttonImage 通过将showOn选项设置为按钮之一或两者, 此选项指定要在启用的按钮上显示的图像的路径。如果还提供buttonText, 则按钮文本将成为按钮的alt属性。默认情况下, 其值为“”。
buttonImageOnly
如果将此选项设置为true, 则指定由buttonImage指定的图像将独立显示(不在按钮上)。 showOn选项仍必须设置为按钮之一或两者都显示。默认情况下, 其值为false。
buttonText 此选项通过将showOn选项设置为按钮之一或两者都指定启用按钮的标题。默认情况下, 其值为“ … ”。
calculateWeek 此选项是一个自定义函数, 用于计算并返回作为lone参数传递的日期的星期数。默认实现是$ .datepicker.iso8601week()实用程序功能提供的实现。
changeMonth 如果将此选项设置为true, 则显示月份下拉列表, 允许用户直接更改月份, 而无需使用箭头按钮来逐步浏览月份。默认情况下, 其值为false。
changeYear 如果将此选项设置为true, 则显示年份下拉列表, 允许用户直接更改年份, 而无需使用箭头按钮来逐步浏览。选项yearRange可用于控制哪些年份可供选择。默认情况下, 其值为false。
closeText 此选项指定文本以替换关闭按钮的默认标题“完成”。通过showbuttonpanel选项显示按钮面板时使用。默认情况下, 其值为“完成”。
constrainInput 如果将此选项设置为true(默认设置), 则输入< input> 元素的文本将被限制为当前dateformat选项允许的字符。默认情况下, 其值为true。
currentText 此选项指定文本替换当前按钮的今天的默认标题。如果通过showButtonPanel选项显示按钮面板, 则使用此选项。默认情况下, 其值为今天。
dateFormat 此选项指定要使用的日期格式。默认情况下, 其值为mm / dd / yy。
dayNames 此选项是7个元素的数组, 提供全天名称, 第0个元素表示星期日。它可以用于本地化控件。默认情况下, 其值为[“ Sunday”, “ Monday”, “ Tuesday”, “ Wednesday”, “ Thursday”, “ Friday”, “ Saturday”]。
dayNamesMin 此选项是一个7元素的数组, 提供最少的日期名称, 第0个元素表示星期日, 用作列标题。它可以用于本地化控件。默认情况下, 其值为[“ Su”, “ Mo”, “ Tu”, “ We”, “ Th”, “ Fr”, “ Sa”]。
dayNamesShort 此选项指定一个7元素的数组, 该数组提供短日期名称, 第0个元素表示星期日。它可以用于本地化控件。默认情况下, 其值为[“ Sun”, “ Mon”, “ Tue”, “ Wed”, “ Thu”, “ Fri”, “ Sat”]。
defaultDate 如果< input> 元素没有值, 则此选项设置控件的初始日期, 并覆盖今天的默认值。这可以是日期实例, 从今天起的天数, 或者是指定绝对或相对日期的字符串。默认情况下, 其值为null。
duration 此选项指定使日期选择器出现的动画速度。它可以是慢速, 正常或快速之一, 也可以是动画跨度的毫秒数。默认情况下, 其值为正常。
firstday 此选项指定将哪一天视为一周的第一天, 并将显示在最左侧的列中。默认情况下, 其值为0。
gotocurrent 将此选项设置为true时, 当前日期链接将设置为所选日期, 并覆盖今天的默认设置。默认情况下, 其值为false。
hideIfNoPrevNext 如果设置为true, 则该选项将隐藏下一个和上一个链接(而不是仅禁用它们), 这取决于mindate和maxdate选项的设置。默认情况下, 其值为false。
isRTL 如果此选项设置为true, 则将本地化指定为从右到左的语言。默认情况下, 其值为false。
maxDate 此选项设置控件的最大可选择日期。这可以是日期实例, 从今天起的天数, 或者是指定绝对或相对日期的字符串。默认情况下, 其值为null。
minDate 此选项设置控件的最小可选日期。这可以是日期实例, 从今天起的天数, 或者是指定绝对或相对日期的字符串。默认情况下, 其值为null。
monthnames 此选项是一个12元素的数组, 提供完整的月份名称, 其中第0个元素表示一月。它可以用于本地化控件。默认情况下, 其值为[“一月”, “二月”, “三月”, “四月”, “五月”, “六月”, “七月”, “八月”, “九月”, “十月”, “十一月”, “十二月”]。
monthNamesShort 此选项指定一个12元素的数组, 该数组提供短月份名称, 其中第0个元素表示一月。它可以用于本地化控件。默认情况下, 其值为[“ Jan”, “ Feb”, “ Mar”, “ Apr”, “ May”, “ Jun”, “ Jul”, “ Aug”, “ Sep”, “ Oct”, “ Nov”, “ Dec”]。
navigationAsDateFormat 如果此选项设置为true, 则在显示之前, 将通过$ .datepicker.formatdate()函数传递nexttext, prevtext和currenttext的导航链接。这允许为那些被相关值替换的选项提供日期格式。默认情况下, 其值为false。
nexttext 此选项指定用于替换下个月导航链接的下一个默认标题的文本。 themeRoller将该文本替换为图标。默认情况下, 它的值是next。
numberOfMonths
此选项指定在日期选择器中显示的月数。默认情况下, 其值为1。
onChangeMonthYear 此选项是一个回调, 当日期选择器移动到新的月份或年份, 并以所选的年, 月(从1开始)和datepicker实例作为参数传递, 并且函数上下文设置为输入字段元素时, 将调用此回调。 。默认情况下, 其值为null。
onClose 此选项是在关闭日期选择器时调用的回调, 将选定的日期作为文本(如果没有选择, 则为空字符串)以及datepicker实例传递, 并将函数上下文设置为输入字段元素。默认情况下, 其值为null。
onSelect 此选项是在选择日期时调用的回调, 将所选日期作为文本(如果没有选择, 则为空字符串)和datepicker实例传递所选日期, 并将函数上下文设置为输入字段元素。默认情况下, 其值为null。
prevText 此选项指定用于替换上个月导航链接的默认prev标题的文本。 (请注意, themeroller用一个图标替换了此文本)。默认情况下, 其值为PrevdefaultDatedayNamesMin。
selectOtherMonths 如果将此选项设置为true, 则可以选择显示的月份之前或之后的日期。除非showOtherMonths选项为true, 否则不会显示这些日期。默认情况下, 其值为false。
shortYearCutoff 如果此选项为数字, 则指定0到99年之间的值, 在此之前任何2位数字的年值将被视为属于上个世纪。如果此选项是字符串, 则该值将进行数字转换并添加到当前年份。默认值为+10, 表示距当前年份的10年。
showAnim 此选项指定设置用于显示和隐藏日期选择器的动画的名称。如果指定, 则必须是show(默认), fadein, slidedown或jquery ui的show / hide动画之一。默认情况下, 其值为show。
showButtonPanel 如果将此选项设置为true, 则显示在日期选择器底部的按钮面板, 其中包含当前和关闭按钮。这些按钮的标题可以通过currentText和closeText选项提供。默认情况下, 其值为false。
showCurrentAtPos 此选项从左上角开始指定从0开始的索引, 该位置应将包含当前日期的月份放置在多月显示中。默认情况下, 其值为0。
showMonthAfterYear 此选项指定如果设置为true, 则在日期选择器的标题中将月份和年份的位置颠倒。默认情况下, 其值为false。
showOn 此选项指定何时应显示日期选择器。可能的值是焦点, 按钮或两者。默认情况下, 其值为焦点。
showOptions 当为showAnim选项指定jQuery UI动画时, 此选项提供要传递给动画的哈希。默认情况下, 其值为{}。
showOtherMonths 如果将此选项设置为true, 则显示当月第一天和最后一天之前或之后的日期。除非selectOtherMonths选项也设置为true, 否则这些日期是不可选择的。默认情况下, 其值为false。
showWeek 如果将此选项设置为true, 则在月??份显示左侧的列中显示星期数。可以使用calculateWeek选项来更改确定此值的方式。默认情况下, 其值为false。
stepMonths 此选项指定单击月份导航控件之一时要移动的月份。默认情况下, 其值为1。
weekHeader 当showWeek为true时, 此选项指定要显示的星期数列的文本, 覆盖wk的默认值。默认情况下, 其值为wk。
yearRange 此选项以以下形式指定在下拉列表中显示年份的限制:to changeYear为true时。值可以是绝对值或相对值(例如:2005:+2, 表示从现在到2005年的2年)。前缀c可用于使相对值偏离所选年份而不是当前年份(例如c-2:c + 3)。默认情况下, 其值为c-10:c + 10。
yearSuffix 此选项在datepicker标头中的年份之后显示其他文本。默认情况下, 其值为“”。
jQuery UI datepicker()示例1让我们以一个简单的示例来演示datepicker功能, 该功能不向datpicker()方法传递任何参数。
< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Datepicker functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/00035925R-0.jpg"> < /script> < script src="http://img.readke.com/220430/0003593156-1.jpg"> < /script> < !-- Javascript --> < script> $(function() { $( "#datepicker-1" ).datepicker(); }); < /script> < /head> < body> < !-- HTML --> < p> Enter Date: < input type="text" id="datepicker-1"> < /p> < /body> < /html>

立即测试
jQuery UI datepicker()方法示例2内联日期选择器:
让我们以一个简单的示例来演示内联日期选择器。
< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Datepicker functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/00035925R-0.jpg"> < /script> < script src="http://img.readke.com/220430/0003593156-1.jpg"> < /script> < !-- Javascript --> < script> $(function() { $( "#datepicker-2" ).datepicker(); }); < /script> < /head> < body> < !-- HTML --> Enter Date: < div id="datepicker-2"> < /div> < /body> < /html>

立即测试
jQuery UI datepicker()方法示例3使用appendText, dateFormat, altField和altFormat:
让我们以一个示例来演示jQueryUI datepicker()方法中选项, appendText, dateFormat, altField和altFormat的用法。
< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Datepicker functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/00035925R-0.jpg"> < /script> < script src="http://img.readke.com/220430/0003593156-1.jpg"> < /script> < !-- Javascript --> < script> $(function() { $( "#datepicker-3" ).datepicker({ appendText:"(yy-mm-dd)", dateFormat:"yy-mm-dd", altField: "#datepicker-4", altFormat: "DD, d MM, yy" }); }); < /script> < /head> < body> < !-- HTML --> < p> Enter Date: < input type="text" id="datepicker-3"> < /p> < p> Alternate Date: < input type="text" id="datepicker-4"> < /p> < /body> < /html>

立即测试
jQuery UI datepicker()方法示例4使用showWeek, yearSuffix和showAnim:
让我们以一个示例来演示jQueryUI的datepicker函数中showWeek, yearSuffix和showAnim的用法。
< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Datepicker functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/00035925R-0.jpg"> < /script> < script src="http://img.readke.com/220430/0003593156-1.jpg"> < /script> < !-- Javascript --> < script> $(function() { $( "#datepicker-11" ).datepicker({ showWeek:true, yearSuffix:"-CE", showAnim: "explode" }); }); < /script> < /head> < body> < !-- HTML --> < p> Enter Date: < input type="text" id="datepicker-11"> < /p> < /body> < /html>

立即测试
第二种方法datepicker(操作, 参数)方法用于对日历执行操作, 例如选择新日期。该动作在第一个参数中指定为字符串, 并且可以根据该动作使用一个或多个参数。
句法:
$(selector, context).datepicker ("action", [params]);

以下是此方法使用的操作的列表。
行动 描述
destroy() 此操作将完全删除日期选择器功能。这将使元素返回其初始状态。此方法不接受任何参数。
dialog( Date [, onSelect ] [, settings ] [, Pos ] ) 此操作在jQuery ui对话框中显示日期选择器。
getDate() 此操作将返回与所选日期相对应的日期。此方法不接受任何参数。
hide() 此操作将关闭以前打开的日期选择器。此方法不接受任何参数。
isDisabled() 此操作检查日期选择器功能是否已禁用。此方法不接受任何参数。
option(optionName) 此操作将检索当前与指定的optionName关联的值。
option() 该操作获取一个对象, 该对象包含表示当前datepicker选项哈希的键/值对。此方法不接受任何参数。
option(optionName, Value)
此操作设置与指定的optionName关联的datepicker选项的值。
option(Options) 此操作为日期选择器设置一个或多个选项。
refresh() 在进行了一些外部修改之后, 此操作将重画日期选择器。此方法不接受任何参数。
setdate(date) 此操作将指定的日期设置为日期选择器的当前日期。
show() 此操作将打开日期选择器。如果将日期选择器附加到输入, 则对于显示日期选择器, 输入必须是可见的。此方法不接受任何参数。
widget() 该操作返回一个包含日期选择器的jQuery对象。
jQuery UI datepicker()方法示例5让我们以一个示例来演示上表中操作的用法。在此示例中, 我们使用setDate()操作。
< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Datepicker functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/00035925R-0.jpg"> < /script> < script src="http://img.readke.com/220430/0003593156-1.jpg"> < /script> < !-- Javascript --> < script> $(function() { $( "#datepicker-12" ).datepicker(); $( "#datepicker-12" ).datepicker("setDate", "10w+1"); }); < /script> < /head> < body> < !-- HTML --> < p> Enter Date: < input type="text" id="datepicker-12"> < /p> < /body> < /html>

立即测试

    推荐阅读