Home > Developer > Web Develop
The date selector (Datepicker) is bound to a standard form input field. Move the focus to input (click or Use the TAB key) and open an interactive calendar on a small overlay. Select a date, click anywhere on the page (the input box loses focus), or click the ESC key to close it. If a date is selected, the feedback is displayed as the value of input.
<!doctype html>Animation
Use a different animation when you turn DatePicker on or off. 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.
<!doctype html>Dates for other months
DatePicker can display dates for other months, and these dates can also be set to selectable.
<!doctype html>Show Button Bar
The option for a Boolean value
showButtonPaneldisplays a "Today" button for selecting the date of the day, and a "done" button for closing the calendar. By default, each button is enabled when the button bar is displayed, but the button can be closed by other options. Button text can be customized.<!doctype html>Inline display
DatePicker are nested in a page and not displayed in an overlay. Simply call. DatePicker () on the Div, rather than on input.
<!doctype html>Show Month & Year menu
Displays the drop-down boxes for the month and year instead of the static month/year headings, which facilitates navigation over a wide span of time. Add Boolean values
changeMonthandchangeYearoptions.<!doctype html>Show multiple months
Set the
numberOfMonthsoption to an integer 2, or an integer greater than 2, to display multiple months in a datepicker.<!doctype html>Formatted date
The
Displays date feedback in a variety of ways. Select a date format from the drop-down box, and then click in the Input box and select a date to view the date display for the selected format.
<!doctype html>Icon Trigger
Click the icon next to the input box to display the DatePicker. Set the DatePicker to open when it gets focus (the default behavior), or to open when the icon is clicked, or when the focus/click icon is acquired.
<!doctype html>Localizing calendars
Localize the DatePicker Calendar language and format (default to English/western format). DatePicker contains built-in support for languages that are read from right to left, such as Arabic and Hebrew.
<!doctype html>Fill another input box
Use
altFieldandaltFormatoptions, whenever a date is selected, fills a date with a certain format in another input box. This feature presents a user-friendly date to the user after further processing of the computer-friendly date.<!doctype html><!doctype html>Select a date range
Select the date range you want to search.
<!doctype html>Show the week ordinal of a year
DatePicker can display the week ordinal of a year. The default calculation is defined according to ISO 8601: The first week of each year, starting from Monday, contains the first Thursday of the year. This means that some days of the year may be part of the week in another year.
<!doctype html>jquery's DatePicker into Chinese: jquery.ui.datepicker-zh-cn.js generally will find this JS, I put this JS code out, in the future do not need to find on the Internet:
JQuery (function ($) { $.datepicker.regional[' zh-cn ') = { closetext: ' Off ', Prevtext: ' < last month ', Nexttext: ' Next month > ', currenttext: ' Today ', monthNames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' bodyguards ' ', ' November ', ' December '], monthnamesshort: [' One ', ' two ', ' three ', ' four ', ' five ', ' Six ', ' seven ', ' eight ', ' nine ', ' ten ', ' 11 ', ' 12 '], dayNames: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', daynamesshort: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', Daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '], weekheader: ' Week ', dateformat: ' Yy-mm-dd ', firstday:1, Isrtl:false, showmonthafteryear:true, yearsuffix: ' Year '}; $.datepicker.setdefaults ($.datepicker.regional[' zh-cn '); });Above in addition to Baidu Rookie tutorial, also have their own Baidu. More knocking, more summary finishing.
JQuery UI Instance-date selector (Datepicker)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
