Home > Developer > JavaScript
Datepicker provided by jQuery UI is a UI component with very flexible configuration. You can configure the format and language of the displayed date, restrict the date range and add button that can be selected.
The basic usage is as follows:
1 <! Doctype html>
2
3
4 <meta charset = "UTF-8"/>
5 <title> jQuery UI Demos </title>
6 <link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css"/>
7 <script src = "scripts/jquery-1.9.1.js"> </script>
8 <script src = "scripts/jquery-ui-1.10.1.custom.js"> </script>
9 <script>
10 $ (function (){
11 $ ("# datepicker"). datepicker ();
12 });
13 </script>
14
15 <body>
16
17 <p> Date: <input type = "text" id = "datepicker"/> </p>
18 </body>
19
You only need to call the constructor of the selected HTML element.
Use animated effects
The DatePicker component allows you to display and hide different animation effects. The following uses a list box to select the animation effects supported by DatePicker.
1 <! Doctype html>
2
3
4 <meta charset = "UTF-8"/>
5 <title> jQuery UI Demos </title>
6 <link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css"/>
7 <script src = "scripts/jquery-1.9.1.js"> </script>
8 <script src = "scripts/jquery-ui-1.10.1.custom.js"> </script>
9 <script>
10 $ (function (){
11 $ ("# datepicker"). datepicker ();
12 $ ("# anim"). change (function (){
13 $ ("# datepicker"). datepicker ("option ",
14 "showAnim", $ (this). val ());
15 });
16 });
17 </script>
18
19 <body>
20
21 <p> Date:
22 <input type = "text" id = "datepicker" size = "30"/> </p>
23
24 <p>
25 Animations: <br/>
26 <select id = "anim">
27 <option value = "show"> Show (default) </option>
28 <option value = "slideDown"> Slide down </option>
29 <option value = "fadeIn"> Fade in </option>
30 <option value = "blind"> Blind (UI Effect) </option>
31 <option value = "bounce"> Bounce (UI Effect) </option>
32 <option value = "clip"> Clip (UI Effect) </option>
33 <option value = "drop"> Drop (UI Effect) </option>
34 <option value = "fold"> Fold (UI Effect) </option>
35 <option value = "slide"> Slide (UI Effect) </option>
36 <option value = ""> None </option>
37 </select>
38 </p>
39
40
41 </body>
42
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
