Vanilla-datepicker NPM

Vanilla Datepicker

It is a javascript library without dependencies to provide a consistent datepicker experience through different browsers.

Try it out, demo!

Getting Started

This module is exported by webpack as a UMD bundle library.

output.libraryTarget: "umd"

Install

$ npm install vanilla-datepicker --save

Javascript

const datepicker = require('vanilla-datepicker');

datepicker();

Markup

It renders the datepicker through each group of following markup

<div class="datepicker">
  <input type="text" class="datepicker__input" />
</div>

datepicker

Callback

Provide a callback to get an update (date) from each field and its reference

const datepicker = require('vanilla-datepicker');

datepicker(function (date, input) {
  // Default format MM / DD / YYYY
  input.value = 'A different date format: ' + date.getDate();
});

Color change

Use one level of specificity to modify colors

.app .date__header {
  background: darkcyan;
}

.app .date--active {
  background: darkcyan;
}

datepicker

Config Object

Not required. But useful if you want to change the language of months or if you require a different range of selection for year in the calendar header.

var config = {
  yearConfig: {
    start: 2000, // Default 1900
    end: 2018    // Default 2100
  },
  // Specify a different monthString value. Default: English
  monthString: [
    'Ene',
    'Feb',
    'Mar',
    'Abr',
    'May',
    'Jun',
    'Jul',
    'Ago',
    'Sep',
    'Oct',
    'Nov',
    'Dic'
  ]
};

datepicker(config, function (date, input) {
  // Default format MM / DD / YYYY
  input.value = 'A different date format: ' + date.getDate();
});