Blame view
examples/date-range.html
2.64 KB
5c8f10d65 start |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title>Pikaday - Date Range example</title> <meta name="author" content="David Bushell"> <link rel="stylesheet" href="../css/pikaday.css"> <link rel="stylesheet" href="../css/site.css"> </head> <body> <h1>Pikaday - Date Range example</h1> <p class="large">A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.</p> <p><a href="https://github.com/dbushell/Pikaday"><strong>Pikaday source on GitHub</strong></a></p> <div style="display: inline-block"> <label for="start">Start:</label> <br> <input type="text" id="start"> </div> <div style="display: inline-block"> <label for="end">End:</label> <br> <input type="text" id="end"> </div> <h2>What is this?</h2> <p>Since version 1.0 Pikaday is a stable and battle tested date-picker. Feel free to use it however you like but please report any bugs or feature requests to the <a href="https://github.com/dbushell/Pikaday/issues">GitHub issue tracker</a>, thanks!</p> <p class="small">Copyright © 2014 <a href="http://dbushell.com/">David Bushell</a> | BSD & MIT license</p> <script src="../pikaday.js"></script> <script> var startDate, endDate, updateStartDate = function() { startPicker.setStartRange(startDate); endPicker.setStartRange(startDate); endPicker.setMinDate(startDate); }, updateEndDate = function() { startPicker.setEndRange(endDate); startPicker.setMaxDate(endDate); endPicker.setEndRange(endDate); }, startPicker = new Pikaday({ field: document.getElementById('start'), minDate: new Date(), maxDate: new Date(2020, 12, 31), onSelect: function() { startDate = this.getDate(); updateStartDate(); } }), endPicker = new Pikaday({ field: document.getElementById('end'), minDate: new Date(), maxDate: new Date(2020, 12, 31), onSelect: function() { endDate = this.getDate(); updateEndDate(); } }), _startDate = startPicker.getDate(), _endDate = endPicker.getDate(); if (_startDate) { startDate = _startDate; updateStartDate(); } if (_endDate) { endDate = _endDate; updateEndDate(); } </script> </body> </html> |