Skip to content

Files

Latest commit

 

History

History
 
 

docs

README.md

Vanilla JS Datepicker

A vanilla JavaScript remake of bootstrap-datepicker for Bulma and other CSS frameworks

This package is written from scratch as ECMAScript modules/Sass stylesheets to reproduce similar usability to bootstrap-datepicker.
It can work either standalone or with CSS framework (e.g. Bootstrap, Foundation), but works best with Bulma as it's developed primarily for Bulma.

The package also includes pre-built js/css files for those who like to use it directly on browser.

Features
  • Date picker (input-dropdown, inline), date range picker
  • Keyboard operation support (navigation by arrow keys, editing on input field)
  • i18n support (locales, CSS-based text direction detection)
  • Easily customizable to adapt stylesheet for various CSS frameworks
  • Dependency free
  • Made for modern browsers — no support for IE and Edge Legacy (aka non-Chromium Edge)
    ** If you need to support Edge Legacy, Web Components polyfill will allow this library to run on it.
  • Lightweight (well, relatively…) — 34kB (minified, uncompressed)
Demo

Live Online Demo

Quick Start

Install the package using npm.

npm install --save-dev vanillajs-datepicker
Date picker

– Input picker

  1. create a text input element.
<input type="text" name="foo">
  1. import the Datepicker module.
import Datepicker from 'path/to/node_modules/vanillajs-datepicker/js/Datepicker.js';

Or if you use a bundler that supports pkg.module (e.g. Rollup with node-resolve plugin, webpack)

import { Datepicker } from 'vanillajs-datepicker';

Or if your bundler supports package entry points (e.g. Rollup with node-resolve plugin v8.4+, webpack v5+), you can also do this.

import Datepicker from 'vanillajs-datepicker/Datepicker';
  1. call Datepicker constructor with the input element and, optionally, config options.
const elem = document.querySelector('input[name="foo"]');
const datepicker = new Datepicker(elem, {
  // ...options
});

– Inline picker

  1. create a block element.
<div id="foo" data-date="01/25/2020"></div>

  1. import the Datepicker module in the same way as Input picker.

  2. call Datepicker constructor with the block element and, optionally, config options.

const elem = document.getElementById('foo');
const datepicker = new Datepicker(elem, {
  // ...options
});

Date range picker
  1. create a block element that contains 2 text input elements.
<div id="foo">
  <input type="text" name="start">
  <span>to</span>
  <input type="text" name="end">  
</div>
  1. import the DateRangePicker module.
import DateRangePicker from 'path/to/node_modules/vanillajs-datepicker/js/DateRangePicker.js';

Or if you use a bundler that supports pkg.module (e.g. Rollup with node-resolve plugin, webpack)

import { DateRangePicker } from 'vanillajs-datepicker';

Or if your bundler supports package entry points (e.g. Rollup with node-resolve plugin v8.4+, webpack v5+), you can also do this.

import DateRangePicker from 'vanillajs-datepicker/DateRangePicker';
  1. call DateRangePicker constructor with the block element and, optionally, config options.
const elem = document.getElementById('foo');
const rangepicker = new DateRangePicker(elem, {
  // ...options
});

Stylesheet
  1. import scss file.
@import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker';

Using with CSS framework

Bulma

  1. import scss file for Bulma instead.
@import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker-bulma';

Bootstrap

  1. use buttonClass: 'btn' option to call Datepicker/DateRangePicker constructor.
const datepicker = new Datepicker(elem, {
  buttonClass: 'btn',
});
  1. import scss file for Bootstrap instead.
@import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker-bs5';

Or if your Bootstrap's version is v4.x

@import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker-bs4';

Foundation

  1. import scss file for Foundation instead.
@import 'path/to/node_modules/vanillajs-datepicker/sass/datepicker-foundation';

Other frameworks

  1. If the framework uses a specific class for button elements, set it to the buttonClass option to call Datepicker/DateRangePicker constructor.
const datepicker = new Datepicker(elem, {
  buttonClass: 'uk-button',
});
  1. Copy the following template into your sass stylesheet, and edit the node_module path, the variables, button class and button style adjustments to match your environment.
/***
 Copy the datepicker variables (the ones with `dp-` prefix and `!default` flag)
 from `sass/Datepicker.scss` to here
 Then, edit them using your framework's variables/values
 e.g.:
 $dp-background-color: $background !default;
 $dp-border-color: $border !default;
 ...
 ***/

@import '../node_modules/vanillajs-datepicker/sass/mixins';

@mixin dp-button {
  .button {
    /***
     Place style adjustment for date picker's buttons here, if needed
     ***/

    .datepicker-header & {
      @include dp-header-button-common;

      /***
       Place style adjustment specific to the header buttons here, if needed
       ***/
    }

    .datepicker-footer & {
      @include dp-footer-button-common;

      /***
       Place style adjustment specific to the footer buttons here, if needed
       ***/
    }
  }
}

@import '../node_modules/vanillajs-datepicker/sass/datepicker';

Using from Browser

  1. From CDN, load css and js files.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker.min.css">

...

<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/datepicker-full.min.js"></script>

If you use Bulma, Bootstrap (v5, v4) or Foundation, you can use the css for your framework instead.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker-bulma.min.css">
<!-- or -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker-bs5.min.css">
<!-- or -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker-bs4.min.css">
<!-- or -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker-foundation.min.css">

And if don't need date range, you can use the datepicker-only version of js file.

<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/datepicker.min.js"></script>
  1. Call Datepicker/DateRangePicker constructor in the same way as explained above. (The classes are exposed to global scope.)
const elem = document.querySelector('input[name="foo"]');
const datepicker = new Datepicker(elem, {
  // ...options
});