tinyDatePicker and calendar

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. This is not only a picker but a set of modules that can be used to build a date/agenda based app. The flexibility of this tool makes integration of bootstrap or other frameworks easy.

##Demo See demos at:

• dematte.at/tinyDatePicker
• or a clean version at dematte.at/tinyDatePicker/themes/naked
• extended clean version in white dematte.at/tinyDatePicker/themes/white

Usage

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

jqDatePicker.min.js (the jQuery version) holds all necessary files such as calendar.js, datePicker.js and jqDatePicker.js. So, it is not needed to include anything else than this file (except some CSS that makes your datePicker look nice).<br> If you need to debug things for development, you can also use calendar.js, the month/week rendering module, datePicker.js, the javascript UI and picker module and jqDatePicker.js, the jQuery wrapper separately.

<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="datePicker.js"></script>
<script type="text/javascript" src="jqDatePicker.js"></script>
<script type="text/javascript">
    $('.date').datePicker([options]);
</script>

If you don't want a jQuery dependency just use datePicker.min.js (the javascript version):

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

or for debugging:

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

datePicker.js doesn't render anything or installs event listeners for the UI and doesn't initialize Caledar until you first use it (focusing / clicking an input field) to save memory and keep markup as small as possible.

The standard date/time formats datePicker works with is: 'YYYY-MM-DD HH:MM:SS AM' whereas -DD is optional if no time is set and :SS, AP/PM and the time as such is also optional. It is possible to only set the time though too. Then datePicker works as a time picker only. See also demo on how to use data attributes in input fields to pick up some options from there.

See the Demos at /demo/index.html or dematte.at/tinyDatePicker for more examples on how calendar.js and datePicker.js can be used. You can also build a whole agenda app with only a fiew options added...

Themes

calendar and datePicker are, because of their options, very flexible in how to render markup so that it is very easy to change the look and feel and the grade of information you want to provide in your calendars. Changing from a table-based month view to a div-based view (see month.js) is that easy and you're also free in chooseing, changing and adding your own class names and markup.

The CSS in the demo is not very useful (quick and dirty), so you might want to make your own anyhow. (demo/month.css holds some rendering of the common month rendering incl. events etc., demo/datePicker.css is the CSS for the UI of datePicker excluding the months). I prepared a simple, unstyled version in ./naked/index.html (including CSS and days-of-week rendering) to show you a clean starting point for your styling.

So, feel free to participate and create some nice themes and let me know where they are: I'll publish the links to your work right here.

• See "white" simple demo at ./themes/white/index.html or dematte.at/tinyDatePicker/themes/white/

AMD / CommonJS wrapper

tinyDatePicker supports AMD and CommonJS import in all, the minified versions and the single files (calendar.js, datePicker.js and jqDatePicker.js).

// example for requirejs configuration
requirejs.config({
    baseUrl: 'scripts',
    paths: {
        jquery: 'lib/jquery-2.2.1.min'
    },
    shim: {
        'datePicker': {
            deps: [ 'jquery' ],
            exports: 'jQuery.fn.datePicker'
        }
    }
});

// then use tinyDatePicker in your module...
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery', 'jqDatePicker'], function (jQuery) {
            return factory(root, jQuery);
        });
    } else {
        factory(root, root.jQuery);
    }
}(this, function(window, $){
    $('.date').datePicker(options);
}));

jqDatePicker.js

jqDatePicker.js is a jQuery plugin (actually just a wrapper for datePicker.js) and uses an instance of Calendar (from calendar.js) for rendering months and weeks. It passes the options to that instance, so some values might be the same when inspecting...

$('.date').datePicker({
    // the datePicker options
    useCache: false, // disables calendar's cash for use with ranges
    closeOnSelect: true // weather the picker auto closes after picking a date or not
    elements: '.date', // the selector for the input fields using datePicker
    body: document.body, // element the picker should be depended on
    pickerAttribute: 'data-picker', // attribute used for internal date transfer
    datePickerClass: 'date-picker', // class name of the datePicker wrapper
    selectedDayClass: 'selected-day', // class name for date representing the value of input field
    disabledClass: 'disabled', // class name for disabled events
    initCallback: function(elements) {}, // callback used right after datePicker is instantiated (no calendar available)
    // the following callbacks hold standard routines that can be overwritten
    renderCallback: function(container, element, toggled) {}, // every time the picker gets toggled or redrawn (by UI action)
    renderValue: function(container, element, value) {}, // when date is picked, the value needs to be transferred to input
    readValue: function(element) {}, // when toggling the datePicker, this will pick up the value of the input field
    header: 'some HTML', // the HTML rendered before the display of the month. The following strings will be replaced:
        // {{disable-prev}}, {{prev}}, {{disable-next}}, {{next}}, {{day}}, {{month}}, {{months}}, {{year}}, {{years}}
        // look at the code (original option HTML) and it's clear what all those placeholders mean
    nextLabel: 'Next month', // text written instead of {{next}}
    prevLabel: 'Previous month', // text written instead of {{prev}}
    minDate: '1969-01-01', // standard minimal displayable date
    maxDate: '2050-12-31', // standard maximal displayable date
    minDateAttribute: 'data-mindate', // attribute that could hold minimal displayable date data
    maxDateAttribute: 'data-maxdate', // attribute that could hold maximal displayable date data
    // classes for event listeners (click)
    nextButtonClass: 'dp-next', // next month button class name
    prevButtonClass: 'dp-prev', // previous month button class name
    selectYearClass: 'dp-select-year', // select year element class name
    selectMonthClass: 'dp-select-month', // select month element class name
    footer:'some HTML', // the HTML rendered after the display of the month. The following strings will be replaced:
        // {{hour}}, {{hours}}, {{minute}}, {{minutes}}, {{second}}, {{seconds}}, {{am-pm}}, {{am-pms}}
    timeFormat: '', // can be HH:MM:SS AM, HH:MM AM, HH:MM:SS or HH:MM 
    timeFormatAttribute:'data-timeformat', // attribute holding the timeFormat information if different from standard
    doAMPM: false, // switch for standard AM / PM rendering
    minuteSteps: 5, // steps of minutes displayed as options in {{minutes}}
    secondSteps: 10, // steps of seconds displayed as options in {{seconds}}
    AMPM: ['AM', 'PM'], // rendered strings in picker options and input fields
    // classes for event listeners (change of selects)
    selectHourClass: 'dp-select-hour', // class name of select for hours
    selectMinuteClass: 'dp-select-minute', // class name of select for minutes
    selectSecondClass: 'dp-select-second', // class name of select for seconds
    selectAMPMClass: 'dp-select-am-pm', // class name of select for AM/PM
    rangeStartAttribute: 'data-from', // attribute holding the name of the other input in a range collective (either rangeEndAttribute or name attribute)
    rangeEndAttribute: 'data-to' // attribute holding the name of the other input in a range collective

    // the Calendar options
    picker: {}, // reference to instance of datePicker
    sundayBased: true, // renders weeks starting with Monday or Sunday
    renderWeekNo: false, // enables / disables rendering of week numbers
    renderDaysOfWeek: true, // depends also on template.start. {{days}} has to be returned as well
    equalHight: false, // renders extra days in next month to keep heights (row count) of all months the same
    useCache: true, // month that has been rendered will be cached on never be calculated again (also events)
    months: ['Jan', ...], // array of strings of all months in a year
    weekDays: ['Su', ...], // array of strings of week days
    workingDays: [1, 2, 3, 4, 5], // Date() based; 0 = Sun; others will be signed as week-end
    events: [], // see below for more information,
    template: { // holds all template based elements:
        start: function()