jQuery UI Example - Datepicker
Select a date from a popup or inline calendar.
For more details about the datepicker widget, please refer to the API documentation Datepicker Widget.
Default Functionality
The Datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default Functionality</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 opening or closing the datepicker. Select an animation from the dropdown, then click in the input to see its effect. You can use any of the three standard animations or any of the UI effects.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Animation</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 Down</option>
<option value="fadeIn">Fade In</option>
<option value="blind">Blind (UI Blind Effect)</option>
<option value="bounce">Bounce (UI Bounce Effect)</option>
<option value="clip">Clip (UI Clip Effect)</option>
<option value="drop">Drop (UI Drop Effect)</option>
<option value="fold">Fold (UI Fold Effect)</option>
<option value="slide">Slide (UI Slide Effect)</option>
<option value="">None</option>
</select>
</p>
</body>
</html>
Dates from Other Months
The datepicker can display dates from other months, which can also be set as selectable.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Dates from Other 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({
showOtherMonths: true,
selectOtherMonths: true
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Display Button Bar
By setting the showButtonPanel option to a boolean value, a "Today" button is displayed to select the current date, and a "Done" button to close the calendar. By default, each button is enabled when the button bar is displayed, but the buttons can be turned off with additional options. The button text can be customized.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 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>
Inline Display
The datepicker is embedded within the page rather than displayed in an overlay. Simply call .datepicker() on a div, not on an input.
<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 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>
[View Demo](../try/tryit.php?filename=jqueryui-example-datepicker-inline)
## Display Month & Year Menus
Display dropdowns for month and year instead of static month/year headers, making it easier to navigate through large time spans. Add the boolean `changeMonth` and `changeYear` options.
<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Display Month & Year Menus</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>
[View Demo](../try/tryit.php?filename=jqueryui-example-datepicker-dropdown-month-year)
## Display Multiple Months
Set the `numberOfMonths` option to an integer of 2, or more, to display multiple months in a single datepicker.
<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 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">
```html
<script>
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Formatting Dates
Display date feedback in various ways. Select a date format from the dropdown, then click in the input and pick a date to see it in that format.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Formatting Dates</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="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>
</body>
</html>
Icon Trigger
Display the datepicker when clicking on the icon next to the input field. Set the datepicker to open on focus (default behavior), or on icon click, or on both focus and icon click.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Icon Trigger</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
Localize the datepicker calendar language and format (default is English / Western format). The datepicker includes built-in support for languages that read from right to left, such as Arabic and Hebrew.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 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">
<select id="locale">
<option value="ar">Arabic (‫(العربية</option>
<option value="zh-TW">Chinese Traditional (繁體中文)</option>
<option value="">English</option>
<option value="fr" selected="selected">French (Français)</option>
<option value="he">Hebrew (‫(עברית</option>
</select></p>
</body>
</html>
Populate Another Input Field
Using the altField and altFormat options, whenever a date is selected, it populates another input field with a date formatted in a user-friendly way, after processing the computer-friendly date.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Populate Another Input Field</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"> <input type="text" id="alternate" size="30"></p>
</body>
</html>
Restrict Date Range
Limit the range of selectable dates with the minDate and maxDate options. Set the start and end dates to actual dates (new Date(2009, 1 - 1, 26)), or to an offset from today (-20), or to a string of periods and units ('+1M +10D'). If set as a string, use 'D' for days, 'W' for weeks, 'M' for months, and 'Y' for years.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Restrict 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 the date range to search.
<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 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>
[View Demo](../try/tryit.php?filename=jqueryui-example-datepicker-date-range)
## Display Week of the Year
The datepicker can display the week of the year. The default calculation follows the ISO 8601 definition: weeks start on Monday and the first week of the year contains the first Thursday of the year. This means that some days of the year might belong to the weeks of another year.
<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Display Week 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> ```