About date picker

This jQuery plugin allows you to add a date picker to make it easier to select dates to your Bootstrap form. This date picker can be fully customized to match the look and feel you want using HTML and CSS.

Examples

Simplest example to display a date picker.

<div class="bfh-datepicker">
</div>

Example showing how to set a default date and format.

<div class="bfh-datepicker" data-format="y-m-d" data-date="today">
</div>

Example showing how to set a range and not close on selecting a date.

<div class="bfh-datepicker" data-min="01/15/2013" data-max="today" data-close="false">
</div>

Available languages

  • English (US)
  • Spanish (ES)
  • Spanish (US)

Options

Option Description
icon String. Class name for the icon on the input. Default: 'glyphicon glyphicon-calendar'
align String. Alignment for the icon 'left' or 'right'. Default: 'left'
input String. Class name for styling the input. Default: 'form-control'
placeholder String. Text for the placeholder of the input. Default: ''
name String. Name of the input. Default: ''
date String. Initial date. Default: 'today'
format String. To change the date format. Default: 'm/d/y'
min String. To restrict the minimum selectable date. Default: ''
max String. To restrict the maximum selectable date. Default: ''
close Boolean. To close the calendar on selecting a date. Default: true

Methods

Method Description
$().bfhdatepicker('toggle') Toggles the calendar.

Events

Event Description
change.bfhdatepicker This event fires immediately when a date is selected.
show.bfhdatepicker This event fires immediately when the show instance method is called.
shown.bfhdatepicker This event is fired when the select has been made visible to the user (will wait for CSS transitions, to complete).
hide.bfhdatepicker This event is fired immediately when the hide instance method has been called.
hidden.bfhdatepicker This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).