Snippets
Like many coders, I have a code snippets that I use all the time. Many are attached to keyboard shortcuts, but sometimes the snippet involves more that a line or two, and it's useful to have somewhere to store these.
Semantic-UI-Calendar
Examples here: https://jsbin.com/ruqakehefa/1/edit?html,js,output
https://github.com/mdehoog/Semantic-UI-Calendar
Notes to self: Don't forget the 'ui' bit in the field div!
Add 'calendar' as a class to the form, and 'dateselector' or similar to the field div, and it should just work.
Match the format of the default value using F d, Y
Parse the incoming date using date("Y-m-d", strtotime(posted_value));
More on handling the posted date...
if (isset($_POST["date_as_string"])) { if (isset($_POST["time_as_string"])) { $date_as_date=date("Y-m-d H:i:s", strtotime(trim($_POST["date_as_string"]." ".$_POST["time_as_string"]))); } else { $date_as_date=date("Y-m-d", strtotime(trim($_POST["date_as_string"]))); } } else { $date_as_date=date("Y-m-d"); } $date_formated_for_calendar_form=date("F j, Y", strtotime($date)); $datetime_formated_for_calendar_form=date("F j, Y H:i A", strtotime($date));When including via an Ajax style call, the JS needs to be included too, e.g.:
<script> $(document).ready(function() { $("#textarea").focus(); autosize($("#textarea")); $('.date_and_time_selector').calendar(); $('.date_selector').calendar({ type: 'date' }); }); </script>
Time
This took a while to find:// time selector var minDateTime = new Date(); var maxTime = new Date(); minDateTime.setDate(minDateTime.getDate()) // 1 minDateTime.setHours(12); maxTime.setHours(19); $('.timeselector').calendar({ type: 'time', minDate: minDateTime, maxDate: maxTime });