Date selector: Use of jquery DatePicker

In the jquery UI, a very useful date selector is available: DatePicker, which makes it easy to display dates in a calendar and flexibly configure options, including date formats, ranges, and more. We often use DatePicker in Web applications, such as requiring users to enter dates for related queries. We've been applying datepicker to many projects before, and we've written it today to share with you.

View Demo Download Source preparation work

First please download the DatePicker plug-in code to jqueryui.com official website, note that the official website provides the entire jquery UI of all plug-ins to download, but you can choose a few of the plug-in download, only used in this article DatePicker, so only choose to download jquery The UI core code and the DatePicker code. You can directly click on the download Download button above this article to download the demo source package, which includes the DatePicker plugin source code.

Html

First, the jquery library file and the DatePicker plugin and related CSS are introduced between the head.

<scriptType="Text/javascript"src="Js/jquery.js"></script>
<script type="Text/javascript" src="Js/jquery-ui-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />

Then add an input box between the body.

<input type="text" id="date_1" /> 

Javscript

Calling DatePicker is straightforward and can be implemented directly using the following code:

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

This will automatically pop up a date selector when the input box is clicked, 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 the event method call, the author first will often use the relevant properties and methods organized into a table, easy to query and use.

Options	Describe	Default value
Altfield	Synchronizes the selected date to another field, with Altformat to display date strings in different formats. Demo	‘‘
Altformat	When Altfield is set, a date format is displayed in another field.	‘‘
AppendText	Adds the specified string after the owning domain of the date plug-in.	‘‘
Buttonimage	Set the button picture that can be used to click the pop-up calendar, and if not empty, the text of the button becomes the Alt attribute, not directly displayed. Demo	‘‘
Buttonimageonly	When set to true, the picture will be clicked as a button to trigger the popup calendar	False
ButtonText	Sets the text content of the trigger button.	...
Changemonth	Sets whether the month is allowed to be selected from the drop-down box list.	False
Changeyear	Sets whether to allow selection of the year from the drop-down box list.	False
Closetext	Sets the text content of the Close button, which needs to be displayed by setting the Showbuttonpanel parameter.	' Done '
Constraininput	If set to true, constrains the date format that is currently entered.	True
Currenttext	Sets the text content of the button for the day, which needs to be displayed by setting the Showbuttonpanel parameter.	' Today '
DateFormat	Sets the display format of the date string. Demo	' Mm/dd/yy '
DayNames	Set the name of the day of the week, starting in Sunday. This content is used when the DateFormat is displayed, and the calendar is displayed when the mouse is moved to a wardrobe.	[' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ']
Daynamesmin	Set the daily indent for the week, starting in Sunday, when this content is displayed for DateFormat, and for the previous calendar.	[' Su ', ' Mo ', ' Tu ', ' We ', ' Th ', ' Fr ', ' Sa ']
Daynamesshort	Set the daily indent for the week, starting in Sunday, when this content is displayed for DateFormat, and for the previous calendar.	[' Sun ', ' Mon ', ' Tue ', ' Wed ', ' Thu ', ' Fri ', ' Sat ']
Defaultdate	Sets the date that is selected when the first display is finished after the default load. Can be a Date object, either a number (starting today, for example, +7), or a valid string (' Y ' for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d ').	Null
Duration	Set the date control to expand the display time of the animation, optional is "slow", "normal", "fast", "" represents immediately, the number represents the number of milliseconds.	' Normal '
FirstDay	Set the first day of the week. Sunday is 0, Monday is 1, and so on.	0
Gotocurrent	If set to true, when you tap the day button, it moves to the currently selected date instead of today.	False
Hideifnoprevnext	Set to hide the corresponding button when there is no previous/next selectable case.	False
Isrtl	If set to True, all text is from right to left.	False
MaxDate	Set a maximum optional date. Can be a Date object, either a number (starting today, for example, +7), or a valid string (' Y ' for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d '). Demo	Null
MinDate	Set a minimum optional date. Can be a Date object, either a number (starting today, for example, +7), or a valid string (' Y ' for the year, ' m ' for the month, ' W ' for the week, ' d ' for the day, for example: ' +1m +7d ').	Null
MonthNames	Sets the name 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 ', ' June ', ' Jul ', ' April ', ' Sep ', ' Oct ', ' Nov ', ' Dec ']
Navigationasdateformat	If set to True, the FormatDate function is applied to the values of Prevtext,nexttext and currenttext, for example, to display as the month name.	False
Nexttext	Sets the display text for the next month link.	' Next '
Numberofmonths	Set how many months to display at a time. If it is an integer, the number of months is displayed, and if it is an array, the number of rows and columns that are displayed. Demo	1
Prevtext	Sets the display text for the "last month" link.	' Prev '
Shortyearcutoff	Sets the value for the cutoff year. If it is (0-99), the number starts with the current year, and if it is a string, the corresponding number is converted and then added to the current year. When the cutoff year is exceeded, it is considered to be the last century.	' +10 '
Showanim	Sets the name of the animation that displays and hides the date plug-in.	' Show '
Showbuttonpanel	Sets whether the relevant buttons are displayed on the panel.	False
Showcurrentatpos	Sets the position of the current month when the multi-month display is displayed. From top/left, start at x position.	0
Showmonthafteryear	Whether to display the month after the head year of the panel.	False
Showon	Set 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 add additional parameter settings by using this parameter.	{}
Showothermonths	Whether to display the number of dates on the current panel for the top, next two months (not selectable).	False
Stepmonths	When clicked up/down January, turn a few months at a time.	1
Yearrange	The number of years displayed in the drop-down list of the control year, either relative to the current year (-NN:+NN) or absolute (-nnnn:+nnnn)	' -10:+10 '
Beforeshow	This event is triggered before the date control display panel, and the instance object of the control that is currently triggering the event is returned.	function (Input)
Beforeshowday	This event is triggered by a date binding on each panel before the date control display panel, with the argument being the date on which the event was triggered. After the function is called, an array must be returned: [0] This date is optional (True/false), [1] The CSS style name for this date ("" means default), [2] when the mouse moves to the top, a hint appears.	function (date)
Onchangemonthyear	This event is triggered when the current or month is changed, and the parameter is an instance of the changed year month and the current date plug-in.	function (year, month, inst)
OnClose	This event is triggered when the date panel is closed (regardless of whether there is a selected date), and the parameter is an instance of the selected date and current date plug-in. Demo	function (Datetext, inst)
OnSelect	When this event is triggered after a date in the date panel is selected, the parameter is an instance of the selected date and the current date plug-in.	function (Datetext, inst)

Date selector: Use of jquery DatePicker