Feature-rich Datatime Picker Plugin With jQuery - JTSage-DateBox

Feature-rich Datatime Picker Plugin With jQuery - JTSage-DateBox
File Size: 487 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

JTSage-DateBox is a full featured, mobile-friendly and highly customizable jQuery date/time/duration picker plugin that works perfectly with jQuery mobile, jQuery UI and Bootstrap 3/4 frameworks.

Key features:

  • Android and iOS styles.
  • Popup, dropdown, inline and slider modes.
  • Tons of configuration options.
  • Supports 40+ languages.

Installation it via NPM:

$ npm install jtsage-datebox

How to use it:

1. Load the following JavaScript and CSS files of your choice in the document.

<!-- For jQuery Mobile -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/jtsage-datebox.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jtsage-datebox.min.js"></script>

<!-- For Bootstrap 3 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/jtsage-datebox.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jtsage-datebox.min.js"></script>

<!-- For Bootstrap 4 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/jtsage-datebox.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jtsage-datebox.min.js"></script>

<!-- For jQuery UI -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/jtsage-datebox.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jtsage-datebox.min.js""></script>

2. Load a language of your choice in the document.

<script src="//cdn.jsdelivr.net/npm/jtsage-datebox-i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>

3. Create a basic date picker for the input field you specify. There're 2 methods to initialize the date picker: via data attribute or JavaScript:

<input type="text" 
// or 
  // options here

4. All possible plugin options with default values.

version: "4.1.2",
jqmVersion: "1.4.5",
bootstrapVersion: "3.3.7",
bootstrap4Version: "4.0.0a6",
jqmuiWidgetVersion: "1.11.4",
theme: false,
themeDefault: "a",
themeHeader: "a",
themeSetButton: "a",
themeCloseButton: "default",
extraInputClass: "",
mode: false,
transition: "fade",
useAnimation: true,
hideInput: false,
hideContainer: false,
lockInput: true,
zindex: "1100",
clickEvent: "click",
clickEventAlt: "click",
useKinetic: true,
defaultValue: false,
showInitialValue: false,
linkedField: false,
linkedFieldFormat: "%J",
popupPosition: false,
popupButtonPosition: "left",
popupForceX: false,
popupForceY: false,
useModal: true,
useModalTheme: "b",
useInline: false,
useInlineBlind: false,
useHeader: true,
useImmediate: false,
useButton: true,
buttonIcon: false,
useFocus: false,
useSetButton: true,
useCancelButton: false,
useTodayButton: false,
useTomorrowButton: false,
useClearButton: false,
useCollapsedBut: false,
usePlaceholder: false,
beforeOpenCallback: false,
beforeOpenCallbackArgs: [],
openCallback: false,
openCallbackArgs: [],
closeCallback: false,
closeCallbackArgs: [],
startOffsetYears: false,
startOffsetMonths: false,
startOffsetDays: false,
afterToday: false,
beforeToday: false,
notToday: false,
maxDays: false,
minDays: false,
maxYear: false,
minYear: false,
blackDates: false,
blackDatesRec: false,
blackDays: false,
whiteDates: true,
minHour: false,
maxHour: false,
minTime: false,
maxTime: false,
maxDur: false,
minDur: false,
minuteStep: 1,
minuteStepRound: 0,
rolloverMode: {
  m: true,
  d: true,
  h: true,
  i: true,
  s: true
useLang: "default",
lang: {
  "default": {
      setDateButtonLabel: "Set Date",
      setTimeButtonLabel: "Set Time",
      setDurationButtonLabel: "Set Duration",
      todayButtonLabel: "Jump to Today",
      tomorrowButtonLabel: "Jump to Tomorrow",
      titleDateDialogLabel: "Set Date",
      titleTimeDialogLabel: "Set Time",
      daysOfWeek: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
      daysOfWeekShort: [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ],
      monthsOfYear: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ],
      monthsOfYearShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
      durationLabel: [ "Days", "Hours", "Minutes", "Seconds" ],
      durationDays: [ "Day", "Days" ],
      timeFormat: 24,
      headerFormat: "%A, %B %-d, %Y",
      tooltip: "Open Date Picker",
      nextMonth: "Next Month",
      prevMonth: "Previous Month",
      dateFieldOrder: [ "m", "d", "y" ],
      timeFieldOrder: [ "h", "i", "a" ],
      slideFieldOrder: [ "y", "m", "d" ],
      dateFormat: "%Y-%m-%d",
      useArabicIndic: false,
      isRTL: false,
      calStartDay: 0,
      clearButton: "Clear",
      cancelButton: "Cancel",
      durationOrder: [ "d", "h", "i", "s" ],
      meridiem: [ "AM", "PM" ],
      timeOutput: "%k:%M",
      durationFormat: "%Dd %DA, %Dl:%DM:%DS",
      calDateListLabel: "Other Dates",
      calHeaderFormat: "%B %Y"
themeDateToday: "info",
themeDayHigh: "warning",
themeDatePick: "success",
themeDateHigh: "warning",
themeDateHighAlt: "danger",
themeDateHighRec: "warning",
themeDate: "default",
themeButton: "default",
themeInput: "default",
themeClearButton: "default",
themeCancelButton: "default",
themeTomorrowButton: "default",
themeTodayButton: "default",
buttonIconDate: "calendar",
buttonIconTime: "time",
disabledState: "disabled",
bootstrapDropdown: true,
bootstrapDropdownRight: true,
bootstrapModal: false,
calNextMonthIcon: "plus",
calPrevMonthIcon: "minus",
useInlineAlign: "left",
btnCls: " btn btn-sm btn-",
icnCls: " glyphicon glyphicon-",
s: {
  cal: {
      prevMonth: "<span title='{text}' class='glyphicon glyphicon-{icon}'></span>",
      nextMonth: "<span title='{text}' class='glyphicon glyphicon-{icon}'></span>",
      botButton: "<a href='#' class='{cls}' role='button'><span class='{icon}'></span> {text}</a>"
tranDone: "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
calHighToday: true,
calHighPick: true,
calShowDays: true,
calOnlyMonth: false,
calWeekMode: false,
calWeekModeDay: 1,
calControlGroup: false,
calShowWeek: false,
calUsePickers: false,
calNoHeader: false,
calFormatter: false,
calAlwaysValidateDates: false,
calYearPickMin: -6,
calYearPickMax: 6,
calYearPickRelative: true,
calBeforeAppendFunc: function(t) {
  return t;
highDays: false,
highDates: false,
highDatesRec: false,
highDatesAlt: false,
enableDates: false,
calDateList: false,
calShowDateList: false,
validHours: false,
repButton: true,
durationStep: 1,
durationSteppers: {
  d: 1,
  h: 1,
  i: 1,
  s: 1
flen: {
  y: 25,
  m: 24,
  d: 40,
  h: 24,
  i: 30,
  s: 30
slen: {
  y: 9,
  m: 14,
  d: 16,
  h: 16,
  i: 30

Change log:


  • v4.4.1


  • updated for Bootstrap 4


  • Bump to v4.3.0


  • Bump to v4.2.3, add option extraInputClass


  • Version bump to include "twoDigitYearCutoff"

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