Jquery date, time select plugin __jquery

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 Demos 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.
<script type= "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.


Time Selection

DateTimePicker relies on the jquery and jquery UI, so you first get the jquery library and jquery UI and DateTimePicker, click here to download the latest version of DateTimePicker

Add the following code to the head in the HTML page:
<link rel= "stylesheet" type= "Text/css" href= "css/jquery-ui.css" />
<script type= "Text/javascript" src= "Js/jquery.min.js"></script>
<script type= "Text/javascript" src= "Js/jquery-ui.js"></script>
<script type= "Text/javascript" src= "Js/jquery-ui-timepicker-addon.js"></script>

Then add a line of code to the body:
<input type= "text" id= "example" />
CSS

Note that in addition to the style that introduces the jquery UI, you need to add the following styles to control the appearance of the time control.
. ui-timepicker-div. ui-widget-header {margin-bottom:8px;}
. ui-timepicker-div dl {text-align:left;}
. ui-timepicker-div DL DT {height:25px; Margin-bottom: -25px;}
. Ui-timepicker-div DL DD {margin:0 10px 10px 65px;}
. ui-timepicker-div td {font-size:90%;}
. ui-tpicker-grid-label {background:none; border:none; margin:0; padding:0;}
. Ui_tpicker_hour_label,.ui_tpicker_minute_label,.ui_tpicker_second_label,
. ui_tpicker_millisec_label,.ui_tpicker_time_label{padding-left:20px}
JQuery

Call DateTimePicker when the input box gets the focus.
$ (' #example_1 '). DateTimePicker ();

If you only need to display the time, then:
$ (' #example_2 '). Timepicker ();

Define the time format:
$ (' #example_3 '). DateTimePicker ({
Showsecond:true,
Showmillisec:true,
TimeFormat: ' Hh:mm:ss:l '
});

Please click here for more demo.

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