Scroll date picker

Scroll Date Picker – This is a free custom scroll date picker that mimics the iOS-style date picker with a wheel scrolling selection effect. It offers a more visually appealing alternative to the default HTML date picker. You can easily customize the layout of the date picker to meet user needs, and you can set its design as a popup using CSS or utilize the default slide effect from the bottom.

Picker Example:

You can easily change the text in the JavaScript file by editing it. This is a fully customizable date picker.

Click to Open Demo:

Picker HTML

 <input readonly class="form-control" type="text" id="date-group1-2" placeholder="YYYY-MM-DD">
Always use unique ID like this input field has date-group1-2

Picker JS Code

<script src="https://cdn.jsdelivr.net/npm/rolldate@3.1.3/dist/rolldate.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const datePicker = new Rolldate({
                el: '#date-group1-2',
                format: 'YYYY-MM-DD',
                beginYear: 2000,
                endYear: 2100
            });
        });
    </script>