โ This package currently only contains the logic for a date picker and does not claim to be a fully functional UI component at this time!
Callie is a lightweight modular datepicker splitted into three main components:
- Date logik (model)
- Transformation and mapping to prepare for view
- Render logik (view) Each of these components can be replaced by other solutions independently.
Name | Description | Default |
---|---|---|
weeksPerMonth | (number) Amount of weeks per month | 6 |
daysPerWeek | (number) Amount of days per week | 7 |
useWeeks | (boolean) Render row with day name shorts in the month view | true |
containerSelector | (string) Selector for the main container | '[data-role=container]' |
daysTargetSelector | (string) Selector of node to insert days list in | '[data-role=days]' |
monthsTargetSelector | (string) Selector of node to insert month list in | '[data-role=months]' |
yearsTargetSelector | (string) Selector of node to insert years list in | '[data-role=years]' |
selectedStateClassName | (string) ClassName to be used on selected date elements | 'selected' |
currentStateClassName | (string) ClassName to be used on current date elements | 'current' |
disabledStateClassName | (string) ClassName to be used on disabled date elements | 'disabled' |
format | (string) Date format template for parsing and formating fallback | 'dd.mm.yyyy' |
noTouch | (boolean) Set if picker should be used even on touch devices | false |
isOpen | (boolean) Picker initially opened | false |
dateNamesFallback | (object) Fallback for date names for browsers not supporting Internatinalization API | English names |
Modifier | Description |
---|---|
--slide | Adds slide transition between views |
--fade | Adds fade transition between views |
- Chrome
- Safari 9+
- For Safari 9 see
dateNamesFallback
andformat
in JS options
- For Safari 9 see
- Firefox
- Internet Explorer 11+
- Providing a fully functional UI component
- Implementing an API to set and get properties of datepicker instance