Infinite Scrolling Date Picker UI With Pure JavaScript

Category: Date & Time , Javascript | May 31, 2017

0 Comment

Demo Download

AUTHOR:	patrickkunka
VIEWS TOTAL:	6,469 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	May 31, 2017
LICENSE:	MIT

---

Preview:

Description:

A pure JavaScript date picker component that enables the user to select a date from an infinite scrolling calendar UI.

How to use it:

Load the main style sheet ‘styles.css’ to style the date picker.

<link rel="stylesheet" href="styles.css">

Create a regular text field to accept the date input.

<input name="date" value="2017-05-31"/>

Load the JavaScript file ‘datepicker.js’ right before the closing body tag.

<script src="datepicker.js"></script>

Initialize the date picker and we’re done.

var input = document.querySelector('input[name="date"]');
var picker = datepicker(input);

Event listeners.

input.addEventListener('change', () => {
  console.log('change', input.value);
});

input.addEventListener('input', () => {
  console.log('input', input.value);
});

All default options to customize the date picker.

var picker = datepicker(input,{
    animation: {
        duration: 200,
        easing:   'cubic-bezier(0.86, 0, 0.07, 1)'
    },
    behavior: {
        closeOnSelect: true
    },
    callbacks: {
        onSelect:     null,
        onOpen:       null,
        onClose:      null,
        onChangeView: null
    },
    classNames: {
        block:              'datepicker',
        elementCalendar:    'calendar',
        elementDay:         'day',
        elementWeek:        'week',
        elementMonth:       'month',
        elementHeader:      'header',
        elementMarker:      'marker',
        elementButton:      'button',
        elementButtonGroup: 'button-group',
        elementHeading:     'heading',
        modifierActive:     'active',
        modifierToday:      'today',
        modifierSelected:   'selected',
        modifierPadding:    'padding',
        modifierWeekend:    'weekend',
        modifierNextMonth:  'next-month',
        modifierPrevMonth:  'prev-month',
        modifierNextYear:   'next-year',
        modifierPrevYear:   'prev-year',
        delineatorElement:  '_',
        delineatorModifier: '__'
    },
    transform: {
        input:  null,
        output: null
    }
});