Easy Customizable Birth Day Picker Plugin For Bootstrap
File Size: | 18.8 KB |
---|---|
Views Total: | 8067 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.