Mobile-first iOS-style Date Picker In Vanilla JavaScript – rolldate

Category: Date & Time , Javascript , Recommended | September 28, 2019
Author:weijhfly
Views Total:5,914 views
Official Page:Go to website
Last Update:September 28, 2019
License:MIT

Preview:

Mobile-first iOS-style Date Picker In Vanilla JavaScript – rolldate

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

You Might Be Interested In:


5 thoughts on “Mobile-first iOS-style Date Picker In Vanilla JavaScript – rolldate

  1. Helmar

    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

    Reply
  2. Jojo

    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.

    Reply
  3. Jojo

    I want to change the positioning of rolldate picker. Please suggest how I can do this.

    Reply

Leave a Reply