Check out a new date picker: easepick

Date range picker using Shadow DOM. Lightweight size, no dependencies.

Link Search Menu Expand Document

Litepicker

Date range picker - lightweight, no dependencies.

 

Features

  • No dependencies
  • Single date or date range
  • Show multiple months
  • Min/Max days for select and/or Min/Max dates for select
  • Select forward/backward
  • Inline mode
  • Repick date range
  • Lock days
  • Keyboard accessibility (with plugin)
  • Mobile friendly (with plugin)
  • Predefined ranges (with plugin)
  • Multiple select (with plugin)

Get started now View it on GitHub


Table of contents

  1. Getting started
  2. Usage
  3. No CSS version
  4. Bundle version (all plugins included)
  5. IE11
  6. About the project
  7. License

Getting started

Installation

npm

npm install litepicker

CDN

<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>

Be careful, this link will return the latest version.
To avoid breaking changes, you need to install a specific version.
See jsdelivr docs.

Usage

If you’re using a bundler, e.g. webpack, you’ll need to import Litepicker.

import Litepicker from 'litepicker';

If you encounter errors in Typescript, try adding esModuleInterop: true to your tsconfig.json. (see issue #53)

Now you can create Litepicker instance.

<script>
  const picker = new Litepicker({ 
    element: document.getElementById('litepicker') 
  });
</script>

No CSS version

To prevent the inclusion of the CSS styles tag in the head, you can define a global variable before initializing Litepicker:

window.disableLitepickerStyles = true;
const picker = new Litepicker({ ... });

Another way you can use version which does not include CSS styles.

import Litepicker from 'litepicker/dist/nocss/litepicker.umd.js';

Non-module environments

<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/nocss/litepicker.js"></script>

CSS basic styles

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/litepicker/dist/css/litepicker.css"/>

Bundle version (all plugins included)

Non-module environments

<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/bundle.js"></script>

IE11

To support IE11 you need to install polyfills litepicker-polyfills-ie11.

Example:

<--- include polyfill first --->
<script src="https://cdn.jsdelivr.net/npm/litepicker-polyfills-ie11/dist/index.js"></script>
<--- then include the Litepicker library --->
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>

If you’re using a bundler, e.g. webpack:

// Include this library first
import 'litepicker-polyfills-ie11';
// then import Litepicker
import Litepicker from 'litepicker';

About the project

Litepicker is © 2019-2022 by Rinat G.

License

Litepicker is distributed by an MIT license.