jqueryui时间插件

jQuery provides a variety of Calendar Plugins that would allow you to integrate calendar features to your websites. These plugins are very easy to use and we can easily include these plugins in our web applications. In this post, we are going to discuss about one of the jQuery calendar plugins, jQuery UI Datepicker.

jQuery提供了各种日历插件 ，可让您将日历功能集成到您的网站。 这些插件非常易于使用，我们可以轻松地将这些插件包含在我们的Web应用程序中。 在本文中，我们将讨论jQuery日历插件之一jQuery UI Datepicker 。

jQueryUI日期选择器 (jQueryUI Datepicker)

The jQueryUI Datepicker plugin allow us to select a date from a popup or an in-line calendar. This plugin provide several options to customize the date format, localize calendar, restrict date range, and select a date range and many more. I would like to get down to the details.

jQueryUI Datepicker插件允许我们从弹出窗口或嵌入式日历中选择日期。 该插件提供了多个选项来自定义日期格式，本地化日历，限制日期范围以及选择日期范围等等。 我想详细介绍一下。

内容 (Contents)

  • jQueryUI Datepicker OptionsjQueryUI Datepicker选项
  • jQueryUI Datepicker MethodsjQueryUI Datepicker方法
  • jQueryUI Datepicker in Action运行中的jQueryUI Datepicker

jQueryUI Datepicker选项 (jQueryUI Datepicker Options)

In this section, we will discuss about different options available to customize the jQueryUI Datepicker plugin. We have used many of these options in the jQueryUI Datepicker in Action section.

在本节中，我们将讨论可用于自定义jQueryUI Datepicker插件的不同选项。 我们在jQueryUI Datepicker in Action部分中使用了许多这些选项。

Options Syntax Description
altField $( “.selector” ).datepicker({ altField: “#actualDate” }); Alternate input field, updated with the selected date from the datepicker.
altFormat $( “.selector” ).datepicker({ altFormat: “yy-mm-dd” }); Date format of the altField option.
appendText $( “.selector” ).datepicker({ appendText: “(yyyy-mm-dd)” }); Text that is displayed next to the the input field.
autoSize $( “.selector” ).datepicker({ autoSize: true }); Automatically resize input field if it is set to true.
beforeShow This option is a callback function that is invoked just before displaying  datepicker.
buttonImage $( “.selector” ).datepicker({ buttonImage: “/images/datepicker.gif” }); Display the datepicker with URL of an image \ when the showOn option is set to “button” or “both”.
buttonImageOnlyType $( “.selector” ).datepicker({ buttonImageOnly: true }); Indicate whether the button image should be rendered inside button.
buttonTextType $( “.selector” ).datepicker({ buttonText: “Choose” }); Display text on the trigger button.
calculateWeek $( “.selector” ).datepicker({ calculateWeek: myWeekCalc }); Calculate the week of the year for the selected date.
changeMonth $( “.selector” ).datepicker({ changeMonth: true }); Month will be rendered as a drop down if it is set to true.
changeYear $( “.selector” ).datepicker({ changeYear: true }); Year will be rendered as a drop down if it is set to true.
closeText $( “.selector” ).datepicker({ closeText: “Close” }); Display text on the close button.showButtonPanel option is used to display this button
constrainInput $( “.selector” ).datepicker({ constrainInput: false }); Input field is constrained to those characters allowed by the current dateFormat option when this is set to true.
currentText $( “.selector” ).datepicker({ currentText: “Now” }); Display text on current day link. showButtonPanel option is used to display this button
dateFormat $( “.selector” ).datepicker({ dateFormat: “yy-mm-dd” }); Format for displayed dates.
dayNames $( “.selector” ).datepicker({ dayNames: [ “Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday” ]}); List of day names.
dayNamesMin $( “.selector” ).datepicker({ dayNamesMin: [ “Di”, “Lu”, “Ma”, “Me”, “Je”, “Ve”, “Sa” ] }); List of minimized day names.
dayNamesShort $( “.selector” ).datepicker({ dayNamesShort: [ “Dim”, “Lun”, “Mar”, “Mer”, “Jeu”, “Ven”, “Sam” ] }); List of abbreviated day names.
defaultDate $( “.selector” ).datepicker({ defaultDate: +7 }); Set the date to highlight on first opening if the field is blank
duration $( “.selector” ).datepicker({ duration: “slow” }); Vary the speed of date picker appearance.
firstDay $( “.selector” ).datepicker({ firstDay: 1 }); Set the first day of the week.
gotoCurrent $( “.selector” ).datepicker({ gotoCurrent: true }); The current day link moves to the currently selected date instead of today if it is set to true.
hideIfNoPrevNext $( “.selector” ).datepicker({ hideIfNoPrevNext: true }); Hide  previous and next links if the value is set to true.
isRTL $( “.selector” ).datepicker({ isRTL: true }); Check if the the current language is drawn from right to left.
maxDate $( “.selector” ).datepicker({ maxDate: “+1m +1w” }); Maximum selectable date.
minDate $( “.selector” ).datepicker({ minDate: new Date(2007, 1 – 1, 1) }); Minimum selectable date.
monthNames $( “.selector” ).datepicker({ monthNames: [ “Januar”, “Februar”, “Marts”, “April”, “Maj”, “Juni”, “Juli”, “August”, “September”, “Oktober”, “November”, “December” ] }); List of month names
monthNamesShort $( “.selector” ).datepicker({ monthNamesShort: [ “Jan”, “Feb”, “Mar”, “Apr”, “Maj”, “Jun”, “Jul”, “Aug”, “Sep”, “Okt”, “Nov”, “Dec” ] }); List of abbreviated month names.
navigationAsDateFormat $( “.selector” ).datepicker({ navigationAsDateFormat: true }); Check whether to navigate as
nextText $( “.selector” ).datepicker({ nextText: “Later” }); The text to display for the next month link
numberOfMonths $( “.selector” ).datepicker({ numberOfMonths: [ 2, 3 ] }); The number of months displayed at once.
onChangeMonthYear The callback function called when the month or year is changed.
onClose The callback function called when the datepicker is closed.
onSelect The callback function called when the date is selected from the datepicker.
prevText $( “.selector” ).datepicker({ prevText: “Earlier” }); Display text on the previous link.
selectOtherMonths $( “.selector” ).datepicker({ selectOtherMonths: true }); Whether days in other months shown before or after the current month are selectable.
shortYearCutoff $( “.selector” ).datepicker({ shortYearCutoff: 50 }); The cutoff year for determining the century for a date.
showAnim $( “.selector” ).datepicker({ showAnim: “fold” }); The animation effects used to display the datepicker.
showButtonPanel $( “.selector” ).datepicker({ showButtonPanel: true }); Set to true will display the button in the datepicker.
showCurrentAtPos $( “.selector” ).datepicker({ showCurrentAtPos: 3 }); Defines which position to display the current month while displaying multiple months.
showMonthAfterYear $( “.selector” ).datepicker({ showMonthAfterYear: true }); Set to true will display the month after the year in the header.
showOn $( “.selector” ).datepicker({ showOn: “both” }); Indicate when the date picker should appear.
showOptions $( “.selector” ).datepicker({ showOptions: { direction: “up” } }); Additional animation options.
showOtherMonths $( “.selector” ).datepicker({ showOtherMonths: true }); Whether to show the dates in other months at the start or end of the current month.
showWeek $( “.selector” ).datepicker({ showWeek: true }); A column is added to to display the week of the year.
stepMonths $( “.selector” ).datepicker({ stepMonths: 3 }); number of months to be moved when we click on prev or next links.
weekHeader $( “.selector” ).datepicker({ weekHeader: “W” }); Display text for the week of the year column heading.
yearRange $( “.selector” ).datepicker({ yearRange: “2002:2012” }); Range of years in the drop down.
yearSuffix $( “.selector” ).datepicker({ yearSuffix: “CE” }); Additional text to display after the year.
选件 句法 描述
altField $（“ .selector”）.datepicker（{altField：“ #actualDate”}）; 备用输入字段，使用从日期选择器中选择的日期进行更新。
altFormat $（“ .selector”）.datepicker（{altFormat：“ yy-mm-dd”}）; altField选项的日期格式。
appendText $（“ .selector”）.datepicker（{appendText：“（yyyy-mm-dd）”}）; 在输入字段旁边显示的文本。
自动尺寸 $（“ .selector”）.datepicker（{autoSize：true}）; 如果将输入字段设置为true，则自动调整其大小。
beforeShow 此选项是一个回调函数，仅在显示日期选择器之前被调用。
buttonImage $（“ .selector”）.datepicker（{buttonImage：“ /images/datepicker.gif”}）; 当showOn选项设置为“ button”或“ both”时，显示带有图像URL的日期选择器。
buttonImageOnlyType $（“ .selector”）.datepicker（{buttonImageOnly：true}）; 指示是否应在按钮内部渲染按钮图像。
buttonTextType $（“ .selector”）.datepicker（{buttonText：“ Choose”}）; 在触发按钮上显示文本。
计算周 $（“ .selector”）.datepicker（{calculateWeek：myWeekCalc}）; 计算所选日期的一年中的星期。
changeMonth $（“ .selector”）.datepicker（{changeMonth：true}）; 如果设置为true，则月份将显示为下拉列表。
changeYear $（“ .selector”）.datepicker（{changeYear：true}）; 如果将年份设置为true，则年份将显示为下拉列表。
closeText $（“ .selector”）.datepicker（{closeText：“ Close”}）; 在关闭按钮上显示文本。showButtonPanel选项用于显示此按钮
约束输入 $（“ .selector”）.datepicker（{constrainInput：false}）; 当此字段设置为true时，输入字段将限于当前dateFormat选项允许的那些字符。
currentText $（“ .selector”）.datepicker（{currentText：“ Now”}）; 在当天链接上显示文本。 showButtonPanel选项用于显示此按钮
日期格式 $（“ .selector”）.datepicker（{dateFormat：“ yy-mm-dd”}）; 显示日期的格式。
dayNames $（“ .selector”）.datepicker（{dayNames：[“ Sunday”，“ Monday”，“ Tuesday”，“ Wednesday”，“ Thursday”，“ Friday”，“ Saturday”]}）； 日期名称列表。
dayNamesMin $（“ .selector”）。datepicker（{dayNamesMin：[“ Di”，“ Lu”，“ Ma”，“ Me”，“ Je”，“ Ve”，“ Sa”]}）; 最小化的日期名称列表。
dayNamesShort $（“ .selector”）.datepicker（{dayNamesShort：[[Dim]，“ Lun”，“ Mar”，“ Mer”，“ Jeu”，“ Ven”，“ Sam”]}）; 缩写的日期名称列表。
defaultDate $（“ .selector”）.datepicker（{defaultDate：+7}）; 如果该字段为空白，则设置日期以突出显示第一次打开
持续时间 $（“ .selector”）.datepicker（{duration：“ slow”}）; 更改日期选择器显示的速度。
第一天 $（“ .selector”）.datepicker（{firstDay：1}）; 设置一周的第一天。
gotoCurrent $（“ .selector”）.datepicker（{gotoCurrent：true}）; 如果将当前日期链接设置为true，则移动到当前选择的日期，而不是今天。
hideIfNoPrevNext $（“ .selector”）.datepicker（{hideIfNoPrevNext：true}）; 如果该值设置为true，则隐藏上一个和下一个链接。
isRTL $（“ .selector”）.datepicker（{isRTL：true}）; 检查当前语言是否从右到左绘制。
maxDate $（“ .selector”）.datepicker（{maxDate：“ + 1m + 1w”}）; 最大可选日期。
minDate $（“ .selector”）.datepicker（{minDate：new Date（2007，1 – 1，1）}）; 最小可选日期。
monthNames $（“ .selector”）.datepicker（{monthNames：[“ Januar”，“ Februar”，“ Marts”，“ April”，“ Maj”，“ Juni”，“ Juli”，“ August”，“ September”， “十月”，“十一月”，“十二月”]}）； 月份名称列表
monthNamesShort $（“ .selector”）.datepicker（{monthNamesShort：[“ Jan”，“ Feb”，“ Mar”，“ Apr”，“ Maj”，“ Jun”，“ Jul”，“ Aug”，“ Sep”， “ Okt”，“ Nov”，“ Dec”]}）； 缩写月份名称列表。
navigationAsDateFormat $（“ .selector”）.datepicker（{navigationAsDateFormat：true}）; 检查是否导航为
nextText $（“ .selector”）.datepicker（{nextText：“ Later”}）; 下个月要显示的文字链接
numberOfMonths $（“ .selector”）.datepicker（{numberOfMonths：[2，3]}）; 一次显示的月数。
onChangeMonthYear 更改月份或年份时调用的回调函数。
onClose 关闭日期选择器时调用的回调函数。
onSelect 从日期选择器中选择日期时调用的回调函数。
prevText $（“ .selector”）.datepicker（{prevText：“早期”}）; 在上一个链接上显示文本。
selectOtherMonths $（“ .selector”）.datepicker（{selectOtherMonths：true}）; 是否可以选择当前月份之前或之后显示的其他月份中的天。
shortYearCutoff $（“ .selector”）.datepicker（{shortYearCutoff：50}）; 确定日期的世纪的截止年份。
showAnim $（“ .selector”）.datepicker（{showAnim：“ fold”}）; 用于显示日期选择器的动画效果。
showButtonPanel $（“ .selector”）.datepicker（{showButtonPanel：true}）; 设置为true将在日期选择器中显示按钮。
showCurrentAtPos $（“ .selector”）.datepicker（{showCurrentAtPos：3}）; 定义显示多个月份的同时显示当前月份的位置。
showMonthAfterYear $（“ .selector”）.datepicker（{showMonthAfterYear：true}）; 设置为true将在标题中显示年份之后的月份。
showOn $（“ .selector”）.datepicker（{showOn：“ both”}）; 指示日期选择器应出现的时间。
showOptions $（“ .selector”）.datepicker（{showOptions：{方向：“向上”}}）; 其他动画选项。
showOtherMonths $（“ .selector”）.datepicker（{showOtherMonths：true}）; 在当前月份的开始或结束时显示其他月份中的日期。
showWeek $（“ .selector”）.datepicker（{showWeek：true}）; 将添加一列以显示一年中的星期。
stepMonths $（“ .selector”）.datepicker（{stepMonths：3}）; 单击上一个或下一个链接时要移动的月数。
weekHeader $（“ .selector”）.datepicker（{weekHeader：“ W”}）; 显示一年中的星期几列标题的文本。
yearRange $（“ .selector”）.datepicker（{yearRange：“ 2002：2012”}）; 在下拉范围内。
yearSuffix $（“ .selector”）.datepicker（{yearSuffix：“ CE”}）; 年后要显示的其他文本。

This table briefly describes all the available options in the jQueryUI Datepicker plugin.

下表简要描述了jQueryUI Datepicker插件中的所有可用选项。

Back To Top

回到顶部

jQueryUI Datepicker方法 (jQueryUI Datepicker Methods)

In this section, we will look into the jQueryUI Datepicker plugin methods and its syntax. These methods are very useful when you deal with the datepicker plugin.

在本节中，我们将研究jQueryUI Datepicker插件方法及其语法。 这些方法在处理datepicker插件时非常有用。

Methods Syntax Description
destroy $(“.selector”).
datepicker(“destroy”); 		Removes the datepicker functionality completely and return the element back to its pre-init state.
dialog $( “.selector” ).
datepicker( “dialog”, “10/10/2014” ); 		Opens the datepicker in a dialog box.Parameters are : date , onSelect , settings , pos.
getDate $( “.selector” ).
datepicker( “getDate” ); 		Returns the current date for the datepicker or null if no date has been selected.
hide $( “.selector” ).
datepicker( “hide” ); 		Close a previously opened date picker.
isDisabled $( “.selector” ).
datepicker( “isDisabled” ); 		Determine whether a date picker has been disabled.
option $( “.selector” ).
datepicker( “option”); 		Gets an object containing key/value pairs representing the current datepicker options hash.
refresh $( “.selector” ).
datepicker( “refresh” ); 		Refresh the date picker after making any modification
setDate $( “.selector” ).
datepicker( “setDate”, “10/10/2014” ); 		This method is used to set the date for the datepicker.
show $( “.selector” ).
datepicker( “show” ); 		Display the date picker.
widget $( “.selector” ).
datepicker( “widget” ); 		Returns a jQuery object that contains the datepicker.
方法 句法 描述
破坏 $（“。selector”）。
datepicker（“ destroy”）; 		完全删除datepicker功能，并将元素返回到其初始状态。
对话 $（“ .selector”）。
datepicker（“ dialog”，“ 10/10/2014”）; 		在对话框中打开日期选择器，参数为：date，onSelect，设置，pos。
getDate $（“ .selector”）。
datepicker（“ getDate”）; 		返回日期选择器的当前日期；如果未选择日期，则返回null。
隐藏 $（“ .selector”）。
datepicker（“隐藏”）; 		关闭以前打开的日期选择器。
被禁用 $（“ .selector”）。
datepicker（“ isDisabled”）; 		确定是否禁用了日期选择器。
选项 $（“ .selector”）。
datepicker（“选项”）; 		获取一个对象，该对象包含表示当前datepicker选项哈希的键/值对。
刷新 $（“ .selector”）。
datepicker（“刷新”）; 		进行任何修改后刷新日期选择器
设置日期 $（“ .selector”）。
datepicker（“ setDate”，“ 10/10/2014”）; 		此方法用于设置日期选择器的日期。
表演 $（“ .selector”）。
datepicker（“ show”）; 		显示日期选择器。
小部件 $（“ .selector”）。
datepicker（“ widget”）; 		返回一个包含日期选择器的jQuery对象。

Back To Top

回到顶部

运行中的jQueryUI Datepicker (jQueryUI Datepicker in Action)

In this section we will try different examples to explore the uses of jQueryUI Datepicker plugin.

在本节中，我们将尝试不同的示例来探索jQueryUI Datepicker插件的用法。

  • Default functionality默认功能
  • Datepicker with Animation带有动画的日期选择器
  • In-line Datepicker内联日期选择器
  • Datepicker with Button带按钮的日期选择器
  • Datepicker IconDatepicker图标
  • Format Date格式化日期
  • Select Date Range选择日期范围
  • Restrict Date Range限制日期范围
  • Populate an alternate field填充备用字段
  • Display Multiple Months显示多个月

默认功能 (Default Functionality)

The following example demonstrates the default functionality of jQueryUI Datepicker plugin. It does not take any parameters. The datepicker is attached to a standard input field. Click on the field to open calendar with default functionality. This will be closed after selecting a date or when it is out of focus or you can hit esc button to close it.

以下示例演示了jQueryUI Datepicker插件的默认功能。 它不带任何参数。 日期选择器附加到标准输入字段。 单击该字段以打开具有默认功能的日历。 选择日期后或日期不清晰时，它将关闭，或者您可以按esc按钮将其关闭。

datepicker-default.html

datepicker-default.html

<!doctype html>
<html>
<head><title>jQuery UI Datepicker - Default</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#date_picker" ).datepicker();});</script>
</head><body><p>Click Here to Enter the date : <input type="text" id="date_picker"></p>
</body>
</html>

You will see the following output if you click on the input field.

如果单击输入字段，将看到以下输出。

带有动画的日期选择器 (Datepicker with Animation)

The following example demonstrates the jQuery datepicker plugin with animation. You can try animating the datepicker by selecting an option from the drop down and click on the input field shown in the example.

以下示例演示了带有动画的jQuery datepicker插件。 您可以通过从下拉列表中选择一个选项并单击示例中显示的输入字段来尝试使日期选择器动画化。

datepicker-anim.html

datepicker-anim.html

<!doctype html>
<html>
<head><title>jQuery UI Datepicker - Animation</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#date_picker" ).datepicker();$( "#effects" ).change(function() {$( "#date_picker" ).datepicker( "option", "showAnim", $( this ).val() );});});</script>
</head>
<body><p>Select Animation:<br><select id="effects"><option value="show">Show (default)</option><option value="bounce">Bounce</option><option value="slideDown">Slide down</option><option value="fadeIn">Fade in</option><option value="blind">Blind</option><option value="fold">Fold </option><option value="">None</option></select>
</p>
<p>Click Here to Enter Date: <input type="text" id="date_picker" size="25"></p></body>
</html>

You will see the following output if you click on the input field.

如果单击输入字段，将看到以下输出。

内联日期选择器 (In-line Datepicker)

The following example demonstrates the in-line jQuery datepicker plugin.

以下示例演示了嵌入式jQuery datepicker插件。

datepicker-inline.html

datepicker-inline.html

<!doctype html>
<html>
<head><title>jQuery UI Datepicker - Inline</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#date_picker" ).datepicker();});</script>
</head>
<body>Date In-Line : <div id="date_picker"></div></body>
</html>

You will see the following output if you click on the input field.

如果单击输入字段，将看到以下输出。

带按钮的日期选择器 (Datepicker with Button)

The following example demonstrates the jQuery datepicker with buttons. This plugin display a Today button to select today’s date and another button called Done to close the datepicker.

下面的示例演示了带有按钮的jQuery datepicker。 此插件显示“ Today按钮以选择今天的日期，并显示另一个按钮“ Done以关闭日期选择器。

datepicker-button.html

datepicker-button.html

<!doctype html>
<html>
<head><title>jQuery UI Datepicker - Button</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#date_picker" ).datepicker( {showButtonPanel: true});});</script>
</head>
<body>
<p>Click Here To Enter Date: <input type="text" id="date_picker"></p>
</body>
</html>

You will see the following output if you click on the input field.

如果单击输入字段，将看到以下输出。

Datepicker图标 (Datepicker Icon)

The following example demonstrates the datepicker with icon trigger. You can view the datepicker by clicking on the icon next to the input field.

下面的示例演示带有图标触发器的日期选择器。 您可以通过单击输入字段旁边的图标来查看日期选择器。

datepicker-icon.html

datepicker-icon.html

<!doctype html>
<html>
<head><title>jQuery UI Datepicker - Icon</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#date_picker" ).datepicker({showOn: "button",buttonImage: "/images/calendar-icon.png",buttonImageOnly: true,buttonText: "Select date"});});</script>
</head>
<body><p>Click on the Icon to Enter Date: <input type="text" id="date_picker"></p></body>
</html>

You will see the following output if you click on the icon next to the input field.

如果单击输入字段旁边的图标，将看到以下输出。

格式化日期 (Format Date)

The following example demonstrates the datepicker using dateFormat option in the JQueryUI Datepicker plugin. We have used dateFormat:"DD, d MM, yy" in this example. There are a number of dataFormat options available with this plugin.

下面的示例演示了JQueryUI Datepicker插件中使用dateFormat选项的datepicker。 在此示例中dateFormat:"DD, d MM, yy"我们使用了dateFormat:"DD, d MM, yy" 。 此插件有许多dataFormat选项可用。

datepicker-format.html

datepicker-format.html

<!doctype html>
<html><head><title>jQuery UI Datepicker - Format</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#date_picker" ).datepicker({appendText:"(Full - DD, d MM, yy)",dateFormat:"DD, d MM, yy"});});</script></head><body><p>Click Here To Enter Date: <input type="text" id="date_picker" size=30></p></body>
</html>

You will see the following output on your browser.

您将在浏览器中看到以下输出。

选择日期范围 (Select Date Range)

The following example demonstrates the datepicker to select range of dates.

以下示例演示了选择日期范围的日期选择器。

datepicker-selectRange.html

datepicker-selectRange.html

<!doctype html>
<html>
<head><title>jQuery UI Datepicker - Select Range</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#from" ).datepicker({defaultDate: "+1w",changeMonth: true,onClose: function( selectedDate ) {$( "#to" ).datepicker( "option", "minDate", selectedDate );}});$( "#to" ).datepicker({defaultDate: "+1w",changeMonth: true,onClose: function( selectedDate ) {$( "#from" ).datepicker( "option", "maxDate", selectedDate );}});});</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">To</label>
<input type="text" id="to" name="to">
</body>
</html>

You will see the following output on your browser.

您将在浏览器中看到以下输出。

限制日期范围 (Restrict Date Range)

The following example demonstrates how to restrict the range of dates. We use minDate and maxDate options for this.

下面的示例演示如何限制日期范围。 我们maxDate使用minDate和maxDate选项。

datepicker-restrictRange.html

datepicker-restrictRange.html

<!doctype html>
<html>
<head><title>jQuery UI Datepicker – Restrict Range</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#date_picker" ).datepicker({numberOfMonths: 3,minDate: -20, maxDate: "+1M +10D"});});</script>
</head>
<body>
<p>Clik Here to Enter the Date: <input type="text" id="date_picker"></p>
</body>
</html>

You will see the following output on your browser.

您将在浏览器中看到以下输出。

填充备用字段 (Populate alternate field)

The following example demonstrates how to populate an alternate field using the altField and altFormat options.

下面的示例演示如何使用altField和altFormat选项填充备用字段。

datepicker-alt.html

datepicker-alt.html

<!doctype html>
<html>
<head><title>jQuery UI Datepicker – Alt</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#date_picker" ).datepicker({altField: "#alternate",altFormat: "DD, d MM, yy"});});</script>
</head>
<body>
<p>Click here To Enter Date: <input type="text" id="date_picker"> Alternate Date:<input type="text" id="alternate" size="30"></p>
</body>
</html>

You will see the following output on your browser.

您将在浏览器中看到以下输出。

显示多个月 (Display Multiple Months)

The following example demonstrates the datepicker with multiple months in a single datepicker. We can set the numberOfMonths option to an integer value greater than to display the multiple months in the datepicker.

下面的示例演示在一个日期选择器中包含多个月的日期选择器。 我们可以将numberOfMonths选项设置为一个大于显示日期选择器中多个月份的整数值。

datepicker-multiple.html

datepicker-multiple.html

<!doctype html>
<html>
<head><title>jQuery UI Datepicker – Multiple Months</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#date_picker" ).datepicker({numberOfMonths: 2});});</script>
</head>
<body><p>Click Here To Enter the Date: <input type="text" id="date_picker"></p></body>
</html>

You will see the following output on your browser.

您将在浏览器中看到以下输出。

You can see all these HTML pages in action by visiting to below URL.

您可以通过访问以下URL来查看所有这些HTML页面的运行情况。

jQueryUI Datepicker Plugin Demos

jQueryUI Datepicker插件演示

That’s all for the jQueryUI Datepicker plugin. You will see more jQuery plugins in the coming posts.

jQueryUI Datepicker插件就这些了。 在接下来的文章中，您将看到更多的jQuery插件。

翻译自: https://www.journaldev.com/5514/jqueryui-datepicker-plugin-calendar-options

jqueryui时间插件

jqueryui时间插件_满足您所有日历要求的jQueryUI Datepicker插件相关推荐

  1. 安卓游戏广告加速插件_这是一个你值得拥有的安卓小插件.....

    点击上方「稻草人讲万物」关注我们 哈喽大家好,我是稻草人. 今天给你们带来了一个好用又好玩的安卓手机文艺小清新语录插件.有了这个小插件,你可以每天都在手机桌面上看到不一样的文艺语录,每天都是好心情.显 ...

  2. 写笔记插件_梁宝川：这11条anki插件的使用常识分享给你

    每日写一篇文章的第2年195天 anki考研找梁宝川 在我们编辑anki笔记的过程当中,插件我担任着一个非常重要的角色. 因为插件可以帮我们将笔记形式变得更加丰富. 并且,也可以我们更加方便的操作an ...

  3. cad加载tiff影像插件_设计大神CAD常用的七个插件你会用几个?

    说道CAD插件可能会被人们熟知的也就那几个,可是据统计CAD插件多达上百个,那么在这上百个插件中你又会用几个呢?下面就让我们看看大部分设计师常用的插件有哪些吧! 一.cad批量修改图框程序 1.输入加 ...

  4. 华视读卡器多浏览器插件_翻遍Chrome商店，这9款插件值得安装

    对于电脑浏览器来说,好用的浏览器插件确实方便不少,浏览器插件功能各异,但确实都能满足不少需求. 而现在的浏览器市场,几乎就是Chrome或者基于Chromium内核浏览器的天下,这不微软的Edge向C ...

  5. vue连线 插件_【Vue CLI】手把手教你撸插件

    现如今 Vue 作为主流的前端框架之一,其健全的配套工具,活跃的开源社区,让广发码农热衷追捧.Vue CLI 作为其官方的开发构建工具,目前已更新迭代到 4.x 版本,其内部集成了日常开发用到的打包压 ...

  6. 下方点击出项上方对应的插件_你的PPT里装了几个插件？我赌你不知道TA！

    说到PPT插件,通常会想到iSlide.口袋动画这些"神器". 说真的,自从PPT里有了他们,什么图片插画.图表图标.色彩图示,什么PPT动画都是信手拈来,轻松搞定PPT版微课.让 ...

  7. 实用插件_精选 10 个非常实用的 VS Code 插件

    来源:Daan 原文:https://medium.com/better-programming/10-extremely-helpful-visual-studio-code-plugins-for ...

  8. 待办事项桌面插件_让浏览器重获整洁——标签页管理插件：OneTabOneTab PlusToby...

    1 什么是标签页管理插件 chrome浏览器虽然为用户提供了一个非常方便的打开新标签页的方法,但是随着用户浏览网页的时间增长,用户在一个chrome窗口中打开的标签页会越来越多,当这些标签页过多的时候 ...

  9. mysql8.0 密码认证插件_只需使用VS Code的REST客户端插件即可进行API调用

    为什么要离开IDE去测试新的API?现在你不必这样做了. 我们如何获取数据 如果你已经做了很长时间的Web开发,你可能知道我们的很多工作都是围绕着数据展开的:读取数据.写入数据.操作数据,并以合理的方 ...

最新文章

  1. 人脸妆容迁移---研究和思考
  2. 《现代教育技术》Win8版发布 项目总结
  3. CSU 1113 Updating a Dictionary（map容器应用）
  4. python pypdf2另存为图片_最全总结！聊聊 Python 操作PDF的几种方法
  5. Laravel-数据库操作笔记
  6. 惊！空 struct 地址竟然不相等
  7. Docker的今生前世，关于Docker的一些见解
  8. 使用Flask-SQLAlchemy插件操作MySQL
  9. java系列3：数组初始化（基本格式）
  10. 代理ip如何使用_为什么在使用代理IP爬虫时会出现超时？
  11. 删除数据oracle,oracle删除数据
  12. 电磁场中场点和源点及▽(R)▽(1/R)▽.▽(1/R)
  13. 毕业设计——英文文献下载
  14. 使用wps的邮件合并和文档附件制作带照片的准考证
  15. 微信小程序开发者工具获取不到坐标
  16. 基于微信视频点播小程序系统设计与实现 开题报告
  17. 关于颜色直方图中bins的理解
  18. 华为S系列交换机修改密码不成功
  19. Ubuntu 18.04 安装 nginx 并搭建一个简单的网站
  20. 【传输层01】传输层概述

热门文章

  1. 编译android源码四(常见错误)
  2. sql2005数据库备份—sql语句
  3. [转载] python中的Numpy库入门
  4. java项目环境搭建
  5. 【C/C++】一道试题，深入理解数组和指针
  6. Java并行编程–从并行任务集获取反馈
  7. Android功能点（一）——判断网络是否真正连通
  8. 阿里云服务器定时跑python_通过python调用阿里api定时备份阿里云RDS
  9. acrobat xi pro 简体中文语言支持包_出图利器佳能PRO-541S绘图仪现货报价-佳能 PRO-541S_西安大幅面打印机行情...
  10. oracle怎么截取long类型,Oracle 数据库中 Long 类型字段的读取