Author: | weijhfly |
---|---|
Views Total: | 23,812 views |
Official Page: | Go to website |
Last Update: | September 28, 2019 |
License: | MIT |
Preview:

Description:
rolldate is a mobile-first, iOS-style, multi-format date picker component that uses better-scroll library for smooth scroll experience on the mobile & desktop.
How to use it:
Just import the minified version of the rolldate library and we’re ready to go.
<script src="rolldate.min.js"></script>
Create a normal input field to toggle the date picker.
<input readonly type="text" id="example" placeholder="">
Initialize the date picker on the input field and define the date format you prefer (Default: YYYY-MM-DD).
new Rolldate({ el: '#example', format: 'MM-YYYY' })
Set the step size. Default: 1.
new Rolldate({ el: '#example', minStep: 3 })
Set the start/end years.
new Rolldate({ el: '#example', beginYear: 2000, endYear: 2100 })
Set the trigger event. Default: tap.
new Rolldate({ el: '#example', trigger: 'tap' })
Localize the date picker.
new Rolldate({ el: '#example', lang: { title: 'Select A Date', cancel: 'Cancel', confirm: 'Confirm', year: '', month: '', day: '', hour: '', min: '', sec: '' } })
Callback functions.
new Rolldate({ el: '#example', init: function() { console.log('On init'); }, moveEnd: function(scroll) { console.log(scroll) console.log('scroll end'); }, confirm: function(date) { console.log(date) console.log('confirm'); }, cancel: function() { console.log('cancel'); } })
Set the default date.
new Rolldate({ el: '#example', value: '2017-10-21 23:52:50' })
Changelog:
v3.1.2 (09/28/2019)
- bugfix
v3.1.1 (09/07/2019)
- make
el
optional
Just what I was looking for. Wow, and …. THANK YOU! One question: is it possible to display the picker WITHOUT first having to click on the date field? I’d like to display it in large on my web app, almost like a “coming soon countdown date”. Looking forward to hearing from you, Helmar
One way is to simulate click event on page load
Is there a way to use this with Angular ?
Very useful. I just want to ask is there any way to show this component with other components without pop it up from bottom or dimming other components. Please help here.
I want to change the positioning of rolldate picker. Please suggest how I can do this.
Just amazing. I love it.
Thank you very much.