DateTime Picker

Responsive Flat design jQuery based DateTime Picker for Web & Mobile

Download ZIP
Download TAR
View On Github
Demo

How To Use

Include Plugin Files

HTML code

Plugin Initialization

Parameter Options List

No Parameter Name Default Value Values/Options
1 mode "date"
  • "date"
  • "time"
  • "datetime"
2 defaultDate new Date()
3 dateSeparator dash("-")
4 timeSeparator colon(":")
5 timeMeridiemSeparator Space(" ")
5 timeMeridiemSeparator Space(" ")
6 dateTimeSeparator Space(" ")
7 monthYearSeparator Space(" ")
8 dateTimeFormat "dd-MM-yyyy hh:mm:ss"
  • "dd-MM-yyyy HH:mm:ss"
  • "dd-MM-yyyy hh:mm:ss AA"
  • "MM-dd-yyyy HH:mm:ss"
  • "MM-dd-yyyy hh:mm:ss AA"
  • "yyyy-MM-dd HH:mm:ss"
  • "yyyy-MM-dd hh:mm:ss AA"
  • "dd-MM-yyyy HH:mm"
  • "dd-MM-yyyy hh:mm AA"
  • "MM-dd-yyyy HH:mm"
  • "MM-dd-yyyy hh:mm AA"
  • "yyyy-MM-dd HH:mm"
  • "yyyy-MM-dd hh:mm AA"
9 dateFormat "dd-MM-yyyy"
  • "dd-MM-yyyy"
  • "MM-dd-yyyy"
  • "yyyy-MM-dd"
  • "MM yyyy"
  • "MMM yyyy"
  • "MMMM yyyy"
10 timeFormat "HH:mm"
  • "hh:mm:ss AA"
  • "HH:mm:ss"
  • "hh:mm AA"
  • "HH:mm"
11 maxDate null
12 minDate null
13 maxTime null
14 minTime null
15 maxDateTime null
16 minDateTime null
17 shortDayNames ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
18 fullDayNames ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
19 shortMonthNames ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
20 fullMonthNames ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
21 minuteInterval 1 1-30
Set the interval of minute increments or decrements. The interval must be evenly divided into 60.
22 roundOffMinutes true
  • true
  • false
When the value of roundOffMinutes is set to true, minutes value will be rounded off to the nearest value divisible by minuteInterval.
23 secondsInterval 1 1-30
Set the interval of seconds increments or decrements. The interval must be evenly divided into 60.
24 roundOffSeconds true
  • true
  • false
When the value of roundOffSeconds is set to true, seconds value will be rounded off to the nearest value divisible by secondsInterval.
25 titleContentDate "Set Date"
26 titleContentTime "Set Time"
27 titleContentDateTime "Set Date & Time"
28 buttonsToDisplay ["HeaderCloseButton", "SetButton", "ClearButton"]
29 setButtonContent "Set"
30 clearButtonContent "Clear"
31 setValueInTextboxOnEveryClick false
32 animationDuration 400
33 isPopup true
34 parentElement null
35 language "" Language Code
i18n folder in plugin distribution file has DateTimePicker-i18n.js file, which contains localized strings and date format. You can add strings for other languages as per requirement. Languages for which Locale Files are added -
  • "de" (German)
  • "en" (English)
  • "es" (Spanish)
  • "fr" (French)
  • "nl" (Dutch)
  • "zh-CN" (Simple Chinese)
36 label null Object
label is displayed below DateTime fields in DateTimePicker UI. label object should be of the form - 
{
  "year": "Year", 
  "month": "Month", 
  "day": "Day", 
  "hour": "Hour", 
  "minutes": "Minutes", 
  "seconds": "Seconds", 
  "meridiem": "Meridiem"
}

HTML5 Custom Data Attribute List

No Attribute Default Value Values/Options
1 data-field Default value of mode parameter (required, except in case of HTML5 input types)
  • "date"
  • "time"
  • "datetime"
2 data-min null
3 data-max null
4 data-format Default value of dateFormat, timeFormat or dateTimeFormat parameters dateFormat, timeFormat or dateTimeFormat Options
5 data-view Default value of isPopup parameter
  • "Popup"
  • "Dropdown"
6 data-startend No Default Value
  • "start"
  • "end"
7 data-startendelem No Default Value

selector of an datepicker, timepicker or datetimepicker input field to compare date, time or datetime value with

For Example,

Start DateTime :

<input class="startDateTime1" type="text" data-field="datetime" data-startend="start" data-startendelem=".endDateTime1" readonly >

End DateTime :

<input class="endDateTime1" type="text" data-field="datetime" data-startend="end" data-startendelem=".startDateTime1" readonly >

Function List

Function Name Description Parameters Return Value
setIsPopup Set value of isPopup parameter isPopupVal - Boolean
setDateTimeStringInInputField Set Formatted DateTime String in the Input Field
  • Input Elements
  • Date
getDateTimeStringInFormat Get Formatted DateTime String
  • DateTimePicker Mode
  • Date/Time/DateTime Format
  • Date
 DateTime String
setLanguage Change Language of DateTimePicker instance. Language Code DateTimePicker Object
getDateObjectForInputField Get Date object for the specified Input Field formatted in Pre-defined or Custom DateTime formats. Input Element Javascript Date Object

Callback Function List

No Function Name Description Parameters
1 init This function is called on DateTimePicker plugin initialization.
  • DateTimePicker Plugin Object
2 addEventHandlers This function can be used to add External Event Handlers for the DateTimePicker. This function is called on DateTimePicker plugin initialization after default event handlers are added.
  • DateTimePicker Plugin Object
3 beforeShow This function is called before showing DateTimePicker when an event to show DateTimePicker is triggered.
  • InputElement
4 afterShow This function is called after showing DateTimePicker when an event to show DateTimePicker is triggered.
  • InputElement
5 beforeHide This function is called before hiding DateTimePicker when an event to hide DateTimePicker is triggered.
  • InputElement
6 afterHide This function is called after hiding DateTimePicker when an event to hide DateTimePicker is triggered.
  • InputElement
7 buttonClicked This function is called when button on DateTimePicker UI is clicked. ButtonType value can be "SET", "CLEAR", "CLOSE" or "TAB".
  • ButtonType
  • InputElement
8 formatHumanDate This function can be used to format DateTime string to be displayed in the DateTimePicker Header section.
  • Date Object
  • mode
  • DateFormat/TimeFormat/DateTimeFormat
Attributes of "date" parameter passed to formatHumanDate() -
Attribute Value
dd day of the month(two-digit)
MM month(two-digit)
yyyy year(four-digit)
day day of the week (as specified in fullDayNames settings)
dayShort day of the week (as specified in shortDayNames settings)
month month name(as specified in fullMonthNames settings)
monthShort short month name(as specified in shortMonthNames settings)
H hour(24-Hour; number)
h hour(12-Hour; number)
HH hour(24-Hour; Two Digit String)
hh hour(12-Hour; Two Digit String)
m minutes(number)
mm minutes(Two Digit String)
s seconds(number)
ss seconds(Two Digit String)
9 parseDateTimeString This function can be used to return Date Object created by parsing DateTime string.
  • DateTime String
  • mode
  • Input Element
10 formatDateTimeString This function can be used to return a formatted DateTime string created using attributes of DateTime Object.
  • DateTime Object
  • mode
  • Input Element
Attributes of DateTime Object parameter of formatDateTimeString() -
Attribute Value
dd day of the month(two-digit)
MM month(two-digit)
yyyy year(four-digit)
day day of the week (as specified in fullDayNames settings)
dayShort day of the week (as specified in shortDayNames settings)
month month name(as specified in fullMonthNames settings)
monthShort short month name(as specified in shortMonthNames settings)
H hour(24-Hour; number)
h hour(12-Hour; number)
HH hour(24-Hour; Two Digit String)
hh hour(12-Hour; Two Digit String)
m minutes(number)
mm minutes(Two Digit String)
s seconds(number)
ss seconds(Two Digit String)
11 settingValueOfElement This function is called before setting value in the input field. This method is added primarily to make DateTimePicker work with AngularJS. See [Angular Demo](https://github.com/nehakadam/DateTimePicker/blob/master/demo/AngularJS/BasicDatePicker-AngularJS.htm).
  • sInputValue
  • dDateTime
  • oInputElement
This project is maintained by Neha Kadam
© 2016 Lajpat Shah. All rights reserved.