Responsive User-friendly Datetime Picker For jQuery - DateTimePicker

DateTimePicker is a responsive, mobile-friendly jQuery datatime picker plugin which allows to select dates, times and datetimes from a picker popup. Use the plus / minus buttons to increment / decrement the value of the datetime picker. i18n and keyboard navigation are supported as well.

View more:

• Best Date And Time Picker jQuery Plugins
• Top 10 JavaScript & CSS Date And Timer Picker Components

Install the DateTimePicker via package managers:

# NPM
npm install datetimepicker

# Bower
bower install datetimepicker

How to use it:

1. Add references to jQuery library and the jQuery DateTimePicker plugin's CSS & JS files:

<link rel="stylesheet" href="DateTimePicker.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="DateTimePicker.js"></script>

2. Add i18n files to the webpage as per your need:

<script src="i18n/DateTimePicker-i18n.js"></script>
<script src="i18n/DateTimePicker-i18n-de.js"></script>
...

3. Create input fields for the datetime picker.

<!-- Date Picker -->
<p>Date : </p>
<input type="date" readonly>

<!-- Time Picker -->
<p>Time : </p>
<input type="time" readonly>

<!-- DateTime Picker -->
<p>DateTime : </p>
<input type="datetime" readonly>

3. For old internet explorers (IE < 9):

<!-- Date Picker -->
<p>Date : </p>
<input type="text" data-field="date" readonly>

<!-- Time Picker -->
<p>Time : </p>
<input type="text" data-field="time" readonly>

<!-- DateTime Picker -->
<p>DateTime : </p>
<input type="text" data-field="datetime" readonly>

4. Create an empty container for the picker popup.

<div id="dtBox"></div>

5. Initialize the plugin and done.

$("#dtBox").DateTimePicker();

6. Full plugin options to customize the datetime picker.

$("#dtBox").DateTimePicker({
  mode: "date", // date, time or datetime
  defaultDate: null,

  dateSeparator: "-",
  timeSeparator: ":",
  timeMeridiemSeparator: " ",
  dateTimeSeparator: " ",
  monthYearSeparator: " ",

  dateTimeFormat: "dd-MM-yyyy HH:mm",
  dateFormat: "dd-MM-yyyy",
  timeFormat: "HH:mm",

  maxDate: null,
  minDate:  null,

  maxTime: null,
  minTime: null,

  maxDateTime: null,
  minDateTime: null,

  shortDayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  fullDayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  shortMonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  fullMonthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  labels: null, /*{"year": "Year", "month": "Month", "day": "Day", "hour": "Hour", "minutes": "Minutes", "seconds": "Seconds", "meridiem": "Meridiem"}*/

  minuteInterval: 1,
  roundOffMinutes: true,

  secondsInterval: 1,
  roundOffSeconds: true,

  showHeader: true,
  titleContentDate: "Set Date",
  titleContentTime: "Set Time",
  titleContentDateTime: "Set Date & Time",

  buttonsToDisplay: ["HeaderCloseButton", "SetButton", "ClearButton"],
  setButtonContent: "Set",
  clearButtonContent: "Clear",
  incrementButtonContent: "+",
  decrementButtonContent: "-",
  setValueInTextboxOnEveryClick: false,
  readonlyInputs: false,

  animationDuration: 400,

  touchHoldInterval: 300, // in Milliseconds
  captureTouchHold: false, // capture Touch Hold Event

  mouseHoldInterval: 50, // in Milliseconds
  captureMouseHold: false, // capture Mouse Hold Event

  isPopup: true,
  parentElement: "body",

  isInline: false,
  inputElement: null,

  language: "",

  init: null, // init(oDateTimePicker)
  addEventHandlers: null,  // addEventHandlers(oDateTimePicker)
  beforeShow: null,  // beforeShow(oInputElement)
  afterShow: null,  // afterShow(oInputElement)
  beforeHide: null,  // beforeHide(oInputElement)
  afterHide: null,  // afterHide(oInputElement)
  buttonClicked: null,  // buttonClicked(sButtonType, oInputElement) where sButtonType = "SET"|"CLEAR"|"CANCEL"|"TAB"
  settingValueOfElement: null, // settingValueOfElement(sValue, dDateTime, oInputElement)
  formatHumanDate: null,  // formatHumanDate(oDateTime, sMode, sFormat)

  parseDateTimeString: null, // parseDateTimeString(sDateTime, sMode, sFormat, oInputField)
  formatDateTimeString: null // formatDateTimeString(oDateTime, sMode, sFormat, oInputField)
  
});

Changelog:

v0.1.39 (2019-04-06)

• Fixed: In Google Chrome (73.0.3683.75, 64-Bit): Picker closes immediately after showing

v0.1.38 (03/24/2019)

• Fix Google Chrome (73.0.3683.75, 64-Bit)

---

This awesome jQuery plugin is developed by nehakadam. For more Advanced Usages, please check the demo page or visit the official website.