DateTimePicker jQuery plugin - usage examples and docs

This is a jQuery plugin which allows to add date and time picker functionality to the text field with just one line of JavaScript.

Benefits

funtionality can be initialised with one line of Javascript
mobile-like user interface which many users are familiar with
can be used as timepicker-only or datepicker-only
variuos date and time formats available
easy localisation
very simple day choice interface - incredibly useful when you are expecting date input from narrow date range
easily styleable
accessible - supports keyboard tabbing very well

This plugin relies on

jQuery JavaScript library
Moment.js JavaScript library

Getting started

Include jQuery and Moment.js libraries. Both files are provided in the assets folder.

<script src="assets/jquery-1.9.0.min.js"></script>
<script src="assets/moment.min.js"></script>

Include Date Time Picker plugin files.

<link href="date-time-picker/date-time-picker.css" rel="stylesheet" >
<script src="date-time-picker/date-time-picker.js"></script>

Create a text input field in the body section of your page, give it a preferred classname:

Example:
```
<input type="text" name="some_field_name" class="some_classname" />
```
In order to turn it into a date time picker, add a short script provided below.
```
<script>
    $(document).ready(function(){
        $('.some_classname').dateTimePicker();
    });
</script>
```
Please note: instead of some_classname use the classname you applied to your text input field.

Basic usage example - minimum code

Basic day choice and timepicker, date and time default to current

$('.example1').dateTimePicker();

Timepicker only

$('.example2').dateTimePicker({
    'dayFormat': '' 
});

Datepicker only

$('.example3').dateTimePicker({
    'hourFormat': '',
    'minuteFormat': ''
});

Changing date format

 $('.example4').dateTimePicker({
    'dayFormat': 'D MMM, YY' 
});

Date formatting is reliant on Moment.js library, which provides lots of various formats. I have listed below only the formats that are relevant to this plugin and tested by me. This set of formats should normally cover all formatting needs.

Possible year values:

YYYY - full year, 4 digits, e.g. 2013
YY - last 2 digits, e.g. 13

Possible month values:

MMMM - month as full word, e.g. January
MMM - month as shortened word, eg. Jan
MM - month as 2 digits, leading zero included where necessary, e.g. 01
M - month as 1 or 2 digits, no leading zeros, e.g. 1

Possible day values:

DD - day as 2 digits, leading zero included where necessary, e.g. 01
D - day as 1 or 2 digits, no leading zeros, e.g. 1

Adding AM/PM

 $('.example5').dateTimePicker({
    'amFormat': 'A' 
});

You may set 'amFormat' to lowersace 'a', in order to get lowercase 'am/pm' as a result.

Disallowing past

Disables 'down' arrows only when clicking them would cause past date/time to be selected

 $('.example6').dateTimePicker({
    no-past': true
});

Changing step

You can override the incrementation/decrementation of each part, e.g. you may need to increase minutes by 15 on each click.

 $('.example7').dateTimePicker({
    'minuteStep': 15,
    'hourStep': 2,
    'dayStep': 7
});

Popup positioning

If you prefer the date/time popup to appear above the text field, you can configure this on initialisation.

 $('.example8').dateTimePicker({
    'position': 'top'
});

Namespacing and styling

All elements of date time picker are namespaced with 'datetimepicker-' classname prefix, however, you may prefer to add some custom classnames. See the reference of relevant options below:

wrapperClass - add custom classname to the whole date time picker container
buttonClass - add custom classname to all buttons
buttonUp - replace up caret with custom HTML
buttonDown - replace down caret with custom HTML

$('.example9').dateTimePicker({
    'wrapperClass': 'example9-wrapper',
    'buttonClass': 'example9-btn',
    'buttonUp': '<span>+</spa>',
    'buttonDown': '<span>&#8211;</span>'
});

Setting date/time different to now

By default current date/time is chosen, but you may change this by simply setting the value of your text field. The specified value should be in a valid format. Example:

HTML:
<input type="text" value="15 June 2012 23:30" class="example10" name="datetime">

SCRIPT:
$('.example10').dateTimePicker();

Preventing automatic field population on load

You may need this option if you do not want any default value to be assigned to the date/time text field on page load.

$('.example11').dateTimePicker({
    'emptyOnLoad': true
});

Clear button

You can remove the button completely or replace with custom HTML, possibly an image

$('.example12').dateTimePicker({
    'clearButton': ''
});

Localisation

You can override the default English month long and short names with any other words, e.g. use German month manes

$('.example13').dateTimePicker({
    'monthNames': [
        "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli",
        "August", "September", "Oktober", "November", "Dezember"
    ],
    'month-short-names': [
        "Jan", "Feb", "März", "Apr", "Mai", "Juni",
        "Juli", "Aug", "Sept", "Okt", "Nov", "Dez"
    ]
});