Last active
March 8, 2019 15:28
-
-
Save JamoCA/6894661 to your computer and use it in GitHub Desktop.
Quick demo of Pikaday working with Date.js. Enter "tomorrow" or "next year" or "12/25" into the date field and Date.js takes over to ensure that the value is a valid date.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Pikaday - jQuery + Date.js Example</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <link rel="stylesheet" href="https://dbushell.github.io/Pikaday/css/pikaday.css"> | |
| <script src="https://dbushell.github.io/Pikaday/pikaday.js"></script> | |
| <script src="https://dbushell.github.io/Pikaday/plugins/pikaday.jquery.js"></script> | |
| <script> | |
| $(function(){ | |
| $('.autoDateCal').pikaday({ | |
| format: 'M/d/yyyy', | |
| defaultDate: 'invalid date' | |
| }).change(function() { | |
| var d = Date.parse($(this).val()); | |
| if (d !== null) { | |
| $(this).val(d.toString('M/d/yyyy')); | |
| } else { $(this).val(''); } | |
| }); | |
| $('input.autoDate').change(function() { | |
| var d = Date.parse($(this).val()); | |
| if (d !== null) { | |
| $(this).val(d.toString('M/d/yyyy')); | |
| } else { $(this).val(''); } | |
| }); | |
| $('input.autoDateTime').change(function() { | |
| var d = $(this).val(); | |
| if (Date.parse(d) !== null) { | |
| $(this).val(Date.parse(d).toString('M/d/yyyy h:mm tt')); | |
| } else { $(this).val(''); } | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Pikaday - jQuery + Date.js Example</h1> | |
| <h2>Click to select date</h2> | |
| <input type="text" name="TheDateCal" class="autoDateCal" placeholder="Pick a date" size="10"><br> | |
| <h2>Enter any date string (now, next month, 1/2019, etc) and exit the field</h2> | |
| <input type="text" name="TheDate" class="autoDate" placeholder="m/d/yyyy" size="10"><br> | |
| <h2>Enter any date/time string (now, next month, 1/2009, 15:00, etc) and exit the field</h2> | |
| <input type="text" name="TheDateTime" class="autoDateTime" placeholder="m/d/yyyy hh:mm tt" size="20"> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment