Clean jQuery Date and Time Picker Plugin - datetimepicker

Clean jQuery Date and Time Picker Plugin - datetimepicker
File Size: 217 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

datetimepicker is a jQuery plugin that popups a simple and clean date & time picker interface when an input field on focus.

Features:

  • Simple and easy-to-use.
  • Numerous of options to custom the time & date picker.
  • Supports 3 languages: en(English), de(German) and ru(russian).
  • Date input mask.
  • Callback events support.
  • Inline mode support. Always display the date & time picker without having to click the input field.

See also:

How to use it:

1. Load the necessary jQuery datetimepicker stylesheet in your document.

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/>

2. Create an text input field that will be turned into an inline date & time picker.

<input type="text" id="demo"/>

3. Load the jQuery library and jQuery datetimepicker plugin at the bottom of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.datetimepicker.js"></script>

4. Just call the plugin and you're done.

<script>
$('#demo').datetimepicker({
inline:true,
});
</script>

5. All the default options.

<script>
$('#demo').datetimepicker({
value:'',
lang:'en',

format:	'Y/m/d H:i',
formatTime:	'H:i',
formatDate:	'Y/m/d',

startDate:	false, // new Date(), '1986/12/08', '-1970/01/05','-1970/01/05', 

step:60,
monthChangeSpinner:true,
closeOnDateSelect:false,
closeOnWithoutClick:true,
closeOnInputClick: true,

timepicker:true,
datepicker:true,

defaultTime:false,// use formatTime format (ex. '10:00' for formatTime:	'H:i')
defaultDate:false, // use formatDate format (ex new Date() or '1986/12/08' or '-1970/01/05' or '-1970/01/05')

minDate:false,
maxDate:false,
minTime:false,
maxTime:false,

allowTimes:[],
opened:false,
initTime:true,
inline:false,

onSelectDate:function() {},
onSelectTime:function() {},
onChangeMonth:function() {},
onChangeDateTime:function() {},
onShow:function() {},
onClose:function() {},
onGenerate:function() {},

withoutCopyright:true,

inverseButton:false,
hours12:false,
next:	'xdsoft_next',
prev : 'xdsoft_prev',
dayOfWeekStart:0,

timeHeightInTimePicker:25,
timepickerScrollbar:true,

todayButton:true, // 2.1.0
defaultSelect:true, // 2.1.0

scrollMonth:true,
scrollTime:true,
scrollInput:true,

lazyInit:false,

mask:false,
validateOnBlur:true,
allowBlank:true,

yearStart:1950,
yearEnd:2050,

style:'',
id:'',

fixed: false,

roundTime:'round', // ceil, floor
className:'',

weekends	: 	[],
yearOffset:0,
beforeShowDay: null
});
</script>

6. Public methods.

// show datetime picker
$('#input').datetimepicker('show');

// hide datetime picker
$('#input').datetimepicker('hide');

// toggle datetime picker
$('#input').datetimepicker('toggle');

// destroy datetime picker
$('#input').datetimepicker('destroy');

// reset datetime picker's value
$('#input').datetimepicker('reset');

// validate datetime picker's value
$('#input').datetimepicker(validate)

// set datetime picker's option
$('#input').datetimepicker('setOptions', {...});

// get current datetimepicker's value
$('#input').datetimepicker('getValue')

Change logs:

2017-05-12

  • Fix for picker jumping to the next month
  • Fix for currentTime can't be null for inline mode

2016-05-20

  • v2.5.4

2016-04-01

  • v2.5.3: Fix devDependencies with concat-cli

2016-02-25

  • v2.5.1

2016-02-19

  • v2.4.9: Added getValue method. 

2016-02-17

  • v2.4.7

2015-10-01

  • Fixed: Custom allowed times; options within selected hour all get selected

2015-09-21

  • Date format. Support i18n + D, l, M, F php style format characters.

2015-08-24

  • support mixed array for the values of highlightedPeriods

2015-08-19

  • Add rtl layout support
  • Allow maxDate in past or minDate in future

2015-07-03

  • v2.4.5 + bugfixes

2015-06-23

  • Prevents default selection of Save Selected as submit button

2015-06-22

  • Added opposite of minTime and maxTime, disabledMinTime and disabledMaxTime
  • Added 2 new properties, to make a period of time disabled by setting disabledMinTime and disabledMaxTime.

2015-05-08

  • Use proper class names when options.weeks and options.className are both set. When options.weeks is true, and options.className is set, the result is that both are concatenated together without a space to separate them.

2015-04-30

  • Fixed: today button dbl click didn't validate date

2015-04-22

  • Fix bug with minDate option and mistake Date.parse insted Date.parseDate

2015-04-10

  • added css elements to highlight dates
  • added options to highlight individual dates or periods

2015-02-26

  • Fix to prevent times such as '12:60' instead of '13:00' when using an input of 'xx:45 - xx:59'
  • Added botton 'Save Selected'. Option: showApplyButton.
  • Corrected border botton 'Save Selected'.

2015-02-12

  • Create several datetimepickers with class selector
  • Do not check whether input is visible
  • Fixed Runtime error

v2.4.1 (2014-11-16)

  • added several languages

v2.3.8 (2014-10-23)

  • Fix behavior under iPad and iPhone

v2.3.5 (2014-09-24)

  • Fix bug with moment.js
  • Add dark theme

2014-09-24

  • Made css opacities IE8 compatible

v2.3.4 (2014-07-09)

  • fixed bug with dayOfWeekStart

v2.3.3 (2014-07-09)

  • added ukrainian lang

v2.3.2 (2014-07-09)

  • added options: defaultTime and defaultDate

v2.3.1 (2014-07-09)

  • fix bug in ie8

v2.3.0 (2014-06-30)

  • Fix list issue

v2.2.9 (2014-06-11)

  •  Now in minDate,maxDate,minTime and maxTime can put Date object

v2.2.8 (2014-05-23)

  • fixed for work in ie7, fixed bug with inline mode
  • Added in prototype Date method getCountDaysInMonth for less depend with date-parse library

v2.2.6 (2014-05-22)

  • Fix bug with inline scroll

v2.2.5 (2014-04-06)

  • updates

v2.2.4 (2014-03-27)

  • updates

v2.2.3 (2014-03-25)

  • updates

v2.1.6 (2014-01-14)

  • Fix button style for lower ie8
  • Fix style for ie7

v2.1.5 (2014-01-09)

  • Fix CSS bug

v2.1.0 (2013-12-24)

  • Add dblclick handler to today button

v2.0.6 (2013-12-13)

  • Fix bug with options.step>60

v2.0.6 (2013-12-12)

  • Fix round time

v2.0.4 (2013-12-11)

  • Fix doc.

v2.0.3 (2013-12-10)

v2.0.1 (2013-12-05)

v2.0.0 (2013-12-04)

  • update to the latest version.

v1.1.0 (2013-11-29)

  • Style fixed

v1.0.10 (2013-11-28)

  • updated to the latest version.
  • updated the demo page.

v1.0.8 (2013-11-19)

  • updated to the latest version.

v1.0.5 (2013-11-15)

  • add scrollbar

v1.0.4 (2013-11-07)

  • added button trigger.

This awesome jQuery plugin is developed by xdan. For more Advanced Usages, please check the demo page or visit the official website.