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).

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.
lazyInitfalseInitializing plugin occurs only when the user interacts. Greatly accelerates plugin work with a large number of fields
valuenullCurrent value datetimepicker. If it is set, ignored input.value
{value:'12.03.2013',
 format:'d.m.Y'}
langenLanguage i18n
bg - Bulgarian
ch - Simplified Chinese
cs - Čeština
da - Dansk
de - German
el - Ελληνικά
en - English
es - Spanish
fa - Persian/Farsi
fr - French
hu - Hungarian
it - Italian
ja - Japanese
kr - Korean
nl - Dutch
no - Norwegian
pl - Polish
pt - Portuguese
ru - Russian
se - Swedish
sl - Slovenščina
th - Thai
tr - Turkish
vi - Vietnamese
{lang:'ru'}
formatY/m/d H:iFormat datetime. More Also there is a special type of «unixtime»
{format:'H'}
{format:'Y'}{format:'unixtime'}
formatDateY/m/dFormat date for minDate and maxDate
{formatDate:'d.m.Y'}
formatTimeH:i Similarly, formatDate . But for minTime and maxTime
{formatTime:'H'}
step60Step time
{step:5}
closeOnDateSelect0
{closeOnDateSelect:true}
closeOnWithoutClicktrue
{ closeOnWithoutClick :false}
validateOnBlurtrueVerify datetime value from input, when losing focus. If value is not valid datetime, then to value inserts the current datetime
{ validateOnBlur:false}
timepickertrue
{timepicker:false}
datepickertrue
{datepicker:false}
weeksfalseShow week number
{weeks:true}
theme'default'Setting a color scheme. Now only supported default and dark theme
{theme:'dark'}
minDatefalse
{minDate:0} // today
{minDate:'2013/12/03'}
{minDate:'-1970/01/02'} // yesterday
{minDate:'05.12.2013',formatDate:'d.m.Y'}
maxDatefalse
{maxDate:0}
{maxDate:'2013/12/03'}
{maxDate:'+1970/01/02'} // tommorrow
{maxDate:'05.12.2013',formatDate:'d.m.Y'}
startDatefalsecalendar set date use starDate
{startDate:'1987/12/03'}
{startDate:new Date()}
{startDate:'+1970/01/02'} // tommorrow
{startDate:'08.12.1986',formatDate:'d.m.Y'}
defaultDatefalseif 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'}
defaultTimefalseif input value is empty, timepicker set time use defaultTime
{defaultTime:'05:00'}
{defaultTime:'33-12',formatTime:'i-H'}
minTimefalse
{minTime:0,}// now
{minTime:new Date()}
{minTime:'12:00'}
{minTime:'13:45:34',formatTime:'H:i:s'}
maxTimefalse
{maxTime:0,}
{maxTime:'12:00'}
{maxTime:'13:45:34',formatTime:'H:i:s'}
allowTimes[]
{allowTimes:[
  '09:00',
  '11:00',
  '12:00',
  '21:00'
]}
maskfalseUse 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
openedfalse
yearOffset0Year offset for Buddhist era
inlinefalse
todayButtontrueShow button "Go To Today"
defaultSelecttrueHighlight the current date even if the input is empty
allowBlankfalseAllow field to be empty even with the option validateOnBlur in true
timepickerScrollbartrue
onSelectDatefunction(){}
onSelectDate:function(current_time,$input){
  alert(current.dateFormat('d/m/Y'))
}
onSelectTimefunction(){}
onChangeMonthfunction(current_time,$input){}
onChangeYearfunction(current_time,$input){}
onChangeDateTimefunction(){}
onShowfunction(){}
onClosefunction(){}
onGeneratefunction(){}trigger after construct calendar and timepicker
withoutCopyrighttrue
inverseButtonfalse
scrollMonthtrue
scrollTimetrue
scrollInputtrue
hours12false
yearStart1950Start value for fast Year selector
yearEnd2050End value for fast Year selector
roundTimeroundRound time in timepicker, possible values: round, ceil, floor
{roundTime:'floor'}
dayOfWeekStart0

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 Slideshow with hardware-accelerated transitions

jQuery Slideshow with hardware-accelerated transitions
Responsive, accessible as a pure CSS slideshow. Prev/next navigation, bullets with thumbnails,...

jQuery DOM Cache

jQuery DOM Cache
Using $.cache (or $.domCache) may dramatically increase the performance of your web application...

Easy responsive tabs to accordion

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

jQuery Circliful Plugin

jQuery Circliful Plugin
jQuery plugin for showing circle statistics.

jScroll – jQuery Plugin for Infinite Scrolling / Auto-Paging

jScroll 8211 jQuery Plugin for Infinite Scrolling  Auto-Paging
jScroll is a jQuery plugin allowing you to effortlessly implement infinite scrolling, lazy...

jQuery SumoSelect

jQuery SumoSelect
SumoSelect is a jquery plugin which beautifully renders a single or multiple HTML select element....

Bootstrap Image Gallery

Bootstrap Image Gallery
Bootstrap Image Gallery is an extension to blueimp Gallery, a touch-enabled, responsive and...

jQuery editable select box

jQuery editable select box
This plugin allows you to make a select box editable like a text box while keeping it's...

jQuery Ajax Loading

jQuery Ajax Loading
jQuery Ajax Loading.

jQuery Turtle

jQuery Turtle
jQuery plugin for turtle graphics. Every element is a turtle that can rotate, move, animate,...

Galereya

Galereya
Responsive, easily customizable gallery with a masonry layout

Mosaic Flow

Mosaic Flow
Pinterest like responsive image grid for jQuery that doesn’t suck.

jBox

jBox
jBox is a powerful and flexible jQuery plugin, taking care of all your modal windows, tooltips,...

Card Deck Slideshow

Card Deck Slideshow
This content slideshow script utilizes CSS3 transform to rotate and "unhinge" each...

WordPress Lightbox – Catalyst Template

WordPress Lightbox 8211 Catalyst Template
Wordpress Image Lightbox. Catalyst Style DEMO. Wordpress Photo Lightbox maker comes with a...

jQuery droparea

jQuery droparea
jQuery plugin for HTML5 drag-and-drop (images and files).

Fixed Table Header and Left Column

Fixed Table Header and Left Column
jQuery plugin to modify a table element with a fixed header element and fixed left columns.

DataTable AJAX Pagination jQuery plugin

DataTable AJAX Pagination jQuery plugin
The best jQuery AJAX Pagination plugin——DataTable jQuery plugin!

fancy input

fancy input
Makes typing in input fields fun with CSS3 effects

jQuery Etherpad

jQuery Etherpad
jQuery plugin for embedding Etherpad

mBox fullscreen lightbox plugin

mBox fullscreen lightbox plugin
mBox is a true full-screen light box(modal box) solution. Full Screen feature is supported by...

qTip2 – Pretty powerful tooltips

qTip2 8211 Pretty powerful tooltips
Introducing... qTip2. The second generation of the advanced qTip plugin for the ever popular...

jQuery Multi-Level Push Menu

jQuery Multi-Level Push Menu
Cross-browser compatible jQuery plug-in allowing endless nesting of navigation elements.

jQuery Marquee with CSS3 Support

jQuery Marquee with CSS3 Support
jQuery plugin to scroll the text like the old traditional marquee. NOW with CSS3 support.

jQuery Browser Rejection

jQuery Browser Rejection
jReject is a simple tool for rejecting specific browsers in a nice modal window

jQuery Tiles

jQuery Tiles
Splits images in as many tiles as you want, even with a gap.

Bootstrap Auto-Hiding Navbar

Bootstrap Auto-Hiding Navbar
An extension for Bootstrap's fixed navbar which hides the navbar while the page is scrolling...

Canvas Image Map Area Editor

Canvas Image Map Area Editor
Create and edit image map area polygons in a canvas-based GUI that replaces form elements.

Blindify

Blindify
Blindify is a jQuery plugin which creates a slideshow featuring a blinds effect transitioning...

appendGrid – The dynamic table input jQuery plugin

appendGrid 8211 The dynamic table input jQuery plugin
appendGrid allow you to input structured data row by row such like filling spreadsheets. It...

Get text selection or replace selected text in input field or textarea.

Get text selection or replace selected text in input field or textarea.
Get text selection or replace selected text in input field or textarea.

Kwicks for jQuery

Kwicks for jQuery
Sexy sliding panels with an emphasis on navigational interaction.

Flexible jQuery slider plugin

Flexible jQuery slider plugin
with ayaSlider you can create a flexible slider with multiple parallax effects, there is no...

TagCanvas HTML5 canvas tag cloud

TagCanvas HTML5 canvas tag cloud
Displays tags as a 3D rotating tag cloud using an HTML5 canvas

Switchy

Switchy
This is a tiny jQuery plugin which can be used as both a switch or a slider.

jQuery Clock or Timer plugin in retro flip-count down style

jQuery Clock or Timer plugin in retro flip-count down style
jQuery Clock,Timer or Counter plugin in retro flip-count down style. The plugin can display the...

Zoomer

Zoomer
A jQuery plugin for smooth image exploration. Part of the formstone library.

autoNumeric – Currency formatting made easy

autoNumeric 8211 Currency formatting made easy
jQuery plugin that automatically formats currency (money) and numbers as you type on form inputs....

jQuery Number Format

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

bootstrap-window – the daringly dapper windowing solution for Bootstrap

bootstrap-window 8211 the daringly dapper windowing solution for Bootstrap
bootstrap-window is the simply named, hugely powerful, daringly dapper, and quintessentially...

Bootstrap Form Helpers Currency Picker

Bootstrap Form Helpers Currency Picker
Currency Picker jQuery plugin for Bootstrap.

jQuery HideSeek

jQuery HideSeek
A simple, yet customizable live search jQuery plugin.

Bootstrap Form Helpers Number Input

Bootstrap Form Helpers Number Input
Number Input jQuery plugin for Bootstrap.

jQuery TimeLine plugin

jQuery TimeLine plugin
Simple and elegent jQuery timeline plugin to show important date events on a timeline.

jQuery Date and Time picker

jQuery Date and Time picker
jQuery plugin for date, time, or datetime manipulation in form

jQuery Slide and Fade

jQuery Slide and Fade
jQuery plugin for sliding and fading out groups of elements.

Bootstrap Form Helpers Language Picker

Bootstrap Form Helpers Language Picker
Language Picker jQuery plugin for Bootstrap.

Bootstrap Form Helpers Date Picker

Bootstrap Form Helpers Date Picker
Date Picker jQuery plugin for Bootstrap.

jQuery Easy Ticker

jQuery Easy Ticker
jQuery easy ticker is a news ticker like plugin, which scrolls the list infinitely. It is highly...