.jpg&w=3840&q=75)
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="Send">Send</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, |
|
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 |
|
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 |
|
maxDate |
false |
Similar to minDate, the upper bound of the date. 0 - current date |
{ maxDate: 0 } // current date |
|
minTime |
false |
Similar to minDate, but for TimePicker |
{ minTime: 0 } // current date |
|
maxTime |
false |
Similar to maxDate, but for TimePicker |
{ maxTime: 0 } // current date |
|
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){ |
|
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. |
|
