Highly Configurable Date Time Picker With Pure JavaScript

Preview:

Description:

Just another date and time picker JavaScript library for picking dates and times in an effective way.

Features:

• 7 built-in themes.
• Also can be used as a time picker.
• AJAX enabled.
• Custom toggle element.
• Custom time format.
• Min/max dates.
• Keyboard interactions.

Basic usage:

Load the base and theme stylesheet files in the document.

<link href="css/datetimepicker.base.css" rel="stylesheet">
<link href="css/datetimepicker.themes.css" rel="stylesheet">
<-- OR -->
<link href="css/datetimepicker.css" rel="stylesheet">

Load the main JavaScript file at the end of the document.

<script src="js/datetimepicker.js"></script>

Create an input field for the datetime picker.

<input type="text" class="demo">

Attach the datetime picker on the input field.

var dtp = new DateTimePicker('.demo');

Possible options to customize the datetime picker.

var dtp = new DateTimePicker('.demo',{
    pickerClass: 'datetimepicker',
    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    daySuffix:["th", "st", "nd", "rd"],
    nextText:'»',//>>
    prevText:'&laquo;',//<<
    dayShort: 2, // Length of day-abbreviations
    monthShort: 3, // Length of month-abbreviations
    startDay: 1, // Can be 0 (Sunday) through 6 (Saturday).
    timePicker: false, // time picker mode
    timePickerOnly: false,           
    timePickerFormat:24,
    minuteIncrement:1,
    yearPicker: true,
    format: 'd/m/Y',
    allowEmpty: false,
    allowInput: false,
    startView: 'month', 
    positionOffset: { x: 0, y: 0 },
    minDate: null,
    maxDate: null,  
    inputOutputFormat: 'T', 
    startDate:null, // The date the picker is to start at. 
    debug: false,
    toggleElementsOnly:true,
    toggleElements: null
});

Callback functions.

var dtp = new DateTimePicker('.demo',{
    beforeShow: null,
    onClose: null,
    onSelect: null,
    onChange: null
});