## jQuery UI

# Datepicker

Select a date from a popup or inline calendar

## Examples

- Default functionality
- Animations
- Dates in other months
- Display button bar
- Display inline
- Display month & year menus
- Display multiple months
- Format date
- Icon trigger
- Localize calendar
- Populate alternate field
- Restrict date range
- Select a Date Range
- Show week of the year

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.

view source

1 2 3 4 5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    <!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.11.4/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  <link rel="stylesheet" href="/resources/demos/style.css">  <script>  $(function() {    $( "#datepicker" ).datepicker();  });  </script></head><body> <p>Date: <input type="text" id="datepicker"></p>  </body></html>

Want to learn more about the datepicker widget? Check out the API documentation.