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
	});