EN Start a Project

DATETIMEPICKER plugin for the site — instructions, configuration, initialization

DateTimePicker is a convenient and easy-to-use plugin for quickly substituting date and time into input fields.

DateTimePicker is a convenient and easy-to-use plugin for quickly substituting date and time into input fields. It is very useful when filling out content multiple times; it saves the user from the routine of handwriting dates and times, providing the ability to enter time into form fields “in two clicks” without switching from the keyboard.

Distinctive features and capabilities of the DateTimePicker plugin:

  • Simple and convenient interface.
  • Convenient and fast time entry “in two clicks” (using a keyboard is not necessary).
  • Touch screen support.
  • Smart positioning on the screen without obscuring the input field.

The DateTimePicker plugin consists of the main parts:

  • Demo HTML markup.
  • JQuery script with plugin code.
  • Style file.

Example of installing the DateTimePicker plugin

Download the archive with the plugin and copy its contents to your site directory. For the script to work, you must have the jQuery library connected.

Initializing and configuring the plugin

Connect the jQuery framework and the plugin itself to the document

<link rel="stylesheet" href="/css/jquery.datetimepicker.css">
<script src="/js/jquery.js"></script>
<script src="/js/jquery.datetimepicker.js"></script>

To connect a plugin to an input field, just add a selector to it:

<form action="/">
	<input class="date" type="text" name="name"><br>
	<button type="submit" name="submitbtn" value="Отправить">Отправить</button>
</form>

Example of plugin initialization:

<script>
$('.date').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'
});
</script>

DateTimePicker is a multilingual plugin with support for 3 languages: English, Russian and German. You can select a language, as well as other customizable parameters, during initialization. A complete list of available options is provided below.

Full list of parameters

Name

default

Purpose

Usage example

value

null

Sets the current datetimepicker value. If set, input.value is ignored

{ value: 03/12/2013,
format: 'dmY' }

lang

en

The language in which the days of the week and months are displayed. The plugin has 3 built-in languages: English - en, German - de and Russian - ru

{ lang: 'ru', 'de', 'en' }

format

Y/m/d H:i

Basic time format. Using this parameter, the plugin converts the date specified in value into its own format, which it then operates with. The format is identical to what php uses in the date function. The full list can be found in the documentation.

{ format: 'H' } // display only hours
{ format: 'Y' } // year

formatDate

Y/m/d

This is a service date format. It is used to ensure that the plugin correctly interprets the values ​​of the minDate and maxDate options, which will be described below

{ formatDate: 'dmY' }

formatTime

H:i

Similar to formatDate . It is used to ensure that the plugin correctly interprets the values ​​of the minTime and maxTime options, which will be described below

{ formatTime: 'H' } // only hour

step

60

In TimePicker, a list of time selection options is displayed at a certain interval in minutes. The default is 1 hour (60 minutes).

{step: 5}

closeOnDateSelect

0

If both DatePicker and TimePicker are displayed, then the plugin does not close when selecting a date. He does this only after choosing the time.

If set to true, the plugin will be closed when a date is selected. If false, then even if the timepicker is not displayed, the plugin will not be closed.

{ closeOnDateSelect: true }

closeOnWithoutClick

true

Close the plugin if the user clicks somewhere outside the plugin without selecting a date.

{ closeOnWithoutClick: false }

timepicker

true

Display TimePicker. Can only accept false if datepicker=true

{ timepicker: false }

datepicker

true

Display DatePicker. Can only accept false if timepicker=true

{ datepicker: false }

minDate

false

An option designed to limit the lower limit of the date selection. For example, you order a taxi and you need to select a date. Obviously, the date can only be selected starting from the current day. If set to 0, the current date will be used.

{ minDate: 0 } // current date
{ minDate: '2013/12/03' }
{ minDate:'12/05/2013', formatDate:'dmY' }

maxDate

false

Similar to minDate, the upper bound of the date. 0 - current date

{ maxDate: 0 } // current date
{ maxDate: '2013/12/03' }
{ maxDate: '12/05/2013', formatDate: 'dmY' }

minTime

false

Similar to minDate, but for TimePicker

{ minTime: 0 } // current date
{ minTime: '12:00' }
{ minTime: '13:45:34', formatTime: 'H:i:s' }

maxTime

false

Similar to maxDate, but for TimePicker

{ maxTime: 0 } // current date
{ maxTime: '12:00' }
{ maxTime: '13:45:34', formatTime: 'H:i:s' }

allowTimes

[]

An option that specifies the time available for selection. For example, choosing a bus route may only be available at a certain time. In this case, the minTime and maxTime values ​​are ignored.

{ allowTimes: ['09:00','11:00','12:00','21:00'] }

opened

false

If true, the plugin will be opened immediately after the page loads

 

inline

false

When true, the plugin replaces <input>

 

onSelectDate

function(){}

Called when a date is selected in the DatePicker. Has 3 parameters. The plugin itself, the current time the plugin works with and a link to the input element

onSelectDate: function($dtp,current,input){
alert(current.dateFormat('d/m/Y'));
}

onSelectTime

function(){}

Similar to onSelectDate for TimePicker

 

onChangeMonth

function(){}

Called when the month changes in a DatePicker

 

onChangeTime

function(){}

When scrolling through time

 

onShow

function(){}

When showing the plugin

 

onClose

function(){}

Before closing the plugin

 

withoutCopyright

false

Option to disable links to the plugin site for now

 

inverseButton

false

Inverts scrolling

 

hours12

false

12 hour time format

 

dayOfWeekStart

0 

Start of the week in DatePicker. The default from Resurrection is 0.

 
Русский
Srpski
English