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
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.