universal-datepicker v1.5.1
Table of Contents
About The Project
Lightweight datepicker component for your projects. It's fully compatible with any frameworks/libraries (React, Vue, Angular, ecc...). Light fast and customizable. Partially inspired by airbnb/react-dates.
Built With
This library does not have any dependencies. It's fully and totally pure vanilla javascript. We only used devDependencies to write modern code, beautify and bundle it:
Getting Started
This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.
- Clone the repo
git clone https://github.com/TheBous/universal-datepicker.git
- Install NPM packages
yarn
- Start your locally application
yarn start
Configurable options
DOMElement
: DOM element to which the calendar should be attached (es. body, #app)today
: Pass today from the parent application, so calendar can avoid to adapt itself to internalization and/or timezones. Today could be a jsDate
, a string formatted withYYYY/MM/DD
or an object{ year, month, day }
initialDate
: selected date to fit calendar to the right month/year on the splash screenweekdaysLabels
: Array of weekdays label in current languagemonthsLabels
: Array of months label in current languagecheckin
: checkin in javascript date format (checkin: new Date()).checkout
: checkout in javascript date format (checkout: new Date()).orientation
: calendar orientation : vertical with scroll or horizontal with arrows (horizontal|vertical).horizontalPages
: number of calendar page per view in horizontal view.verticalPages
: number of calendar page per view in vertical view.onCheckinChange
: (function) callback triggered with new checkin date (dd/mm/yyyy) .onCheckoutChange
: (function) callback triggered with new checkout date (dd/mm/yyyy) .maxCheckin
: max number of days between checkin and checkout (default = 30)leftArrowClassname
: Class to add some icon style to left arrowrightArrowClassname
: Class to add some icon style to right arrowshowTodayDate
: Boolean to show a custom UI for today date cellcustomCheckinElement
: DOM element to customize checkin calendar cell (ex ) customizable with position relative-absolutecustomCheckoutElement
: DOM element to customize checkout calendar cell (ex ) customizable with position relative-absolute
Installation
1: Install NPM packages
yarn add universal-datepicker
2: Add these lines when you want to show calendar
const UniversalCalendar = require("universal-datepicker");
const calendar = new UniversalCalendar({configs here})
3: Add a DOM element in your own project. Coincides with the DOMElement configuration
<div id="calendar"></div>
4: Horizontal arrows to switch months are <i></i>. You need to pass to application a class to these icons with leftArrowClassname and rightArrowClassname
{
...,
leftArrowClassname: "my-custom-right-arrow-class",
rightArrowClassname: "my-custom-right-arrow-class"
}
5: Add custom css hooking to existing classes
In order to add some style customization, you need to override these CSS classes (optional):
calendar__wrapper
: calendar generic wrappercalendar__wrapper--horizontal
: calendar wrapper with horizontal orientationcalendar__wrapper--vertical
: calendar wrapper with horizontal orientationcalendar__weekday
: Each generic weekday on the top of calendarcalendar__header
: Header with month - year valuescalendar__arrow-wrapper
: Horizontal calendar arrows wrappercalendar__arrow
: Arrow to change month in horizontal viewcalendar__arrow--left
: Arrow leftcalendar__arrow--right
: Arrow rightcalendar__cell
: Each generic calendar daycalendar__cell--past
: A past day in calendarcalendar__cell--checkin
: Selected checkin in calendarcalendar__cell--checkout
: Selected checkout in calendarcalendar__cell--range
: Date between checkin and checkoutcalendar__cell--today
: Today datecalendar__cell--today-highlighted
: Rule to custom today highlighting datecalendar__cell__decorator
: Decorator for checkin and checkout cells
Limits
With minor 1.2.0 a user can select a date up to 1 year from now.
Contact
TheBous - @the_bous - thebous1993@gmail.com
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago