Custom Date & Time Picker For Bootstrap 4

Time & Clock
Customizable Date & Time Picker For Bootstrap 4
File Size: 83.99 KB
Views Total: 936 views
Last Update:January 20, 2024
Publish Date: January 20, 2017
Official Website: Go to website
License: MIT
Plugin Author: tempusdominus
Demo    Download

A Free jQuery Plugins with Bootstrap 4 Date Time Picker is a user-friendly and customizable plugin that allows users to select dates and times using a pop-up calendar interface. Also provide with inline calender, year view, i18n and input date picker. The plugin uses the Bootstrap 4 framework and jQuery to create a sleek and responsive design. With a variety of options and settings available, the Date Time Picker can be customized to meet the specific needs of your project. Overall, the Bootstrap 4 Date Time Picker is a powerful tool for simplifying date and time selection for your users.

Powerful Multilingual Date/Time Picker – Tempus Dominus

Main features:

  • Multiple languages and timezone support.
  • Date only and Time only modes.
  • Min/max dates.
  • Custom trigger icons.
  • Enables/disables specific dates.
  • Supports year/week view.
  • ‘decades’,’years’,’months’,’days’ views.
  • Allows to disable days of the week.
  • Custom datetime format.
  • Lots of options, API methods and events.

How to use :

Add the jQuery library, moment.js and Bootstrap 4’s stylesheet in the document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/moment-with-locales.min.js"></script>

Add Font Awesome icons .

<link rel="stylesheet" href="/path/to/fontawesome.min.css">

 Add the Tempus Dominus Bootstrap 4 plugin’s files in the document.

<link href="build/css/tempusdominus-bootstrap-4.css" rel="stylesheet">
<script src="build/js/tempusdominus-bootstrap-4.js"></script>

The HTML structure for the date & time picker.

<div class="input-group date" id="datetimepicker-demo" data-target-input="nearest">
  <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker-demo"/>
  <div class="input-group-append" data-target="#datetimepicker-demo" data-toggle="datetimepicker">
    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
  </div>
</div>

Initialize the plugin to generate a default date & time picker for the input field.

$('#datetimepicker-demo').datetimepicker();

Customize the date & time picker by overriding the default options as displayed below:

$('#datetimepicker-demo').datetimepicker({

  // requires moment-timezone.js
  timeZone: '',

  // date format
  // http://momentjs.com/docs/#/displaying/format/
  format: false,
  dayViewHeaderFormat: 'MMMM YYYY',
  extraFormats: false,

  // step size
  stepping: 1,

  // min/max dates
  minDate: false,
  maxDate: false,

  // uses current date/time
  useCurrent: true,

  // uses Bootstraps collapse to switch between date/time pickers
  collapse: true,

  // https://github.com/moment/moment/tree/develop/locale
  locale: moment.locale(),

  // default date
  defaultDate: false,

  // disabled dates
  // array of [date, moment, string]
  disabledDates: false,

  // enabled dates
  // array of [date, moment, string]
  enabledDates: false,

  // default icons
  icons: {
    time: 'fa fa-clock-o',
    date: 'fa fa-calendar',
    up: 'fa fa-arrow-up',
    down: 'fa fa-arrow-down',
    previous: 'fa fa-chevron-left',
    next: 'fa fa-chevron-right',
    today: 'fa fa-calendar-check-o',
    clear: 'fa fa-delete',
    close: 'fa fa-times'
  },

  // tooltip options
  tooltips: {
    today: 'Go to today',
    clear: 'Clear selection',
    close: 'Close the picker',
    selectMonth: 'Select Month',
    prevMonth: 'Previous Month',
    nextMonth: 'Next Month',
    selectYear: 'Select Year',
    prevYear: 'Previous Year',
    nextYear: 'Next Year',
    selectDecade: 'Select Decade',
    prevDecade: 'Previous Decade',
    nextDecade: 'Next Decade',
    prevCentury: 'Previous Century',
    nextCentury: 'Next Century',
    pickHour: 'Pick Hour',
    incrementHour: 'Increment Hour',
    decrementHour: 'Decrement Hour',
    pickMinute: 'Pick Minute',
    incrementMinute: 'Increment Minute',
    decrementMinute: 'Decrement Minute',
    pickSecond: 'Pick Second',
    incrementSecond: 'Increment Second',
    decrementSecond: 'Decrement Second',
    togglePeriod: 'Toggle Period',
    selectTime: 'Select Time',
    selectDate: 'Select Date'
  },

  // uses strict
  useStrict: false,

  // displays side by side
  sideBySide: false,

  // disabled days of the week
  daysOfWeekDisabled: false,

  // shows the week of the year
  calendarWeeks: false,

  // 'decades','years','months','days'
  viewMode: 'days',

  // toolbar placement
  toolbarPlacement: 'default',

  // enable/disable buttons
  buttons: {
    showToday: false,
    showClear: false,
    showClose: false
  },

  // widget position
  widgetPositioning: {
    horizontal: 'auto',
    vertical: 'auto'
  },

  // string or jQuery object
  widgetParent: null,

  // ignore read only input
  ignoreReadonly: false,

  // always keep open
  keepOpen: false,

  // shows on focus
  focusOnShow: true,

  // inline mode
  inline: false,

  // makes the date picker not revert or overwrite invalid dates
  keepInvalid: false,

  // debug mode
  debug: false,

  // shows on focus and icon click
  allowInputToggle: false,

  // disables time selection
  disabledTimeIntervals: false,

  // disables/enables hours
  disabledHours: false,
  enabledHours: false,

  // changes the viewDate without changing or setting the selected date
  viewDate: false,

  // allows multiple dates
  allowMultidate: false,

  // custom separator
  multidateSeparator: ','
  
});

 API methods.

// shows the date/time picker
$('#datetimepicker-demo').datetimepicker('show');

// hides the date/time picker
$('#datetimepicker-demo').datetimepicker('hide');

// toggles the date/time picker
$('#datetimepicker-demo').datetimepicker('toggle');

// destroys the date/time picker
$('#datetimepicker-demo').datetimepicker('destroy');

// enables the date/time picker
$('#datetimepicker-demo').datetimepicker('enable');

// disables the date/time picker
$('#datetimepicker-demo').datetimepicker('disable');

// clears the date/time picker
$('#datetimepicker-demo').datetimepicker('clear');

// returns a moment variable with the currently set options
$('#datetimepicker-demo').datetimepicker('viewDate');

Event handlers.

$('#datetimepicker-demo').datetimepicker()
.on('hide.datetimepicker', function(date){
  // after hidden
})

.on('show.datetimepicker', function(date){
  // after shown
})

.on('change.datetimepicker', function(date,oldDate){
  // when the date is changed
})

.on('error.datetimepicker', function(date,oldDate){
  // when a selected date fails to pass validation
})

.on('update.datetimepicker', function(date,viewDate){
  // when the viewDate changes
})

Done

Thanks for make jQuery plugin is developed by tempusdominus For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • 5.39.0
  • 5.1.2
  • 5.1.1
  • 5.1.0
  • 5.0.1
  • 5.0.0
  • 5.0.0-alpha18
  • 5.0.0-alpha.17
  • 5.0.0-alpha.16
  • 5.0.0-alpha.15
  • 5.0.0-alpha14
  • 5.0.0-alpha13
  • 5.0.0-alpha12
  • 5.0.0-alpha10
  • 5.0.0-alpha8

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.