Autocomplete Like Google

DateTimePicker jQuery plugin select date and time

Use this plugin to unobtrusively add a datetimepicker, datepicker or timepicker dropdown to your forms. It's easy to customize options. Source code on GitHub or download (zip).

Don't use file datetimepicker.js from this server. It's not CDN

DateTimepicker

Use mask DateTimepicker

TimePicker

DatePicker

Inline DateTimePicker

Dark theme

How do I use it?

First include to page css and js files

<!-- this should go after your </body> -->
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>

Examples


Simple init DateTimePicker Example #

HTML

<input id="datetimepicker" type="text" >

javaScript

jQuery('#datetimepicker').datetimepicker();

Result


i18n DatePicker Example #

All supported languages here

javaScript

jQuery('#datetimepicker1').datetimepicker({
 lang:'de',
 i18n:{
  de:{
   months:[
    'Januar','Februar','März','April',
    'Mai','Juni','Juli','August',
    'September','Oktober','November','Dezember',
   ],
   dayOfWeek:[
    "So.", "Mo", "Di", "Mi", 
    "Do", "Fr", "Sa.",
   ]
  }
 },
 timepicker:false,
 format:'d.m.Y'
});

Result


Only TimePicker Example #

javaScript

jQuery('#datetimepicker2').datetimepicker({
  datepicker:false,
  format:'H:i'
});

Result

Date Time Picker start date #

javaScript

jQuery('#datetimepicker_start_time').datetimepicker({
  startDate:'+1971/05/01'//or 1986/12/08
});

Result

Date Time Picker from unixtime #

javaScript

jQuery('#datetimepicker_unixtime').datetimepicker({
  format:'unixtime'
});

Result


Inline DateTimePicker Example #

javaScript

jQuery('#datetimepicker3').datetimepicker({
  format:'d.m.Y H:i',
  inline:true,
  lang:'ru'
});

Result


Icon trigger #

Click the icon next to the input field to show the datetimepicker

javaScript

jQuery('#datetimepicker4').datetimepicker({
  format:'d.m.Y H:i',
  lang:'ru'
});

and handler onclick event

jQuery('#image_button').click(function(){
  jQuery('#datetimepicker4').datetimepicker('show'); //support hide,show and destroy command
});

Result


allowTimes options TimePicker Example #

javaScript

jQuery('#datetimepicker5').datetimepicker({
 datepicker:false,
 allowTimes:[
  '12:00', '13:00', '15:00', 
  '17:00', '17:05', '17:20', '19:00', '20:00'
 ]
});

Result


handler onChangeDateTime Example #

javaScript

jQuery('#datetimepicker6').datetimepicker({
  timepicker:false,
  onChangeDateTime:function(dp,$input){
    alert($input.val())
  }
});

Result


minDate and maxDate Example #

javaScript

jQuery('#datetimepicker7').datetimepicker({
 timepicker:false,
 formatDate:'Y/m/d',
 minDate:'-1970/01/02',//yesterday is minimum date(for today use 0 or -1970/01/01)
 maxDate:'+1970/01/02'//tommorow is maximum date calendar
});

Result


Use mask input Example #

javaScript

jQuery('#datetimepicker_mask').datetimepicker({
 timepicker:false,
 mask:true, // '9999/19/39 29:59' - digit is the maximum possible for a cell
});

Result


Set options runtime DateTimePicker #

If select day is Saturday, the minimum set 11:00, otherwise 8:00

javaScript

var logic = function( currentDateTime ){
  // 'this' is jquery object datetimepicker
  if( currentDateTime.getDay()==6 ){
    this.setOptions({
      minTime:'11:00'
    });
  }else
    this.setOptions({
      minTime:'8:00'
    });
};
jQuery('#datetimepicker_rantime').datetimepicker({
  onChangeDateTime:logic,
  onShow:logic
});

Result


After generating a calendar called the event onGenerate #

Invert settings minDate and maxDate

javaScript

jQuery('#datetimepicker8').datetimepicker({
  onGenerate:function( ct ){
    jQuery(this).find('.xdsoft_date')
      .toggleClass('xdsoft_disabled');
  },
  minDate:'-1970/01/2',
  maxDate:'+1970/01/2',
  timepicker:false
});

Result


disable all weekend #

javaScript

jQuery('#datetimepicker9').datetimepicker({
  onGenerate:function( ct ){
    jQuery(this).find('.xdsoft_date.xdsoft_weekend')
      .addClass('xdsoft_disabled');
  },
  weekends:['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'],
  timepicker:false
});

Result


Use other date parser#

Date-functions library, Baron Schwartz, used in DateTimePicker for parse and format datetime certainly good, but it is licensed under the LGPL. It is not bad and not good. In this example, you see how use other date parse library

Before start, remove code below jquery.datetimepicker.js. Remove all after comment

// Parse and Format Library

After this add in page next code, as previously

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

After this you must define two methods for Date object

Date.parseDate = function( input, format ){
  // you code for convert string to date object
  // simplest variant - use native Date.parse, not given format parametr
return Date.parse(input);
};
Date.prototype.dateFormat = function( format ){
  //you code for convert date object to format string
  //for example
  switch( format ){
    case 'd': return this.getDate();
    case 'H:i:s': return this.getHours()+':'+this.getMinutes()+':'+this.getSeconds();
    case 'h:i a': return ((this.getHours() %12) ? this.getHours() % 12 : 12)+':'+this.getMinutes()+(this.getHours() < 12 ? 'am' : 'pm');
  }
  // or default format
  return this.getDate()+'.'+(this.getMonth()+ 1)+'.'+this.getFullYear();
};

It is only example, it is not real code. For real project this.getDate() must be replace to (this.getDate()<0:'0':'')+this.getDate()

This approach will work in a particular project, but does not work in another. Therefore use the other libraries for working with dates - Moment.js.

How to use moment.js with jquery datetimepicker

Add this code in page

<script src="http://momentjs.com/downloads/moment.min.js"></script>

After this, again re-define 2 methods

Date.parseDate = function( input, format ){
  return moment(input,format).toDate();
};
Date.prototype.dateFormat = function( format ){
  return moment(this).format(format);
};

After this, you can init datetimepicker with moment.js format

jQuery('#datetimepicker').datetimepicker({
  format:'DD.MM.YYYY h:mm a',
  formatTime:'h:mm a',
  formatDate:'DD.MM.YYYY'
});

Range between date#

javaScript

jQuery(function(){
 jQuery('#date_timepicker_start').datetimepicker({
  format:'Y/m/d',
  onShow:function( ct ){
   this.setOptions({
    maxDate:jQuery('#date_timepicker_end').val()?jQuery('#date_timepicker_end').val():false
   })
  },
  timepicker:false
 });
 jQuery('#date_timepicker_end').datetimepicker({
  format:'Y/m/d',
  onShow:function( ct ){
   this.setOptions({
    minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false
   })
  },
  timepicker:false
 });
});

Result

Start End

Full options list

Name defaultDescrEx.
lazyInit false Initializing plugin occurs only when the user interacts. Greatly accelerates plugin work with a large number of fields
value null Current value datetimepicker. If it is set, ignored input.value
{value:'12.03.2013',
 format:'d.m.Y'}
lang en Language i18n
ar - Arabic
az - Azerbaijanian (Azeri)
bg - Bulgarian
bs - Bosanski
ca - Català
ch - Simplified Chinese
cs - Čeština
da - Dansk
de - German
el - Ελληνικά
en - English
en-GB - English (British)
es - Spanish
et - "Eesti"
eu - Euskara
fa - Persian
fi - Finnish (Suomi)
fr - French
gl - Galego
he - Hebrew (עברית)
hr - Hrvatski
hu - Hungarian
id - Indonesian
it - Italian
ja - Japanese
ko - Korean (한국어)
kr - Korean
lt - Lithuanian (lietuvių)
lv - Latvian (Latviešu)
mk - Macedonian (Македонски)
mn - Mongolian (Монгол)
nl - Dutch
no - Norwegian
pl - Polish
pt - Portuguese
pt-BR - Português(Brasil)
ro - Romanian
ru - Russian
se - Swedish
sk - Slovenčina
sl - Slovenščina
sq - Albanian (Shqip)
sr - Serbian Cyrillic (Српски)
sr-YU - Serbian (Srpski)
sv - Svenska
th - Thai
tr - Turkish
uk - Ukrainian
vi - Vietnamese
zh - Simplified Chinese (简体中文)
zh-TW - Traditional Chinese (繁體中文)
{lang:'ru'}
format Y/m/d H:i Format datetime. More Also there is a special type of «unixtime»
{format:'H'}
{format:'Y'}{format:'unixtime'}
formatDate Y/m/d Format date for minDate and maxDate
{formatDate:'d.m.Y'}
formatTime H:i Similarly, formatDate . But for minTime and maxTime
{formatTime:'H'}
step 60 Step time
{step:5}
closeOnDateSelect 0
{closeOnDateSelect:true}
closeOnWithoutClick true
{ closeOnWithoutClick :false}
validateOnBlur true Verify datetime value from input, when losing focus. If value is not valid datetime, then to value inserts the current datetime
{ validateOnBlur:false}
timepicker true
{timepicker:false}
datepicker true
{datepicker:false}
weeks false Show week number
{weeks:true}
theme 'default' Setting a color scheme. Now only supported default and dark theme
{theme:'dark'}
minDate false
{minDate:0} // today
{minDate:'2013/12/03'}
{minDate:'-1970/01/02'} // yesterday
{minDate:'05.12.2013',formatDate:'d.m.Y'}
maxDate false
{maxDate:0}
{maxDate:'2013/12/03'}
{maxDate:'+1970/01/02'} // tommorrow
{maxDate:'05.12.2013',formatDate:'d.m.Y'}
startDate false calendar set date use starDate
{startDate:'1987/12/03'}
{startDate:new Date()}
{startDate:'+1970/01/02'} // tommorrow
{startDate:'08.12.1986',formatDate:'d.m.Y'}
defaultDate false if input value is empty, calendar set date use defaultDate
{defaultDate:'1987/12/03'}
{defaultDate:new Date()}
{defaultDate:'+1970/01/02'} // tommorrow
{defaultDate:'08.12.1986',formatDate:'d.m.Y'}
defaultTime false if input value is empty, timepicker set time use defaultTime
{defaultTime:'05:00'}
{defaultTime:'33-12',formatTime:'i-H'}
minTime false
{minTime:0,}// now
{minTime:new Date()}
{minTime:'12:00'}
{minTime:'13:45:34',formatTime:'H:i:s'}
maxTime false
{maxTime:0,}
{maxTime:'12:00'}
{maxTime:'13:45:34',formatTime:'H:i:s'}
allowTimes []
{allowTimes:[
  '09:00',
  '11:00',
  '12:00',
  '21:00'
]}
mask false Use mask for input. true - automatically generates a mask on the field 'format', Digit from 0 to 9, set the highest possible digit for the value. For example: the first digit of hours can not be greater than 2, and the first digit of the minutes can not be greater than 5
{mask:'9999/19/39',format:'Y/m/d'}
{mask:true,format:'Y/m/d'} // automatically generate a mask 9999/99/99
{mask:'29:59',format:'H:i'} //
{mask:true,format:'H:i'} //automatically generate a mask 99:99
opened false
yearOffset 0 Year offset for Buddhist era
inline false
todayButton true Show button "Go To Today"
defaultSelect true Highlight the current date even if the input is empty
allowBlank false Allow field to be empty even with the option validateOnBlur in true
timepickerScrollbar true
onSelectDate function(){}
onSelectDate:function(ct,$i){
  alert(ct.dateFormat('d/m/Y'))
}
onSelectTime function(current_time,$input){}
onChangeMonth function(current_time,$input){}
onChangeYear function(current_time,$input){}
onChangeDateTime function(current_time,$input){}
onShow function(current_time,$input){}
onClose function(current_time,$input){}
onSelectDate:function(ct,$i){
  $i.datetimepicker('destroy');
}
onGenerate function(current_time,$input){} trigger after construct calendar and timepicker
withoutCopyright true
inverseButton false
scrollMonth true
scrollTime true
scrollInput true
hours12 false
yearStart 1950 Start value for fast Year selector
yearEnd 2050 End value for fast Year selector
roundTime round Round time in timepicker, possible values: round, ceil, floor
{roundTime:'floor'}
dayOfWeekStart 0

Star week DatePicker. Default Sunday - 0.

Monday - 1 ...

className
weekends []
['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014']
disabledDates []

Disbale all dates in list

{disabledDates: ['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'], formatDate:'d.m.Y'}
id
style

jQuery Photobox

A lightweight CSS3 image gallery plugin for jQuery that is pretty to look and and easy to use.

jQuery AlignColumn

jQuery plugin for aligning columns of a table on decimal or other character.

imgLiquid

A jQuery Plugin to resize images to fit in a container.

Autocomplete like Google

Simple autocomplete like Google

jQuery Etherpad

jQuery plugin for embedding Etherpad

Usage & Examples

Include jQuery.js,

...

jQuery imagesScrolling

Jquery plugin images scrolling

jQuery FocusPoint

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without...

jQuery Month selector

jQueryUI Widget that enables to display and select a month and year using the mm.itemselector widget

Modern Blink

Modern Blink provides the behavior of the blink tag using CSS Animations. Will fallback to jQuery...

jQuery mSlide

Simple and easy to use slider-gallery with touch support.

Animated Table Sorter

Animated Table Sorter is a simple html table sorter, with the added benefit of animating the...

jQuery conventAccordion

jQuery plugin for horizontal and/or vertical accordion.

jQuery Waterwheel Carousel

This jQuery plugin can display images with a cascading waterwheel effect.

Ezdz [izy-dizy]

A jQuery plugin to turn standard input type file into a nice drag&drop zone with validators...

jQuery Phoenix

jQuery plugin to save form fields values to Local Storage via HMTL5 Web Storage API. Lost...

appendGrid – The dynamic table input jQuery plugin

appendGrid allow you to input structured data row by row such like filling spreadsheets. It...

Zebra_Tooltips

A lightweight, highly-configurable jQuery plugin for creating simple but smart and visually...

easing – easing functions for jQuery or standalone

Easing function for use with or without jQuery. In addition to the standard list of easing...

jQuery Nice file Input

The jQuery Nice File Input Plugin provides batter looking file input HTML element, while making...

International Telephone Input

A jQuery plugin for entering international telephone numbers

A very light weight(2.5kb minified) modal window plugin which suits your basic needs.

modalBox.js is a very light weight modal window plugin packed with only most used features and...

Fotorama

A simple, stunning, powerful jQuery gallery.

plainModal

The simple jQuery Plugin for customizable modal windows.

jQuery PieTimer

A CSS3-based pie timer.

ScrollMagic

The jQuery plugin for magical scroll interactions.

Zebra_Pin

A lightweight jQuery plugin for pinning any element to the page or to a container element

Rangy Inputs

jQuery plug-in for selection and caret manipulation within textareas and text inputs.

jQuery Number Format

Easily format numbers for display use. Replace numbers inline in a document, or return a...

jQuery Circliful Plugin

jQuery plugin for showing circle statistics.

jQuery Fullscreen

jQuery Fullscreen plugin allows you to open any element on a page in fullscreen mode without...

Bootstrap Tags Input

jQuery plugin providing a Twitter Bootstrap user interface for managing tags.

Responsive Carousel

Simple and friendly responsive carousel plugin for jQuery. This library accept any type of...

aciTree – A customizable treeview control

aciTree renders a treeview control based on a simple data structure. The tree can be lazy loaded...

Mobiscroll Image & Text Scroller

Renders a scrollable list of images with or without optional text for easy data picking on touch...

jQuery Super Labels

Give your forms a helping of awesome!

jQuery UI Size Effect

Resize an element to a specified width and height.

Ariel Flesler’s jQuery scrollTo

Easy element scrolling using jQuery.

Parallax ImageScroll

Parallax ImageScroll is a simple and easy jQuery plugin for creating image parallax effects when...

jQuery.popLockIt

A jQuery plugin for 'locking' short content in place as the user scrolls by longer content. For...

WysiBB – Wysiwyg BBcode editor

Wysiwyg BBcode editor based on jQuery

TimeTo

Timer countdown digital clock

blueimp Gallery

blueimp Gallery is a touch-enabled, responsive and customizable image and video gallery, carousel...

ImgAreaSelect – image selection/cropping plugin

ImgAreaSelect is a plugin for selecting a rectangular area of an image. It allows web developers...

Easy responsive tabs to accordion

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or...

Alpaca Forms

Easy Forms Engine for jQuery / Bootstrap.

jQuery Gridly

Gridly is a jQuery plugin that allows for dragging and dropping as well as resizing.

jQuery Form – Fancy Web Form Designer

Formoid - Super Easy jQuery Contact Forms, Online Email Form Maker. * Easy - Build any type of...

perfect-scrollbar

Tiny but perfect jquery scrollbar plugin.

BootStrap Maxlength

jQuery and Bootstrap plugin for character count on inputs