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
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'}
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(ct,$i){
  alert(ct.dateFormat('d/m/Y'))
}
onSelectTimefunction(current_time,$input){}
onChangeMonthfunction(current_time,$input){}
onChangeYearfunction(current_time,$input){}
onChangeDateTimefunction(current_time,$input){}
onShowfunction(current_time,$input){}
onClosefunction(current_time,$input){}
onSelectDate:function(ct,$i){
  $i.datetimepicker('destroy');
}
onGeneratefunction(current_time,$input){}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 Etherpad

jQuery Etherpad

jQuery plugin for embedding Etherpad

Usage & Examples

Include jQuery.js,

...

WordPress Lightbox – Catalyst Template

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

qTip2 – Pretty powerful tooltips

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

jQuery Turtle

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

jQuery droparea

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

jQuery Browser Rejection

jQuery Browser Rejection

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

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.

Card Deck Slideshow

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

jQuery Ajax Loading

jQuery Ajax Loading
jQuery Ajax Loading.

fancy input

fancy input
Makes typing in input fields fun with CSS3 effects

jQuery Super Labels

jQuery Super Labels
Give your forms a helping of awesome!

Switchy

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

Flexible jQuery slider plugin

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

jQuery Slide and Fade

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

jQuery Tiles

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

jBox

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

Blindify

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

jQuery Photobox

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

jQuery AlignColumn

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

imgLiquid

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

Autocomplete like Google

Autocomplete like Google
Simple autocomplete like Google

jQuery imagesScrolling

jQuery imagesScrolling
Jquery plugin images scrolling

jQuery FocusPoint

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

jQuery Month selector

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

Modern Blink

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

jQuery mSlide

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

Animated Table Sorter

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

jQuery conventAccordion

jQuery conventAccordion
jQuery plugin for horizontal and/or vertical accordion.

jQuery Waterwheel Carousel

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

Ezdz [izy-dizy]

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

jQuery Phoenix

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 8211 The dynamic table input jQuery plugin
appendGrid allow you to input structured data row by row such like filling spreadsheets. It...

Zebra_Tooltips

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

easing – easing functions for jQuery or standalone

easing 8211 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

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

International Telephone Input

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.

A very light weight2.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

Fotorama
A simple, stunning, powerful jQuery gallery.

plainModal

plainModal
The simple jQuery Plugin for customizable modal windows.

jQuery PieTimer

A CSS3-based pie timer.

Zebra_Pin

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

Rangy Inputs

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

jQuery Number Format

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

jQuery Circliful Plugin

jQuery Circliful Plugin
jQuery plugin for showing circle statistics.

jQuery Fullscreen

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

Bootstrap Tags Input

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

Responsive Carousel

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

aciTree – A customizable treeview control

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