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

最新推荐文章于 2023-10-30 18:54:05 发布
最新推荐文章于 2023-10-30 18:54:05 发布
阅读量367 收藏
点赞数
文章标签： java js css javascript html ViewUI
原文链接：https://www.journaldev.com/5514/jqueryui-datepicker-plugin-calendar-options
版权

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选项 (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部分中使用了许多这些选项。

OptionsSyntaxDescription
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.
beforeShowThis 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.
onChangeMonthYearThe callback function called when the month or year is changed.
onCloseThe callback function called when the datepicker is closed.
onSelectThe 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插件时非常有用。

MethodsSyntaxDescription
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)

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-default

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

带有动画的日期选择器 (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.

datepicker-anim

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

内联日期选择器 (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-inline

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

带按钮的日期选择器 (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-button

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

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.

datepicker-icon

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

格式化日期 (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.

datepicker-format

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

选择日期范围 (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.

datepicker-selectRange

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

限制日期范围 (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.

datepicker-restrictRange

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

填充备用字段 (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.

datepicker-alt

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

显示多个月 (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.

datepicker-multiple

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

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时间插件

cunchi4221
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery UI 日历控件
兰丝龙 专栏
08-28 3082
Jquery UI 的日历控件挺好用的   1.中文格式化控件   $(document).ready(function () { $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭',
jQuery ui Datepicker日期插件
08-07
jquery的日期插件Datepicker，这两天正好研究完了，将研究结果分享下，单独的封装汉化版本，都有注释，好修改也好使用，注意保持images里面图片的名称和路径，red-datepicker.css可以定义日期div的样式，我自己在源...
JQuery UI 日历控件属性设置
arvte20486的博客
08-23 140
$(function(){ $("#datepicker").datepicker({ dateFormat:'yy-mm-dd',//更改时间显示模式 showAnim:"slide",//显示日历的效果slide、fadeIn、show等 ...
jQuery UI 中的 datepicker( )方法
weixin_30879169的博客
02-28 1115
学习要点： 调用 datepicker( ) 方法 修改 datepicker（）样式 datepicker( ) 方法的属性 datepicker( ) 方法的事件 一、调用 datepicker（）方法 $('#date').datepicker(); 二、修改 datepicker（）样式 修改样式，可以在浏览器中审查元素，然后修改对应地方...
jQuery-UI DateTimePicker日期和时间插件，显示日期和时间、只显示日期、只选择时间
人生若南柯一梦
05-24 4649
jQuery-UI DateTimePicker日期和时间插件，显示日期和时间、只显示日期、只选择时间
前端实用插件-日期处理工具Day.js
最新发布
qq_38192105的博客
10-30 1614
day.js工具使用介绍，基础实用方法介绍
jquery-ui.rar_日历 jquery
09-14
除了日历功能，jQuery UI 还提供了时间选择器（Timepicker）插件，这使得用户能够方便地选择或输入时间。时间选择器可以与日历组件结合使用，形成完整的日期和时间选择工具。时间选择器同样具有丰富的配置选项，如...
jquery UI Datepicker时间控件的使用方法（加强版）
10-23
继续介绍了jquery UI Datepicker时间控件的使用方法，主要关于Datepicker插件的介绍和使用，并分享了第一个日历插件的使用实例，需要的朋友可以参考下
jQueryUI Datepicker组件设置日期高亮
10-21
jQueryUI Datepicker组件是jQuery UI库中的一个强大日期选择器，它提供了丰富的功能和自定义选项，使得在网页中添加日期选择功能变得简单易行。在某些场景下，我们可能需要突出显示日历中的特定日期，比如标记重要的...
jquery UI Datepicker时间控件的使用方法（基础版）
11-22
jQuery UI Datepicker是一款非常流行的JavaScript库，用于在网页上添加日期选择功能。它提供了一种简单而优雅的方式来处理日期输入，适用于多种场景，如输入框、日历展示或者任何需要用户选择日期的地方。在本文中，...
仿element-ui的jquery datepickerRange
09-10
原github地址：https://github.com/qiuyaofan/datepicker 在线demo：https://qiuyaofan.github.io/datepicker/ 喜欢请在github star，谢谢
jquery-ui-datepicker中文版
10-27
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ text-align: left; } .ui-timepicker-div dl dt{ height: 25px; } .ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; } .ui-timepicker-div td { font-size: 90%; } 页面引入汉化 去掉该行，全英文。格式也好了很多！ 期待后续的高手修改 该资源来自于网上一哥们
jQuery日期和时间插件（jquery-ui-timepicker-addon.js）中文破解版使用
Ned_mahone的博客
09-07 3193
简介 jQuery UI Datepicker日期选择插件很好用了，只不过只能精确到日，不能选择时间（小时分钟秒）很遗憾，而jquery-ui-timepicker-addon.js正是基于jQuery UI Datepicker的一款可选时间的插件。 官网地址：http://trentrichardson.com/examples/timepicker/ 官网demo下载：https://...
jQuery 日期和时间插件 jquery-ui-timepicker-addon.js
Anonymous
05-24 4950
官网地址：http://trentrichardson.com/examples/timepicker/ 官网demo下载：https://github.com/trentrichardson/jQuery-Timepicker-Addon 插件效果图： HTML &amp;lt;script src=&quot;/js/jquery-ui-timepicker-addon.js&quot; type=&quot;text/...
JQuery UI - datepicker
D!eR 个人博客
12-22 3301
·概述日期选择插件是一个配置灵活的插件，你可以定义它的展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。官方示例地址：http://jqueryui.com/demos/datepicker/同时，你还可以通过键盘控制它：page up/down - 上一月、下一月ctrl+page up/down - 上一年、下一年 ctrl+hom
JS运用Date做的欧式钟表
不想写代码的一天
05-29 225
这个钟表主要考验对时分秒的计算，以及各个指针选件角度的计算。 获取当前时间 （new Date（）） 获取到1900年的总毫秒数alltime （getTime(）） 求出现在的时 分 秒 （1）此刻的秒数：(alltime/1000)%60 （1s =1000ms） （2）此刻的分钟数：(alltime/1000/60)%60 （3） 此刻的小时数：(alltime/1000/60/...
html中字段是日期控件,jQuery日历插件datepicker用法详解
weixin_34474777的博客
06-01 728
jQuery是一款不可多得的非常优秀的javascript脚本开发库，而基于其上的很多插件也是非常规范和卓越的，如果错过这番美景真是太可惜了，比如datepicker这个插件。一般MIS系统的前端，尤其是用户注册页面，都会有诸如“出身年月”的日期输入框，最简单的做法就是使用一个标签，这样做的弊端有很多：首先是与数据库字段类型的匹配、其次是输入日期的合法性如“13月”或者闰年等等问题，如果深入下去还...
自定义EasyUI的datetimebox控件日期时间的显示格式
热门推荐
qiancc的博客
05-08 2万+
工作中遇到的问题，在此记录一下。需求：前台页面使用了EasyUI框架，在某一个html页面中要求datetimebox显示格式为年月日和小时，如图所示： 尝试过两种方法，分别如下： 第一种方法： datetimebox 依赖 datebox和timespinner两个组件，拥有datebox的formatter格式化日期和时间显示方式的属性;重写了formatter属性,来改变日期框的显示方式
jquery.ui.datepicker.js 用法
zb0567的专栏
08-25 1万+
jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。 官方地址：http://docs.jquery.com/UI/Datepicker，官方示例： http://jqueryui.com/demos/datepicker/。 一个不错的地址，用来DIY jQuery
jquery移动端日历时间选择器插件
05-28
可以使用Mobiliscroll插件来实现jquery移动端日历时间选择器。Mobiliscroll是一个移动端UI框架，提供了丰富的组件和主题，包括日期选择器、时间选择器、滚动选择器等。以下是一个简单的示例代码： ```html <!...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值