Shulou(Shulou.com)06/02 Report--

This article introduces you how the use of jquery date picker is, the content is very detailed, interested friends can refer to, hope to be helpful to you.

In jquery ui, it provides a very practical date selector: datepicker, which can easily display the dates in the calendar and flexibly configure relevant options, including date format, range, and so on. We often use datepicker in WEB applications, such as requiring users to enter dates for related queries. We applied datepicker to many projects a long time ago, and today we put it into an article to share with you.

Preparatory work

First of all, please go to the jqueryui.com official website to download the datepicker plug-in code. Note that all the plug-ins for the entire jqueryui are downloaded on the official website, but you can choose to download a few of the plug-ins used. Only datepicker is used in this article, so you only choose to download jqueryui core code and datepicker code. You can directly click the Download download button above this article to download the demo source package, which includes the datepicker plug-in source code.

HTML

First, introduce jquery library files and datepicker plug-ins and related css between head.

Then add an input box between the body.

Javscript

Calling datepicker is very simple, and you can do it directly using the following code:

(function () {$("# date_1") .datepicker ();})

In this way, a date selector pops up automatically when you click the input box, and when the date is selected, the selector is automatically closed and the selected date is displayed in the input box.

Options and event usage instructions

Datepicker provides a wealth of options to set event method calls, the author first often used related properties and methods into a table to facilitate query and use.

Option description the default value, altField, synchronizes the selected date to another field, and altFormat allows you to display date strings in different formats. Demo''altFormat the date format displayed in another field when altField is set. '' appendText adds the specified string after the domain of the date plug-in. The buttonImage setting can be used to click the button picture of the pop-up calendar. If it is not empty, the text of the button will become the alt property and will not be displayed directly. When demo''buttonImageOnly is set to true, the picture will act as a button that can be clicked to trigger the pop-up calendar false buttonText to set the text content of the trigger button. ... ChangeMonth sets whether the month is allowed to be selected through the drop-down box list. False changeYear sets whether the year is allowed to be selected through the drop-down list. False closeText sets the text content of the close button, which is displayed only through the setting of the showButtonPanel parameter. 'Done' constrainInput if set to true, constrains the currently entered date format. True currentText sets the text content of the button for the day, and this button needs to be displayed through the setting of the showButtonPanel parameter. 'Today' dateFormat sets the display format of the date string. Demo 'mm/dd/yy' dayNames sets the name of each day of the week, starting on Sunday. This content is displayed when dateFormat is used, and in the calendar when the mouse is moved over the header. ['Sunday',' Monday', 'Tuesday',' Wednesday', 'Thursday',' Friday', 'Saturday'] dayNamesMin sets the acronym for each day of the week, starting on Sunday, for dateFormat display, and for lines in previous calendars. ['Su',' Mo', 'Tu',' We', 'Th',' Fr', 'Sa'] dayNamesShort sets the acronym for each day of the week, starting on Sunday, for dateFormat display, and for lines in previous calendars. ['Sun',' Mon', 'Tue',' Wed', 'Thu',' Fri', 'Sat'] defaultDate sets the date selected for the first display after loading. It can be a Date object, a number (for example, + 7 from today), or a valid string ('y 'for the year,' m 'for the month,' w' for the week, and'd 'for the day, for example:' + 1m + 7d'). Null duration sets the display time for the date control to expand the animation. Optional "slow", "normal", "fast",''means immediately, and the number represents milliseconds. 'normal' firstDay sets the first day of the week. Sunday is 0, Monday is 1, and so on. 0 gotoCurrent if set to true, when the day button is clicked, it will be moved to the currently selected date instead of today. False hideIfNoPrevNext setting hides the corresponding button when there is no previous / next option. If false isRTL is set to true, all text is from right to left. False maxDate sets a maximum optional date. It can be a Date object, a number (for example, + 7 from today), or a valid string ('y 'for the year,' m 'for the month,' w' for the week, and'd 'for the day, for example:' + 1m + 7d'). Demo null minDate sets a minimum optional date. It can be a Date object, a number (for example, + 7 from today), or a valid string ('y 'for the year,' m 'for the month,' w' for the week, and'd 'for the day, for example:' + 1m + 7d'). Null monthNames sets the names of all months. ['January',' February', 'March',' April', 'May',' June', 'July',' August', 'September',' October', 'November',' December'] monthNamesShort sets the abbreviation for all months. ['Jan',' Feb', 'Mar',' Apr', 'May',' Jun', 'Jul',' Aug', 'Sep',' Oct', 'Nov',' Dec'] navigationAsDateFormat if set to true, the formatDate function will be applied to the values of prevText,nextText and currentText, such as the month name. False nextText sets the display text for the next month link. 'Next' numberOfMonths sets how many months to display at a time. The number of months is displayed if it is an integer, or the number of rows and columns displayed if it is an array. Demo 1 prevText sets the display text for the Last month link. 'Prev' shortYearCutoff sets the value of the due year. If the number is (0-99), it starts from the current year, and if it is a string, the corresponding number is converted to a number and then added to the current year. When the cut-off year is exceeded, it is considered to be the last century. The'+ 10 'showAnim sets the name of the animation that shows and hides the date plug-in. 'show' showButtonPanel sets whether the relevant buttons are displayed on the panel. False showCurrentAtPos sets the location where the current month is displayed when multiple months are displayed. The x bit starts at the top / left. Whether 0 showMonthAfterYear displays the month after the header year of the panel. False showOn sets what event triggers the display date plug-in panel, optional values: focus, button, both 'focus' showOptions if you use showAnim to display animation effects, you can use this parameter to add some additional parameter settings. {} whether showOtherMonths displays some dates of the previous and next two months in the current panel (optional). False stepMonths several months at a time when clicking on the previous / next month. The number of years displayed in the drop-down list of years controlled by 1 yearRange can be relative to the current year (- nn:+nn) or absolute value (- nnnn:+nnnn)'- 10 nnnn:+nnnn 10 'beforeShow triggers this event before the date control display panel and returns the instance object of the control that currently triggered the event. Function (input) beforeShowDay triggers this event at the date binding time on each panel before the date control display panel, and the parameter is the date on which the event was triggered. After calling the function, you must return an array: [0] whether this date is optional (true/false), [1] the CSS style name for this date ("" indicates default), [2] when the mouse moves over it, a prompt appears. Function (date) onChangeMonthYear triggers this event when the current year or month changes, and the parameter is the instance of the changed year month and current date plug-in. The function (year, month, inst) onClose triggers this event (regardless of whether a date is selected or not) when the date panel is closed, and the arguments are the selected date and the current date plug-in instance. Demo function (dateText, inst) onSelect triggers this event when a date is selected in the date panel, with the selected date and an instance of the current date plug-in. Function (dateText, inst)

About the use of jquery date picker is how to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.