Detailed explanation of jQuery UI date picker Datepicker

The date picker (Datepicker) is bound to a standard form input field. Move focus to the input (click or use the tab key) to open an interactive calendar in a small overlay. Select a date, click anywhere on the page (the input box loses focus), or hit the Esc key to close. If a date is selected, the feedback is displayed as the value of input. This article mainly brings you an example of jQuery UI - Datepicker (Datepicker). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

 
 
 
  
  
  
  
  
  
  

 
 
 
日期：
 
 
 
 

Animation

Use different animations when opening or closing the datepicker. Select an animation from the drop-down box and click in the input box to see its effect. You can use any of the three standard animations, or use any of the UI effects.

 
 
 
  
  
  
  
  
  
  

 
 
 
日期：
 
 
动画：
 
  
  Show (默认) 
  滑下 
  淡入 
  Blind (UI 百叶窗特效) 
  Bounce (UI 反弹特效) 
  Clip (UI 剪辑特效) 
  Drop (UI 降落特效) 
  Fold (UI 折叠特效) 
  Slide (UI 滑动特效) 
  无 
  
 
 
 
 

Dates in other months

datepicker can display dates in other months, and these dates can also be set to be selectable.

 
 
 
  
  
  
  
  
  
  

 
 
 
日期：
 
 
 
 

Show Button Bar

Use the showButtonPanel option of Boolean value to display a "Today" button for selecting today's date, and to close it The calendar displays a "Done" button. By default, each button is enabled when the button bar is displayed, but buttons can be turned off through additional options. Button text is customizable.

 
 
 
  
  
  
  
  
  
  

 
 
 
日期：
 
 
 
 

Inline display

The datepicker is nested in the page, rather than displayed in an overlay middle. Just simply call .datepicker() on p instead of input.

 
 
 
  
  
  
  
  
  
  

 
 
 
日期：
 
 
 
 

Show month & year menu

Show the month and year drop-down boxes instead of displaying the static month /year title to facilitate navigation over a wide range of time spans. Just add boolean changeMonth and changeYear options.

 
 
 
  
  
  
  
  
  
  

 
 
 
日期：
 
 
 
 

Display multiple months

Set the numberOfMonths option to an integer 2, or an integer greater than 2, to use in a datepicker Display multiple months in .

 
 
 
  
  
  
  
  
  
  

 
 
 
日期：
 
 
 
 

Format Date

Display date feedback in various ways. Select a date format from the drop-down box, then click and select a date in the input box to see the date display in the selected format.

 
 
 
  
  
  
  
  
  
  

 
 
 
日期：
 
 
格式选项：
 
  
 Default - mm/dd/yy 
 ISO 8601 - yy-mm-dd 
 Short - d M, y 
 Medium - d MM, y 
 Full - DD, d MM, yy 
 With text - 'day' d 'of' MM 'in the year' yy 
  
 
 
 
 

Icon Trigger

Click the icon next to the input box to display the datepicker. Sets the datepicker to open on focus (default behavior), on icon click, or on focus/icon click.

 
 
 
  
  
  
  
  
  
  

 
 
 
日期：
 
 
 
 

Localized Calendar

Localized datepicker calendar language and format (default is English/Western format). datepicker includes built-in support for languages ​​that read from right to left, such as Arabic and Hebrew.

 
 
 
  
  
  
  
  
  
  
  
  
  
  

 
 
 
日期： 
  
 Arabic (?(??????? 
 Chinese Traditional (繁體中文) 
 English 
 French (Fran?ais) 
 Hebrew (?(????? 
 
 
 
 
 

Fill another input box

Using altField and altFormat options, whenever a date is selected, the Another input box is filled with a date in a certain format. This feature further processes the computer-friendly date to present a user-friendly date to the user.

 
 
 
  
  
  
  
  
  
  

 
 
 
日期： 
 
 
 
 

Limit date range

Limit the selectable date range with the minDate and maxDate options. Set the start and end dates to actual dates (new Date(2009, 1 - 1, 26)), or to a numerical offset from today (-20), or to a string of period and unit ('+1M +10D '). If set to a string, use 'D' for day, 'W' for week, 'M' for month, and 'Y' for year.

 
 
 
  
  
  
  
  
  
  

 
 
 
日期：
 
 
 
 

Select a date range

Select the date range to search.

 
 
 
  
  
  
  
  
  
  

 
 
 
从 
 
到 
 
 
 
 

Display the number of weeks in the year

datepicker can display the number of weeks in the year. The default calculation is based on the ISO 8601 definition: each week starts on Monday, and the first week of each year contains the first Thursday of that year. This means that some days in one year may belong to weeks in another year.

 
 
 
  
  
  
  
  
  
  

 
 
 
日期：
 
 
 
 

jQuery's datepicker becomes Chinese: jquery.ui.datepicker-zh-CN.js usually looks for this js, I will take out the code of this js, and later No need to search online anymore:

jQuery(function($){ 
 $.datepicker.regional['zh-CN'] = { 
  closeText: '关闭', 
  prevText: '<上月', 
  nextText: '下月>', 
  currentText: '今天', 
  monthNames: ['一月','二月','三月','四月','五月','六月', 
  '七月','八月','九月','十月','十一月','十二月'], 
  monthNamesShort: ['一','二','三','四','五','六', 
  '七','八','九','十','十一','十二'], 
  dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
  dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
  dayNamesMin: ['日','一','二','三','四','五','六'], 
  weekHeader: '周', 
  dateFormat: 'yy-mm-dd', 
  firstDay: 1, 
  isRTL: false, 
  showMonthAfterYear: true, 
  yearSuffix: '年'}; 
 $.datepicker.setDefaults($.datepicker.regional['zh-CN']); 
});

Related recommendations:

How to develop a date picker for a WeChat applet

Detailed explanation of the React Native open source time and date selector component

JS touch screen web version imitation app pop-up scrolling list selector/date Selector

The above is the detailed content of Detailed explanation of jQuery UI date picker Datepicker. For more information, please follow other related articles on the PHP Chinese website!