01.<head>
02.
03. <meta charset="utf-8">
04. <meta name="viewport" content="width=device-width, initial-scale=1">
05. <title>jQuery UI Datepicker - Select a Date Range</title>
06. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
07. <link rel="stylesheet" href="/resources/demos/style.css">
10. <script>
11. $( function() {
12. var dateFormat = "yy-mm-dd",
13. from = $( "#start" )
14. .datepicker({
15. defaultDate: "+1w",
16. changeMonth: true,
17. dateFormat : 'yy-mm-dd',
18. numberOfMonths: 1
19. })
20. .on( "change", function() {
21. to.datepicker( "option", "minDate", getDate( this ) );
22. }),
23. to = $( "#finished" ).datepicker({
24. defaultDate: "+1w",
25. changeMonth: true,
26. dateFormat : 'yy-mm-dd',
27. numberOfMonths: 1
28. })
29. .on( "change", function() {
30. from.datepicker( "option", "maxDate", getDate( this ) );
31. });
32.
33. function getDate( element ) {
34. var date;
35. try {
36. date = $.datepicker.parseDate( dateFormat, element.value );
37. } catch( error ) {
38. date = null;
39. }
40.
41. return date;
42. }
43. } );
44. </script>
45.
46.</head>
47.
48.<body>
49.<form id="form2" name="form2" method="post" action="add.php">
50. <table width="500" border="0" align="center">
51. <tr>
52. <td height="35">From</td>
53. <td align="center">:</td>
54. <td><label for="textfield5"></label>
55. <input type="text" name="start" id="start" /></td>
56. </tr>
57. <tr>
58. <td height="40">To</td>
59. <td align="center">:</td>
60. <td><label for="textfield6"></label>
61. <input type="text" name="finished" id="finished" /></td>
62. </tr>
63. </table>
64.</from>
