Datepicker
Select a date from the popup or inline calendar.
For more details about the datepicker widget, please view the API documentation Datepicker Widget.
Default function
The date picker (Datepicker) is bound to a standard form input field. Move focus to the input (click or use the tab key) to open an interactive calendar in a small overlay. Select a date, click anywhere on the page (the input box loses focus), or hit the Esc key to close. If a date is selected, the feedback is displayed as the value of input.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 默认功能</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>日期：<input type="text" id="datepicker"></p>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Animation
Use different animations when opening or closing the datepicker. Select an animation from the drop-down box and click in the input box to see its effect. You can use any of the three standard animations, or use any of the UI effects.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 动画</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>日期：<input type="text" id="datepicker" size="30"></p>
<p>动画：<br>
<select id="anim">
<option value="show">Show (默认)</option>
<option value="slideDown">滑下</option>
<option value="fadeIn">淡入</option>
<option value="blind">Blind (UI 百叶窗特效)</option>
<option value="bounce">Bounce (UI 反弹特效)</option>
<option value="clip">Clip (UI 剪辑特效)</option>
<option value="drop">Drop (UI 降落特效)</option>
<option value="fold">Fold (UI 折叠特效)</option>
<option value="slide">Slide (UI 滑动特效)</option>
<option value="">无</option>
</select>
</p>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Dates in other months
datepicker can display dates in other months, and these dates can also be set to be selectable.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 其他月份的日期</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>日期：<input type="text" id="datepicker"></p>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Show Button Bar
The showButtonPanel option with Boolean value displays a "Today" button for selecting today's date and closes the calendar Shows a "Done" button. By default, each button is enabled when the button bar is displayed, but buttons can be turned off through additional options. Button text is customizable.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 显示按钮栏</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>日期：<input type="text" id="datepicker"></p>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Inline display
The datepicker is displayed nested in the page, rather than displayed in an overlay. Just simply call .datepicker() on the div instead of the input.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 内联显示</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>
日期：<div id="datepicker"></div>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Display month & year menu
Display drop-down boxes for month and year instead of static month/year titles, making it easier to navigate over large time spans. Just add the boolean changeMonth and changeYear options.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 显示月份 & 年份菜单</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>日期：<input type="text" id="datepicker"></p>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Display multiple months
Set the numberOfMonths option to an integer 2, or an integer greater than 2, in a datepicker Display multiple months.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 显示多个月份</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>日期：<input type="text" id="datepicker"></p>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Format Date
Display date feedback in various ways. Select a date format from the drop-down box, then click and select a date in the input box to see the date display in the selected format.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 格式化日期</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>日期：<input type="text" id="datepicker" size="30"></p>
<p>格式选项：<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>Run Instance»
Click the "Run Instance" button to view the online instance
Icon Trigger
Click the icon next to the input box to display the datepicker. Sets the datepicker to open on focus (default behavior), on icon click, or on focus/icon click.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 图标触发器</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>日期：<input type="text" id="datepicker"></p>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Localized Calendar
Localized datepicker calendar language and format (default is English/Western format). datepicker includes built-in support for languages that read from right to left, such as Arabic and Hebrew.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 本地化日历</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>日期：<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>Run instance »
Click the "Run instance" button to view the online instance
Fill another input box
Use the altField and altFormat options whenever you select a date, Another input box will be filled with a date in a certain format. This feature is further processed by computer-friendly dates to present a user-friendly date to the user.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 填充另一个输入框</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>日期：<input type="text" id="datepicker"> <input type="text" id="alternate" size="30"></p>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Limit Date Range
Limit the selectable date range with the minDate and maxDate options. Set the start and end dates to actual dates (new Date(2009, 1 - 1, 26)), or to a numerical offset from today (-20), or to a string of period and unit ('+1M +10D '). If set to a string, use 'D' for day, 'W' for week, 'M' for month, and 'Y' for year.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 限制日期范围</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>日期：<input type="text" id="datepicker"></p>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Select a date range
Select the date range to search.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 选择一个日期范围</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">从</label>
<input type="text" id="from" name="from">
<label for="to">到</label>
<input type="text" id="to" name="to">
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Display the number of weeks in the year
datepicker can display the number of weeks in the year. The default calculation is based on the ISO 8601 definition: each week starts on Monday, and the first week of each year contains the first Thursday of that year. This means that some days in one year may belong to weeks in another year.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 显示一年中的第几周</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>日期：<input type="text" id="datepicker"></p>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
