Easy Customizable Birth Day Picker Plugin For Bootstrap

A jQuery & Bootstrap plugin that converts a normal text field into a birthday picker consist of three input fields (day/month/year) to simplify the selection of date of birth.

See also:

• Customizable Dropdown Birthday Picker Plugin with jQuery
• Minimalist jQuery Plugin For Birthday Selector - DOB Picker
• Minimal jQuery Plugin For Easy Birthday Picker

How to use it:

1. The plugin requires jQuery library and Bootstrap framework is loaded properly in the html page.

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

2. Load the bootstrap-birthday.js script after jQuery library:

<script src="dist/bootstrap-birthday.js"></script>

3. Call the function after passing a specific input field to the jQuery object as below:

$('#element').bootstrapBirthday()

4. Customize the birthday picker with the following options:

  $('#element').bootstrapBirthday({
  /**
   * The maxAge setting determines the oldest year you can pick for a birthday.
   * So if you set the maxAge to 100 and the current year is 2010, then the
   * oldest year you can pick will be 1910.
   */
  maxAge: 120,

  /**
   * The opposite of maxAge. If current year is 2010 and minAge is set to 18,
   * the earliest year that can be picked is 1992.
   */
  minAge: 0,

  /**
   * The futureDates setting determines whether birthdays in the future can be
   * selected. Unless you need to support entering birthdays of unborn babies,
   * this should generally be false.
   */
  futureDates: false,

  /**
   * The maxYear setting allows you to set the maximum year that can be chosen,
   * counting up from 0. If you pass in a year (such as 1980) then it uses that
   * year. If you pass in a number under 1000 (such as 5) then it adds it to
   * the current year, so if the year was 2010 then the maxYear would become
   * 2015.
   *
   * If you want the maxYear to be in the future, you must set futureDates to
   * true.
   * If you want the maxYear in the past, you can pass in a negative number or
   * a past year (if its over 1000).
   */
  maxYear: 0,

  /**
   * The dateFormat setting determines the order of the select fields in the
   * markup and supports the following three values:
   * - middleEndian: Month, Day, Year
   * - littleEndian: Day, Month, Year
   * - bigEndian: Year, Month, Day
   */
  dateFormat: 'middleEndian',

  /**
   * The monthFormat setting determines the text displayed in the month select
   * box. It can be either short, or long. i.e. Jan or January
   */
  monthFormat: 'short',

  /**
   * The placeholder adds a default option to each select list just like
   * Facebook does on their sign-up page.
   * The default option just says Month, Day, or Year with a colon after it.
   * If you keep this set to true, you will need to add logic, preferably on
   * the client and server, to ensure this option isn't chosen. The value for
   * these options is 0.
   */
  placeholder: true,

  /**
   * The tabindex setting determines the tab order of select elements.
   */
  tabindex: null,

  // Localization.
  text: {
    year: "Year",
    month: "Month",
    day: "Day",
    months: {
      short: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ],
      long: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      ]
    }
  },
  })

5. Customize the layout of your birthday picker in the 'widget' option.

$('#element').bootstrapBirthday({
  widget: {
    wrapper: {
      tag: 'div',
      class: 'input-group'
    },
    wrapperYear: {
      use: true,
      tag: 'span',
      class: 'input-group-addon'
    },
    wrapperMonth: {
      use: true,
      tag: 'span',
      class: 'input-group-addon'
    },
    wrapperDay: {
      use: true,
      tag: 'span',
      class: 'input-group-addon'
    },
    selectYear: {
      name: 'birthday[year]',
      class: 'form-control input-sm'
    },
    selectMonth: {
      name: 'birthday[month]',
      class: 'form-control input-sm'
    },
    selectDay: {
      name: 'birthday[day]',
      class: 'form-control input-sm'
    }
  },
})

6. Callback function.

$('#element').bootstrapBirthday({
  onChange: function () {}
})

 

---

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