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

Mobiscroll Image & Text Scroller

Mobiscroll Image 038 Text Scroller
Renders a scrollable list of images with or without optional text for easy data picking on touch...

jQuery Toaster

jQuery Toaster
jQuery plugin for displaying customizable toast notifications via Bootstrap alerts

tmpl

tmpl
A DOM element based templating engine with a logic-less Zen Coding-like markup, object caching,...

jQuery Form Tooltip

jQuery Form Tooltip
A plugin to enable animated, customisable tooltip on your form inputs when focusing.

jqEye

jqEye
jQuery plugin for define a behaviour in which a HTML element moves, within the boundaries of an...

jqScrollAnim

jqScrollAnim
jQuery plugin for define animations whose reproduction depends on the position of the vertical...

Linkify URLs, mentions & hashtags

Linkify URLs, mentions 038 hashtags
Linky is a jQuery plugin for linkifying URLs, mentions (for Twitter, Instagram or GitHub) and...

jQuery JapaneseCharacter Plugin

jQuery JapaneseCharacter Plugin
This plug-in checks the Japanese..

EliteBox Menu

EliteBox Menu
If do you need fresh menu for your project - see the EliteBox Drop-Down Menu jQuery plugin, maybe...

Simple Signup Form – jQuery Plugin

Simple Signup Form 8211 jQuery Plugin
Build responsive sign up form with email notification. Provides Visual Builder and lot of...

imgix jQuery Plugin

imgix jQuery Plugin
imgix.js is a javascript library that allows you to to work with the imgix service and API to...

jQuery ScrollSlide

jQuery ScrollSlide
A plugin to run a slide animation at a specified scroll position.

jQuery helpers to assert how many elements should be in a jQuery array

jQuery helpers to assert how many elements should be in a jQuery array
jQuery helpers to help verify that your selectors are returning the expected number of elements.

Smooth Scroll

Smooth Scroll
Easy implementation of smooth scrolling for same-page links

jQuery.iAmIn plugin

jQuery.iAmIn plugin
Plugin that will set your element on a side of its parent within body (if it can) or at start of...

jQuery Circular Text

jQuery Circular Text
A plugin to render text along a circular path, creating a fancy button effect.

Atrribute Extend

Atrribute Extend
A simple plugin that extends jQuery attribute modification similar to *Class functions

jQuery xFilterList

jQuery xFilterList
A simple jQuery grid list plugin for easy filter and sorting.

jQuery Price Format

jQuery Price Format
jQuery plugin to convert inputs into price inputs

Google Maps Latitude and Longitude Picker

Google Maps Latitude and Longitude Picker
A jQuery Latitude and Longitude plugin to pick a location using Google Maps. Supports multiple...

Autocomplete like Google

Autocomplete like Google
Simple autocomplete like Google

Magneticmediajs jQuery: display your media content with style

Magneticmediajs jQuery display your media content with style
Magneticmediajs is a jQuery based library that allows media content (images, videos, maps, HTML...

prmenu

prmenu
jQuery plugin. Leightweight, responsive menu.

hovertree

hovertree
jQuery plugin.Tree Menu.Accordion Menu.

rangeslider.js

rangeslider.js
Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input...

Easy Carousel

Easy Carousel
EasyCarousel Plugin is a very practical Carousel plug-ins written in jQuery. Used to show a set...

ABigImage – view big versions of images

ABigImage 8211 view big versions of images
Fit mobile devices. Uses CSS3 transform and transition for smooth touch sliding. Touch slide left...

jQuery JIT image

jQuery JIT image
This jQuery plugin facilitates the use of jit image manipulation on the server and medias...

TailorFit

TailorFit
jQuery plugin that fits and centers elements within their containers.

Visual jQuery Lightbox – Beautiful jQuery Lightbox

Visual jQuery Lightbox 8211 Beautiful jQuery Lightbox
Visual LightBox is a web photo galleries with a nice Lightbox-style overlay effect. *...

Mimeo

Mimeo
A jQuery plugin for responsive images. Part of the Formstone Library.

Guillotine

Guillotine
Allow users to crop images within an area (fully responsive). Supports dragging (touch support),...

jQuery Slider – WOW image slider

jQuery Slider 8211 WOW image slider
WOW Slider is a jQuery image slider plugin with fantastic visual effects and beautifully...

Qoopido Lazyimage

Qoopido Lazyimage
jQuery plugin to lazy load images.

Zoomer

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

EasyZoom, jQuery image zoom plugin

EasyZoom, jQuery image zoom plugin
EasyZoom is an elegant, highly optimised jQuery image zoom and panning plugin based on the...

Cloudinary jQuery Plugin

Cloudinary jQuery Plugin
Cloudinary streamlines your web application’s image manipulation needs. Cloudinary's cloud-based...

PhotoJShop

PhotoJShop
A JavaScript library for photo editing using the canvas, aiming to reproduce most usual filters.

jQuery Lazy Image Loader

jQuery Lazy Image Loader
The fast and lightweight Lazy plugin for jQuery loads specified images and backgrounds in view...

jQuery imgViewer

jQuery imgViewer
jQuery plugin to zoom and pan images, even those with a size that is a percentage of their...

flipLightBox – Responsive Lightbox jQuery Plugin

flipLightBox 8211 Responsive Lightbox jQuery Plugin
A Responsive Lightbox that is extremely easy to implement and doesn't require any additional...

jQuery imgNotes

jQuery imgNotes
Extension of the jQuery imgViewer plugin to add markers and notes to the image.

PgwSlider

PgwSlider
Responsive and lightweight Slider plugin for jQuery

Image Scale

Image Scale
Scale images to fit or fill any target container via two simple properties: scale and align.

jQuery Eraser

jQuery Eraser
Transforms an image into an erasable canvas (with mouse and touch)

jQuery fullsizable

jQuery fullsizable
jQuery plugin to make use of the full available browser space for enjoyable image viewing. Also...

jQuery droparea

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

jQuery lightGallery

jQuery lightGallery
JQuery lightGallery is a lightweight jQuery lightbox gallery for displaying image and video gallery.

BttrLazyLoading jQuery plugin

BttrLazyLoading jQuery plugin
BttrLazyLoading is a jQuery plugin that allows your web application to only load images within...