Best Period Picker

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

PeriodPicker or TimePicker or PeriodDateTimePicker

Try another perfect period picker

or cool datetimepicker. Used TimePicker

or perioddatetimepicker

Compact mode

like this datetimepicker mode

or cute timepicker (touchable,draggable,use keyboard and mousewheel, support mobile devices). Read more

Buy and Download   Read more ...

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="/build/jquery.datetimepicker.full.min.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.datetimepicker.setLocale('de');

jQuery('#datetimepicker1').datetimepicker({
 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'//tomorrow 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 another date parser/formatter#

By default, datetimepicker uses php-date-formatter for parsing and formatting the date and time displayed. You can replace the library by setting a custom DateFormatter. Simply supply an object that implements the parseDate and formatDate methods. This example uses the popular MomentJS library:

$.datetimepicker.setDateFormatter({
    parseDate: function (date, format) {
        var d = moment(date, format);
        return d.isValid() ? d.toDate() : false;
    },
    
    formatDate: function (date, format) {
        return moment(date).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

Try another perfect period picker for CMS or CRM

   buy and download   Read more ...

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 (繁體中文)
$.datetimepicker.setLocale('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'} // tomorrow
{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'} // tomorrow
{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'} // tomorrow
{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'}
allowDates []

Allow all dates in list

{allowDates: ['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'], formatDate:'d.m.Y'}
allowDateRe []

Use Regex to check dates

{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' }
disabledWeekDays []

Disable days listed by index

[0, 3, 4]
id
style
ownerDocument document The ownerDocument object for the datetimepicker to properly attach events and calc position (iframe support).
contentWindow window The contentWindow object that contains the datetimepicker to properly attach events (iframe support).

Methods

show

Show Datetimepicker

$('#input').datetimepicker();
$('button.somebutton').on('click', function () {
    $('#input').datetimepicker('show');
});

hide

Hide Datetimepicker

$('#input').datetimepicker();
$(window).on('resize', function () {
    $('#input').datetimepicker('hide');
});

toggle

Sgow/Hide Datetimepicker

$('#input').datetimepicker();
$('button.trigger').on('click', function () {
    $('#input').datetimepicker('toggle');
});

destroy

Destroy datetimepicker

$('#input').datetimepicker();
$('#input').datetimepicker('destroy');

reset

Reset datetimepicker's value

$('#input').datetimepicker();
$('#input').val('12/01/2006');
$('#input')
    .datetimepicker('show')
    .datetimepicker('reset')

validate

Validate datetimepicker's value

$('#input').datetimepicker();
$('#input').datetimepicker(validate)

setOptions

Set datetimepicker's options

$('#input').datetimepicker({format: 'd.m.Y'});
$('#input').datetimepicker('setOptions', {format: 'd/m/Y'});
//or
$('#input').datetimepicker({format: 'd/m/Y'});

getValue

Get current datetimepicker's value (Date object)

$('#input').datetimepicker();
$('button.somebutton').on('click', function () {
    var d = $('#input').datetimepicker('getValue');
    console.log(d.getFullYear());
});

jQuery Slideshow with hardware-accelerated transitions

Responsive, accessible as a pure CSS slideshow. Prev/next navigation, bullets with thumbnails,...

jQuery DOM Cache

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

Fixed Table Header and Left Column

jQuery plugin to modify a table element with a fixed header element and fixed left columns.

Easy responsive tabs to accordion

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

jQuery Marquee with CSS3 Support

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

Bootstrap Image Gallery

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

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.

jScroll – jQuery Plugin for Infinite Scrolling / Auto-Paging

jScroll is a jQuery plugin allowing you to effortlessly implement infinite scrolling, lazy...

Galereya

Responsive, easily customizable gallery with a masonry layout

Mosaic Flow

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

Card Deck Slideshow

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

jQuery SumoSelect

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

jBox

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

WordPress Lightbox – Catalyst Template

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

DataTable AJAX Pagination jQuery plugin

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

jQuery Turtle

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

Simple Calendar and Date Picker

A simple calendar and date picker only depends on JQuery

jQuery Circliful Plugin

jQuery plugin for showing circle statistics.

jQuery Browser Rejection

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

qTip2 – Pretty powerful tooltips

Introducing... qTip2. The second generation of the advanced qTip plugin for the ever popular...

jQuery droparea

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

fancy input

Makes typing in input fields fun with CSS3 effects

jQuery Date and Time picker

jQuery plugin for date, time, or datetime manipulation in form

Blindify

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

mBox fullscreen lightbox plugin

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

Acxmenu – multilevel jquery accordion menu

Acxmenu - multilevel jquery accordion menu plugin for jQuery.

appendGrid – The dynamic table input jQuery plugin

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

Bootstrap Datagrid

bs_grid is a jQuery Datagrid plugin, based on Twitter Bootstrap. Advanced row selection, sorting,...

Bootstrap Form Helpers Date Picker

Date Picker jQuery plugin for Bootstrap.

Flexible jQuery slider plugin

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

jQuery nanoGALLERY

Image gallery simplified. Touch enabled, responsive, justified/cascading/grid layout and it...

Bootstrap Auto-Hiding Navbar

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

jQuery Tiles

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

Canvas Image Map Area Editor

Create and edit image map area polygons in a canvas-based GUI that replaces form elements.

TagCanvas HTML5 canvas tag cloud

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

jQuery Photobox

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

aciTree – A customizable treeview control

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

Switchy

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

Bootstrap Tags Input

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

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

jQuery Slider – WOW image slider

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

jQuery Number Format

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

jQuery Easy Ticker

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

autoNumeric – Currency formatting made easy

jQuery plugin that automatically formats currency (money) and numbers as you type on form inputs....

jQuery Etherpad

jQuery plugin for embedding Etherpad

Usage & Examples

Include jQuery.js,

...

jQuery AlignColumn

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

jQuery Waterwheel Carousel

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

Bootstrap Form Helpers Currency Picker

Currency Picker jQuery plugin for Bootstrap.