Birthday Picker

iOS-style wheel picker for birthday selection (month/day only, without year).

Features

• iOS-style infinite scroll wheels
• Automatic localization (month names, day/month order via Intl API)
• Bootstrap 5 integration (sizes, input-groups, validation states)
• RTL support
• Auto-positioning (dropup when near bottom)
• Touch and mouse support
• HTML5 validation (required attribute)
• Clear button support
• Full API (getValue, setValue, open, close, clear)
• Events (input, change, birthday-picker:change)

Installation

CDN (jsDelivr)

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/birthday-picker.min.css"
      integrity="sha384-NDF7NYI9/arsBYaRjIBRhLmU1n0knWxL6vBmz35yP8YwTZWujBznRiAhgfHxjVBK"
      crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/birthday-picker.min.js"
        integrity="sha384-3Bpe+TqozFzn7Qkw5X+P5GkdPqAvmC2+F85xdDWyLF+GOIyAmbJh6NW2kN3eTQ+I"
        crossorigin="anonymous"></script>

CDN (unpkg)

<link rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/birthday-picker.min.css"
      integrity="sha384-NDF7NYI9/arsBYaRjIBRhLmU1n0knWxL6vBmz35yP8YwTZWujBznRiAhgfHxjVBK"
      crossorigin="anonymous">

<script src="https://unpkg.com/[email protected]/dist/birthday-picker.min.js"
        integrity="sha384-3Bpe+TqozFzn7Qkw5X+P5GkdPqAvmC2+F85xdDWyLF+GOIyAmbJh6NW2kN3eTQ+I"
        crossorigin="anonymous"></script>

NPM

npm install lliure-birthday-picker

import 'lliure-birthday-picker/src/birthday-picker.css';
import 'lliure-birthday-picker/src/birthday-picker.js';

Manual

Download birthday-picker.js and birthday-picker.css from the src/ folder.

Usage

Auto-initialization

Add class birthday-picker to any input:

<input type="text" class="form-control birthday-picker" value="03-15">

The picker initializes automatically on DOMContentLoaded.

Manual initialization

// By selector
BirthdayPicker.init('.my-picker');

// By element
BirthdayPicker.init(document.getElementById('myInput'));

// With options
BirthdayPicker.init('.my-picker', {
    onChange: function(data) {
        console.log(data.value);     // "03-15"
        console.log(data.month);     // 2 (0-indexed)
        console.log(data.day);       // 15
        console.log(data.formatted); // "March 15" or "15 de marzo"
    }
});

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | onChange | Function | null | Callback when value changes | | locale | String | auto | Locale for month names (e.g., 'pt-BR', 'es-MX') |

Data Attributes

| Attribute | Values | Description | |-----------|--------|-------------| | data-position | start, center, end | Dropdown alignment | | data-allow-clear | true, false | Show clear button (default: true if not required) | | dir | rtl | Enable right-to-left mode | | disabled | - | Disable the picker | | required | - | Make field required (hides clear button) |

API

Get the picker instance:

const picker = BirthdayPicker.getInstance(inputElement);
// or
const picker = inputElement._birthdayPicker;

Methods

picker.getValue();        // Returns "MM-DD" or null
picker.setValue('03-15'); // Set value
picker.clear();           // Clear value
picker.open();            // Open dropdown
picker.close();           // Close dropdown
picker.destroy();         // Remove picker

Events

Native events

// 'input' and 'change' events fire on the original input
input.addEventListener('change', (e) => {
    console.log(e.target.value); // "03-15"
});

Custom event

// 'birthday-picker:change' fires on the container with more details
container.addEventListener('birthday-picker:change', (e) => {
    console.log(e.detail.value);     // "03-15"
    console.log(e.detail.month);     // 2 (0-indexed)
    console.log(e.detail.day);       // 15
    console.log(e.detail.formatted); // "March 15"
});

Bootstrap Integration

Works seamlessly with Bootstrap 5:

<!-- Sizes -->
<input class="form-control form-control-sm birthday-picker">
<input class="form-control birthday-picker">
<input class="form-control form-control-lg birthday-picker">

<!-- Input groups -->
<div class="input-group">
    <span class="input-group-text"><i class="fas fa-gift"></i></span>
    <input class="form-control birthday-picker">
</div>

<!-- Validation states -->
<input class="form-control birthday-picker is-valid">
<input class="form-control birthday-picker is-invalid">

Value Format

The picker uses MM-DD format (zero-padded):

• 01-15 = January 15
• 03-25 = March 25
• 12-31 = December 31

Browser Support

• Chrome, Firefox, Safari, Edge (modern versions)
• iOS Safari, Android Chrome
• Requires ES6+ support

License

MIT