Nefarious Pomegranate Magnate

    vanilla-datepicker

    1.1.6 • Public • Published

    Vanilla Datepicker

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

    Try it out, demo!

    Build Status npm version npm downloads

    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();
    });

    Project Dev Tools

    Project Scripts

    • npm start
    • npm run build

    Install

    npm i vanilla-datepicker

    DownloadsWeekly Downloads

    32

    Version

    1.1.6

    License

    MIT

    Last publish

    Collaborators

    • jberivera