jQuery UI example - the date picker (Datepicker)
From the pop-up box or inline calendar to select a date.
For more details about the datepicker components, see the API documentation date picker member (the Datepicker the Widget) .
The default function
Date picker (Datepicker) is bound to a standard form on the input field. Move the focus on the input (or use the tab key to click) to open an interactive calendar on a small overlay. Choose a date, click anywhere on the page (input box loses focus), or click the Esc key to close. If you select a date, the feedback is displayed as the value of the input.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - The default function </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
});
</ Script>
</ Head>
<Body>
<P> Date: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Animation
Use different animations when you open or close the datepicker. Select a movie from the drop-down box, and then click in the box to see its effect. You can use any one of three standard animation, special effects, or use any of a UI.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - Anime </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
$ ( "#anim") .change (Function () {
$ ( "#datepicker") .datepicker ( "Option", "showAnim", $ (this) .val ());
});
});
</ Script>
</ Head>
<Body>
<P> Date: <input type = "text" id = "datepicker" size = "30"> </ p>
<P> Animation: <br>
<Select id = "anim">
<Option value = "show"> Show (default) </ option>
<Option value = "slideDown"> slide </ option>
<Option value = "fadeIn"> Fade </ option>
<Option value = "blind"> Blind (UI blinds effects) </ option>
<Option value = "bounce"> Bounce (UI rebound effects) </ option>
<Option value = "clip"> Clip (UI editing effects) </ option>
<Option value = "drop"> Drop (UI landed effects) </ option>
<Option value = "fold"> Fold (UI folded effects) </ option>
<Option value = "slide"> Slide (UI sliding effects) </ option>
<Option value = ""> No </ option>
</ Select>
</ P>
</ Body>
</ Html>
Other months of the date
datepicker can show additional month date, these dates may be set to optional.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - in other months of the date </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showOtherMonths: true,
selectOtherMonths: true
});
});
</ Script>
</ Head>
<Body>
<P> Date: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Display button bar
By boolean showButtonPanel for the selection of today's date display a "Today" button to turn off the calendar displays a "Done" button option. By default, when a button bar display will enable each button, but the button can be turned off through the other options. Button text can be customized.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - Display button bar </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showButtonPanel: true
});
});
</ Script>
</ Head>
<Body>
<P> Date: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Display inline
datepicker is nested in the page display, rather than in a cover layer. Simply call the div .datepicker () can be, instead of calling on the input.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - inline display </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
});
</ Script>
</ Head>
<Body>
Date: <div id = "datepicker"> </ div>
</ Body>
</ Html>
Display Month & Year menu
Drop-down box displays the month and year, rather than a static display of the month / year title, it is easy to span a large range of time on navigation. Add a Boolean value changeMonth and changeYear option.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - Display month & amp; Year menu </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
changeMonth: true,
changeYear: true
});
});
</ Script>
</ Head>
<Body>
<P> Date: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Display multiple months
Setting numberOfMonths option is an integer 2 or an integer greater than 2, to be displayed on a datepicker multiple months.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - Display multiple months </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
numberOfMonths: 3,
showButtonPanel: true
});
});
</ Script>
</ Head>
<Body>
<P> Date: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Date Format
In a variety of ways to display the date feedback. Select a date format from the drop-down box, then click and select a date in the input box, view the date format of the selected display.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - Date Format </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
$ ( "#format") .change (Function () {
$ ( "#datepicker") .datepicker ( "Option", "dateFormat", $ (this) .val ());
});
});
</ Script>
</ Head>
<Body>
<P> Date: <input type = "text" id = "datepicker" size = "30"> </ p>
<P> Format Options: <br>
<Select id = "format">
<Option value = "mm / dd / yy"> Default - mm / dd / yy </ option>
<Option value = "yy-mm-dd"> ISO 8601 - yy-mm-dd </ option>
<Option value = "d M, y"> Short - d M, y </ option>
<Option value = "d MM, y"> Medium - d MM, y </ option>
<Option value = "DD, d MM, yy"> Full - DD, d MM, yy </ option>
<Option value = "& apos; day & apos; d & apos; of & apos; MM & apos; in the year & apos; yy"> With text - 'day' d 'of' MM 'in the year' yy </ option>
</ Select>
</ P>
</ Body>
</ Html>
Trigger icon
Click the icon next to the input box to display the datepicker. Setting datepicker opens (default behavior) at the focus, or click on the icon to open, or open / receive focus when clicking on the icon.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - Trigger icon </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showOn: "button",
buttonImage: "images / calendar.gif",
buttonImageOnly: true
});
});
</ Script>
</ Head>
<Body>
<P> Date: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Localized calendar
Localization datepicker calendar language and format (the default is English / Western format). datepicker contains built-in support for right-to-left reading languages, such as Arabic and Hebrew.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - localized calendar </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ($ .datepicker.regional [ "Fr"]);
$ ( "#locale") .change (Function () {
$ ( "#datepicker") .datepicker ( "Option",
$ .datepicker.regional [$ (This) .val ()]);
});
});
</ Script>
</ Head>
<Body>
<P> Date: <input type = "text" id = "datepicker"> & nbsp;
<Select id = "locale">
<Option value = "ar"> Arabic (& # 8235; (& # 1575; & # 1604; & # 1593; & # 1585; & # 1576; & # 1610; & # 1577; </ option>
<Option value = "zh-TW"> Chinese Traditional (& # 32321; & # 39636; & # 20013; & # 25991;) </ option>
<Option value = ""> English </ option>
<Option value = "fr" selected = "selected"> French (Fran & ccedil; ais) </ option>
<Option value = "he"> Hebrew (& # 8235; (& # 1506; & # 1489; & # 1512; & # 1497; & # 1514; </ option>
</ Select> </ p>
</ Body>
</ Html>
Populate another input box
Use altField and altFormat options whenever select a date, the date will be filled with a certain format in another input box. When this function by the date on the computer-friendly further processing, the user is presented with a user-friendly date.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - populate another input box </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
});
</ Script>
</ Head>
<Body>
<P> Date: <input type = "text" id = "datepicker"> & nbsp; <input type = "text" id = "alternate" size = "30"> </ p>
</ Body>
</ Html>
Limit the date range
By minDate and maxDate option limits the selectable date range. Set the start and end dates of the actual date (new Date (2009, 1 - 1, 26)), or a string of today's offset value (-20), or as a cycle and units ( '+ 1M + 10D '). If set to a string, use the 'D' for days, using a 'W' represents weeks, using 'M' for the month, using the 'Y' is the year.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - limit the date range </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({MinDate: -20, maxDate: "+ 1M + 10D"});
});
</ Script>
</ Head>
<Body>
<P> Date: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Select a date range
Select a date range to search.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - Select a date range </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#from") .datepicker ({
defaultDate: "+ 1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$ ( "#to") .datepicker ( "Option", "minDate", selectedDate);
}
});
$ ( "#to") .datepicker ({
defaultDate: "+ 1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$ ( "#from") .datepicker ( "Option", "maxDate", selectedDate);
}
});
});
</ Script>
</ Head>
<Body>
<Label for = "from"> from </ label>
<Input type = "text" id = "from" name = "from">
<Label for = "to"> to </ label>
<Input type = "text" id = "to" name = "to">
</ Body>
</ Html>
The Week of year show
datepicker can display the first few weeks of the year. The default is calculated in accordance with ISO 8601 Definition: week starting on Monday, the first week of the year that contains the first Thursday of. This means that in one year and may be another couple of days in the week.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI date picker (Datepicker) - display first few weeks of the year </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showWeek: true,
firstDay: 1
});
});
</ Script>
</ Head>
<Body>
<P> Date: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>