User-friendly Birth Date Picker jQuery Plugin - dOb.js

File Size: 11 KB
Views Total: 1191
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
User-friendly Birth Date Picker jQuery Plugin - dOb.js

dOb.js is a lightweight and user-friendly date picker jQuery plugin that allows users to select a date from dropdowns quickly.

This datepicker is composed of three dropdowns - "year", "month", and "day". The year range can also be customized to fit the specific needs of your website or application.

See Also:

How to use it:

1. Create "year", "month", and "day" dropdowns on the page.

<div id="myBirthDate" class="myBirthDate">
  <select id="dOb_Y">
    <option value="2022">2022</option>
  </select>
  <select id="dOb_M">
    <option value="01">01</option>
  </select>
  <select id="dOb_D">
    <option value="01">01</option>
  </select>
</div>

2. Include both jQuery library and the dOb.js plugin on the page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/jquery.dOb.js"></script>

3. Initialize the DOB date picker.

$(function() {
  $("#myBirthDate").dOb({
    dOb_Y: '#dOb_Y',
    dOb_M: '#dOb_M',
    dOb_D: '#dOb_D',
  });
});

4. Set the range of selectable years.

$(function() {
  $("#myBirthDate").dOb({
    from_Y: 1990, // default: 2000
    to_Y: 2025, // default: 2023
  });
});

5. Determine whether to enable the leading 0 in the month/day. Default: true.

$(function() {
  $("#myBirthDate").dOb({
    isPadding: false,
  });
});

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