<caribou-datepicker> is a Polymer 2 custom input element with a picker overlay used to select a date.
This element follow the material design guidelines : Pickers
This element can be used juste like that, but also be decomposed.
If you don't want to use the input build in, you can use your custom input and juste use the <caribou-calendar> element.
To customize the <caribou-datepicker> globally, on you instance you can set these properties :
| Custom property | Description | Default |
|---|---|---|
--header-overlay-background-color |
Color of the header background | --primary-color |
--header-text-secondary-color |
Color of the text not in focus in the header | --primary-light-color |
--action-button-color |
Text color of the action button | --primary-color |
--current-active-day-color |
Color of the current date value | --primary-color |
--current-selected-day-color |
Color of the selected date | --primary-color |
--current-selected-year-color |
Color of the current year selected | --primary-color |
--input-calendar-icon |
Mixin to customize the input calendar icon | {} |
To see the styling by element check the <caribou-calendar>, <caribou-year>, <caribou-month>.
<caribou-datepicker init-with-current-date label="My Caribou Date Picker" error-massage="Oops.. You are out of time !">
</caribou-datepicker>- Display the overlay according the screen
- Modal dialog on mobile..?
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
Apache License 2.0