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

Feature-rich Datatime Picker Plugin With jQuery - JTSage-DateBox
File Size: 361 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.
  • Supports Bootstrap, Bulma, Foundation and UIKit frameworks.

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.

<!-- Required -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

<!-- For jQuery Mobile -->
<script src="https://cdn.jtsage.com/jtsage-datebox/latest/jtsage-datebox.jqm.min.js"></script>

<!-- For Bootstrap 3 -->
<script src="http://cdn.jtsage.com/jtsage-datebox/latest/jtsage-datebox.bootstrap.min.js"></script>

<!-- For Bootstrap 4 -->
<script src="http://cdn.jtsage.com/jtsage-datebox/latest/jtsage-datebox.bootstrap4.min.js"></script>

<!-- For Bulma -->
<script src="http://cdn.jtsage.com/jtsage-datebox/latest/jtsage-datebox.bulma.min.js"></script>

<!-- For Fomantic UI -->
<script src="http://cdn.jtsage.com/jtsage-datebox/latest/jtsage-datebox.fomanticui.min.js"></script>

<!-- For Foundation 6 -->
<script src="http://cdn.jtsage.com/jtsage-datebox/latest/jtsage-datebox.foundation6.min.js"></script>

<!-- For UI Kit -->
<script src="http://cdn.jtsage.com/jtsage-datebox/latest/jtsage-datebox.uikit.min.js"></script>

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/jtsage-datebox.lang.utf8.min.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. You MUST specify the mode for the Datetime picker. All possible modes:

  • datebox
  • timebox
  • datetimebox
  • calbox
  • flipbox
  • timeflipbox
  • datetimeflipbox
  • slidebox
  • durationbox
  • durationflipbox
  mode: 'datebox'

5. All possible plugin options with default values.

mode: false,
hideInput: false,
lockInput: true,
safeEdit: true,
controlWidth: "290px",
controlWidthImp: "",
breakpointWidth: "567px",
zindex: "1100",
clickEvent: "click",
useKinetic: true,
flipSizeOverride: false,
defaultValue: false,
showInitialValue: false,
linkedField: false,
linkedFieldFormat: "%J",
displayMode: "dropdown",
displayDropdownPosition: "bottomRight",
displayInlinePosition: "center",
displayForcePosition: false,
dismissOutsideClick: true,
dismissOnEscape: false,
useHeader: true,
useImmediate: false,
useButton: true,
buttonIcon: false,
useFocus: false,
useSetButton: true,
useCancelButton: false,
useTodayButton: false,
closeTodayButton: false,
useTomorrowButton: false,
closeTomorrowButton: false,
useClearButton: false,
useCollapsedBut: false,
usePlaceholder: false,
beforeOpenCallback: false,
beforeOpenCallbackArgs: [],
openCallback: false,
openCallbackArgs: [],
closeCallback: false,
closeCallbackArgs: [],
runOnBlurCallback: false,
startOffsetYears: false,
startOffsetMonths: false,
startOffsetDays: false,
afterToday: false,
beforeToday: false,
notToday: false,
maxDate: false,
minDate: false,
maxDays: false,
minDays: false,
maxYear: false,
minYear: false,
blackDates: false,
blackDatesRec: false,
blackDays: false,
whiteDates: false,
enableDates: false,
validHours: false,
minHour: false,
maxHour: false,
minTime: false,
maxTime: false,
maxDur: false,
minDur: false,
minuteStep: 1,
minuteStepRound: 0,
twoDigitYearCutoff: 38,
flipboxLensAdjust: false,
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" ],
      datetimeFieldOrder: [ "y", "m", "d", "h", "i", "s", "a" ],
      slideFieldOrder: [ "y", "m", "d" ],
      dateFormat: "%Y-%m-%d",
      datetimeFormat: "%Y-%m-%dT%k:%M:%S",
      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"
theme_clearBtn: [ "clear", "outline-secondary" ],
theme_closeBtn: [ "check", "outline-secondary" ],
theme_cancelBtn: [ "cancel", "outline-secondary" ],
theme_tomorrowBtn: [ "goto", "outline-secondary" ],
theme_todayBtn: [ "goto", "outline-secondary" ],
theme_dropdownContainer: "bg-light border border-dark mt-1",
theme_modalContainer: "bg-light border border-dark p-2",
theme_inlineContainer: "bg-light border border-dark my-2",
theme_headerTheme: "bg-dark",
theme_headerBtn: [ "cancel", "outline-secondary" ],
theme_openButton: "secondary",
theme_cal_Today: "info",
theme_cal_DayHigh: "outline-warning",
theme_cal_Selected: "success",
theme_cal_DateHigh: "outline-warning",
theme_cal_DateHighAlt: "outline-danger",
theme_cal_DateHighRec: "outline-warning",
theme_cal_Default: "outline-primary",
theme_cal_OutOfBounds: "outline-secondary border-0",
theme_cal_NextBtn: [ "next", "outline-dark" ],
theme_cal_PrevBtn: [ "prev", "outline-dark" ],
theme_cal_Pickers: false,
theme_cal_DateList: false,
theme_dbox_NextBtn: [ "plus", "outline-dark" ],
theme_dbox_PrevBtn: [ "minus", "outline-dark" ],
theme_dbox_Inputs: false,
theme_fbox_Selected: "success",
theme_fbox_Default: "light",
theme_fbox_Forbidden: "danger",
theme_fbox_RollHeight: "135px",
theme_slide_Today: "outline-info",
theme_slide_DayHigh: "outline-warning",
theme_slide_Selected: "outline-success",
theme_slide_DateHigh: "outline-warning",
theme_slide_DateHighAlt: "outline-danger",
theme_slide_DateHighRec: "outline-warning",
theme_slide_Default: "outline-primary",
theme_slide_NextBtn: [ "plus", "outline-dark border-0" ],
theme_slide_PrevBtn: [ "minus", "outline-dark border-0" ],
theme_slide_NextDateBtn: [ "next", "outline-dark border-0" ],
theme_slide_PrevDateBtn: [ "prev", "outline-dark border-0" ],
theme_slide_Pickers: false,
theme_slide_DateList: false,
theme_backgroundMask: {
  position: "fixed",
  left: 0,
  top: 0,
  right: 0,
  bottom: 0,
  backgroundColor: "rgba(0,0,0,.4)"
theme_headStyle: false,
theme_spanStyle: false,
buttonIconDate: "calendar",
buttonIconTime: "clock",
disabledState: "disabled",
tranDone: "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
calHighToday: true,
calHighPick: true,
calHighOutOfBounds: true,
calSelectedOutOfBounds: true,
calShowDays: true,
calOnlyMonth: false,
calShowWeek: false,
calUsePickers: false,
calNoHeader: false,
calYearPickMin: -6,
calYearPickMax: 6,
calYearPickRelative: true,
calFormatter: false,
calBeforeAppendFunc: function(t) {
  return t;
highDays: false,
highDates: false,
highDatesRec: false,
highDatesAlt: false,
calDateList: false,
calShowDateList: false,
durationStep: 1,
durationSteppers: {
  d: 1,
  h: 1,
  i: 1,
  s: 1
flen: {
  y: 25,
  m: 24,
  d: 40,
  h: 24,
  i: 30,
  s: 30,
  a: 30
fboxNatural: "default",
slideHighToday: true,
slideHighPick: true,
slideUsePickers: false,
slideNoHeader: false,
slideYearPickMin: -6,
slideYearPickMax: 6,
slideYearPickRelative: true,
slideDateList: false,
slideShowDateList: false



  • v5.1.2: Update


  • v5.1.1: Add option: disableWheel.


  • v5.1.0: bugfix; new options.


  • v5.0.0


  • v4.4.2


  • 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.