Clean Date & Time Picker with jQuery and Bootstrap 3

Clean Date & Time Picker with jQuery and Bootstrap 3
File Size: 1.32 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A Bootstrap 3 based date/time picker plugin which adds a simple, clean, user-friendly date & time selector UI to your input text fields.

See also:

How to use it:

1. Include jQuery library and the Bootstrap Date/Time Picker's files in your webpage.

<link href="build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="build/js/bootstrap-datetimepicker.min.js"></script>

2. Include the necessary Bootstrap 3 framework and Moment.js JS library in the web page.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

3. Create a normal text input for the date & time picker.

<div class="input-group date" id="example">
  <input type="text" class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span> 
  </span>
</div>

4. Call the function to enable the plugin.

$('#example').datetimepicker();

5. Customization options.

// Date format. See moment.js' docs for valid formats.
format: false,

// Changes the heading of the datepicker when in "days" view.
dayViewHeaderFormat: 'MMMM YYYY',

// Allows for several input formats to be valid. 
extraFormats: false,

// Number of minutes the up/down arrow's will move the minutes value in the time picker
stepping: 1,

// Prevents date/time selections before this date
minDate: false,

// Prevents date/time selections after this date
maxDate: false,

// On show, will set the picker to the current date/time
useCurrent: true,

// Using a Bootstraps collapse to switch between date/time pickers.
collapse: true,

// See moment.js for valid locales.
locale: moment.locale(),

// Sets the picker default date/time. 
defaultDate: false,

// Disables selection of dates in the array, e.g. holidays
disabledDates: false,

// Disables selection of dates NOT in the array, e.g. holidays
enabledDates: false,

// Change the default icons for the pickers functions.
icons: {
  time: 'glyphicon glyphicon-time',
  date: 'glyphicon glyphicon-calendar',
  up: 'glyphicon glyphicon-chevron-up',
  down: 'glyphicon glyphicon-chevron-down',
  previous: 'glyphicon glyphicon-chevron-left',
  next: 'glyphicon glyphicon-chevron-right',
  today: 'glyphicon glyphicon-screenshot',
  clear: 'glyphicon glyphicon-trash'
},

// Defines if moment should use scrict date parsing when considering a date to be valid
useStrict: false,

// Shows the picker side by side when using the time and date together
sideBySide: false,

// Disables the section of days of the week, e.g. weekends.
daysOfWeekDisabled: [],

// Shows the week of the year to the left of first day of the week
calendarWeeks: false,

// The default view to display when the picker is shown
// Accepts: 'years','months','days'
viewMode: 'days',

// Changes the placement of the icon toolbar
toolbarPlacement: 'default',

// Show the "Today" button in the icon toolbar
showTodayButton: false,

// Show the "Clear" button in the icon toolbar
showClear: false,

// On picker show, places the widget at the identifier (string) or jQuery object if the element has css position: 'relative'
widgetPositioning: {
  horizontal: 'auto',
  vertical: 'auto'
},
widgetParent: null,

// Will cause the date picker to stay open after selecting a date if no time components are being used
keepOpen: false

Change log:

v4.17.45 (2017-01-14)

  • Update

v4.17.37 (2016-12-31)

  • Momentjs TZ intergration
  • Independent CSS file, in case you don't want bootstrap for some reason
  • bugfixes

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