User-friendly Year Range Picker Component – JS Year Picker

Preview:

Description:

The JS Year Picker helps create an intuitive dual-list year picker interface that lets users choose a custom year range.

How to use it:

1. Include the JS Year Picker’s JavaScript and Stylesheet.

<link rel="stylesheet" href="/css/year-picker.css">
<script src="/js/year-picker.js"></script>

2. Create an empty DIV to hold the year picker.

<div id="example" class="container">
</div>

3. Initialize the year picker.

let instance = YearPicker("#example", {
    // options here
});

4. Set the min/max years.

let instance = YearPicker("#example", {
    range: [2000, 2030]
});

5. Define the preselected year(s).

let instance = YearPicker("#example", {
    preselected: [2020]
});

6. Get the selected year range.

let instance = YearPicker("#example", {
    updater: (selected) => {
      JSON.stringify(selected);
    }
});

7. API methods.

instance.Show();
instance.Hide();
instance.GetSelected();