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

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