Calio
Calio is an un-opinionated date picker built for modern browsers using Svelte.
What does that mean? Zero-dependency, vanilla JS that is lean and ready to use where ever you need a date picker.
Browser support
Out of the box, Calio includes a lean, modern-browser bundle by default and a polyfilled version of the bundle that has browser support reflected in the table below.
;// or ;
IE* | Chrome | Edge | Firefox | Safari / iOS | UC Android | Samsung |
---|---|---|---|---|---|---|
11 | 60+ | 15+ | 53+ | 10+ | 11+ | 6+ |
*IE11 support requires the inclusion of additional CSS.
Demo
Usage
npm install calio --save
;
or manually include dist/calio.polyfilled.min.js
in your HTML:
Then, instantiate your date picker!
'#calio';
Examples
You may notice at this point that this really is just a date picker. Where's the navigation? What about the currently month being viewed? These are not imposed on you out of the box, but can easily be added in whatever way works best for your design. Here are a couple striped down examples of how you may integrate Calio into your project, more API details can be found further below.
Navigation
PrevTodayNext
That wasn't too bad, was it!
Current
Displaying things like the current selection or view is pretty easy too.
Options
Defaults:
el headers: 'Su' 'Mo' 'Tu' 'We' 'Th' 'Fr' 'Sa' mode: 'single' strict: false disabled: value: null limit: null min: null max: null ;
headers
An array of values you would like to use as the days of the week. You can also disable headers all together by passing false
.
el headers: 'S' 'M' 'T' 'W' 'T' 'F' 'S' ;
single|multi|range
mode single
- (default) acts as a basic date picker, the user picks a single date at any given time.
multi
- allows the user select multiple dates at once.
range
- allows the user to select only two dates at a time—highlighting all dates between their selections.
el mode: 'range';
value
An initial value for the date picker. This can be:
- a Javascript Date object
- a string or number accepted by Javascript's Date object
- or a returned date item (such as a selection) from another instance of Calio.
el value: '1988-11-25';
In the case of multi
or range
mode, this should be an array of any of the above types.
el mode: 'range' value: 2018 5 1 '2018-06-03' ;
If you need to pass the year, month, and day to the underling Date
object as individual arguments for any of the modes pass them as an array of arrays. e.g. [[2018, 0, 1]]
el mode: 'multi' value: 2018 5 1 2018 5 2 2018 5 3 ;
limit
Only applies to mode: 'multi'
The number of selections that can be made in multi
mode. Has no effect in single
or range
modes.
el mode: 'multi' limit: 3;
disabled
A date or array of dates that cannot be selected.
el disabled: ;
strict
Only applies to mode: 'range' with a disabled date or dates
Whether to allow a date range to pass through a disabled date. If true
a user will not be able to select a second date if a disabled date falls within the created range.
el mode: 'range' strict: true disabled: 2018 5 1 2018 5 3 ;
min
A minimum date that can be selected. Can accept any type that value
does. Any date on the datepicker before the provided minimum will not be selectable.
el min: ;
max
A maximum date that can be selected. Can accept any type that value
does. Any date on the datepicker after the provided maximum will not be selectable.
el max: ;
Events
view
This event fires whenever the currently displayed month is updated and is passed an instance of the 1st of the displayed month.
const calio = el; calio;// orel;
selection
This event fires whenever the user selects a new date and is passed the full selection of the current Calio instance.
const calio = el; calio;// orel;
API
select(day)
Problematically make a selection.
const calio = el; if someCondition calio;
makeMyDay(day)
Normalizes any selection value object, Date
object, or Date
parsable string/integer into the object Calio uses for dates.
const calio = el;const today = calio; calio;
setMin(day)
Updates minimum date that can be selected to any passed selection value object, Date
object, or Date
parsable string/integer.
const calio = el; calio; // Only future dates are selectable.
setMax(day)
Updates minimum date that can be selected to any passed selection value object, Date
object, or Date
parsable string/integer.
const calio = el; calio; // Only past dates are selectable.
setDisabled(day)
Updates the date or array of dates that cannot be selected.
const calio = el; calio; // Today cannot be selected.
goToYear(y)
Jump to the (full 4-digit) year provided.
const calio = el; calio;
goToNextYear()
Jump to the next year.
const calio = el; calio;
goToLastYear()
Jump to the previous year.
const calio = el; calio;
goToMonth(m)
Jump to the month provided. Works with a conventional 1-12 index (i.e. 1: Jan, 2: Feb, etc…) as opposed to the 0 based index that Javascript's Date object uses for months.
const calio = el; calio;
goToNextMonth()
Jump to the next month.
const calio = el; calio;
goToLastMonth()
Jump to the previous month.
const calio = el; calio;
goToThisMonth()
Jump to this month (i.e. jump to today).
const calio = el; calio;
goToSelection()
Only works in mode: 'single'
Jump to the currently selected date when in the default 'single' mode.
For 'multi' or 'range' mode, see goTo(day)
below.
const calio = el; calio;
goTo(day)
Jump directly to any passed selection value object, Date
object, or Date
parsable string/integer.
const calio = el mode: 'multi' value: '2018-02-05' '2018-06-12' '2018-07-24' ; calio;
Styling
MIT License. © 2017 Cornelius Ukena.