jQuery Date and Time Picker Plugin - Simple Datetimepicker

jQuery Date and Time Picker Plugin - Simple Datetimepicker
File Size: 73.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2015

Simple Datetimepicker is a jQuery plugin that makes it easy to create Date and Time Picker in different styles for your project.

Basic Usage:

1. Include jQuery library in the head section of your html page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. Include jquery.simple-dtpicker.js and jquery.simple-dtpicker.css after jQuery Library

<script type="text/javascript" src="jquery.simple-dtpicker.js"></script>
<link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" />


<div id="date_picker"></div>

4. Call the plugin


5. Options available.


// specify default current date.
"current": null,

// specify output format
// e.g. 'YYYY/MM/DD hh:mm'
"dateFormat": "default",

Available locales
"en" : English (default)
"ja" : Japanese
"ru" : Russian - Thanks to: rdolgushin. (v1.1.3-)
"br" : Brazil - Thanks to: Mauricio. (v1.1.4-)
"cn" : Chinese - Thanks to: jasonslyvia (v1.3.0-)
"de" : German - Thanks to: rtakeda (v1.3.0-)
"id" : Bahasa Indonesia - Thanks to: robzlabz (v1.4.0-)
"tr" : Turkish - Thanks to: myfell (v1.5.0-)
"sv" : Swedish - Thanks to: MacDknife (v1.5.0-)
"es" : Spanish - Thanks to: maw (v1.5.0-)
"locale": "en",
"animation": true,

// change the interval of minute on timelist.
"minuteInterval": 30,

// Set the first day of the week displayed in the calendar
"firstDayOfWeek": 0,

// Close (disappear) the picker when the date & time have been selected.
"closeOnSelected": false,

"timelistScroll": true,
"calendarMouseScroll": true,
"todayButton": true,
"closeButton": true,
"dateOnly": false,
"futureOnly": false,
"minDate" : null,
"maxDate" : null,
"autodateOnStart": true,
"onShow": null,
"onHide": null,
"allowWdays": null,
"amPmInTimeList": false


Change Logs:

v1.13.0 (2015-11-08)

  • [Add] Locales: Ukrainian, Hungarian, Danish, Estonian.
  • [Add] Close button option.
  • [Add] minDate option and setMinDate function.
  • [Add] timeOnly option
  • [Fix] isPast logic when calendar is in next month display.
  • [Fix] Locales: Spanish, Korean.

v1.12.0 (2014-04-26)

  • [Add] Automatically relocate a position of a picker when picker is float-mode.
  • [Add] Automatically destroy a picker, when an input-field has lose.
  • [Add] The getDate and setDate method is available on PickerHandler Object.
  • [Change] Changed a parent element to root, when picker is float-mode

v1.11.0 (2014-04-25)

  • [Add] Support for allowWdays option.
  • [Add] Greek locale.
  • [Fix] Issue at option.current - Setting the custom date and time as default.
  • [Fix] Process for drawing the time cell.
  • [Fix] Past date is selected when clicking on previous (futureOnly).
  • [Fix] Bug when switching to next month.
  • [Fix] If not available a console on this environment.
  • [Fix] Position / outerHeight() gives wrong value.

v1.10.1 (2014-02-16)

  • [Fix] Issue with month jumping 

v1.10.0 (2013-12-27)

  • [Add] Polish locale (Thanks to: viszman).
  • [Add] Support for minDate and maxDate options (Thanks to: droidmunkey).
  • [Add] Support for minTime and maxTime options (Thanks to: CedricLevasseur).
  • [Fix] Use isNaN instead of Number.isNaN (Thanks to: vbatoufflet).

v1.9.0 (2013-11-06)

  • [Add] Support for Bower (Thanks to: kmulvey).
  • [Change] Improved localization mechanism (Thanks to: LucasTheCure).
  • [Change] Refactor - Simplified some codes (Thanks to: LucasTheCure).
  • [Fix] Close a picker when date is selected on dateOnly mode (Thanks to: Kwozzie).

v1.8.0 (2013-10-18)

  • [Add] Portuguese locale (Thanks to: adc-tcarvalho).
  • [Add] Dutch locale (Thanks to: Mondane).
  • [Add] Czech locale (Thanks to: Jan Zatloukal).
  • [Add] French locale (Thanks to: Jan matll42).
  • [Add] Italian locale (Thanks to: Mauro Zuccato).
  • [Fix] Fixing positioning when element is inside of nested relative parent (Thanks to: AddoSolutions).

v1.7.0 (2013-09-17)

  • [Add] Korean locale (Thanks to: perhapsspy).
  • [Add] "futureOnly" option and bugfix (Thanks to: camiel).
  • [Add] "dateOnly" option (Thanks to: logitick).
  • [Fix] Improved date parse (when using dateFormat option).

v1.6.0 (2013-09-04)

  • [Add] "closeOnSelected" option for close the picker when selected date & time (Idea by: MacDknife).
  • [Add] "timelistScroll" option for disable automatic scroll of timelist (Idea by: deviso).
  • [Add] Change the months by scroll of mouse-wheel on the calendar (Idea by: deviso).
  • [Add] "calendarMouseScroll" option for scroll calendar with mouse wheel (default: true).
  • [Add] Today button for calendar (Idea by: Tanver186).
  • [Add] "todayButton" option (default: true).
  • [Change] Improve design (header, container).
  • [Fix] Malfunction of "animation" option (Can't disable animation).

v1.1.3 (2013-05-22)

  • Added Russian locale.

v1.1.2 (2013-05-09)

  • Fixed IE8 compatibility.

v1.1.1 (2013-03-12)

  • Fixed width of timelist for bug in ie9 (Thanks to: jjsgro).


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