Author: | colinmcintyre |
---|---|
Views Total: | 3,640 views |
Official Page: | Go to website |
Last Update: | July 19, 2017 |
License: | MIT |
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:'«',//<< 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 });