Tiny date/time picker

Looking for tiny foot print, fast, scaleable, flexible and pluggable...
This 5KB (gZip; 12.5KB minified) small date/time picker provides a lot of hooks for developers to write calendars, agendas, booking systems, plugins, etc. (See demos below in Demo). The flexibility of this tool makes integration of bootstrap or other frameworks easy.

Demo

On all elements with className 'date':

new DatePicker('.date', options);

$('.date').datePicker(options);

Range:
Range (name based):
Range with marked range:

Different month/year selector:

Remote button and hidden input:

... and split inputs: - -

Empty time only picker:

TIP: The values don't have to be stored in hidden variables, they can also be received and stored in local storage or javascript variables (inspect window.dates), or let an MVC framework do the job:

Simpler markup (DIV based):

Today, clear and close button. Stays open on select:

Find a clean demos here: ./themes/white/index.html or ./themes/naked/index.html

Usage

For the plain javascript version you need the following:

<script type="text/javascript" src="datePicker.min.js">
<script type="text/javascript">
	var myDP = new DatePicker('.date', options); // first arg. can also be ElementCollection/Array or $()
</script>

...or for the jQuery version:

<script type="text/javascript" src="jqDatePicker.min.js">
<script type="text/javascript">
	$('.color').datePicker(options); // that's it
</script>

For more information on API, callbacks, etc. see: github.com/PitPik/tinyDatePicker

calendar.js

Calendar is a tiny module (1.7KB gZip; 3.57KB minified), used in datePicker.js, that can render a month or only a week. It has a lot of options and callbacks that make rendering of complex data easy. See the following demos for what can be done with Calendar: