Animating Angular Datepicker
An Animating Datepicker for Angular 2+. For some smooth date picking :). Including range functionality, multiple calendars next to each other and loads of other functionality. Checkout the Demo page for a preview.
Want an improvement or found bug? please use the pull request functionality or create an issue.
Some existing- and upcoming features
- Directive
- Reactive Forms Support
- Multiple Calendars next to each other
- Composable footer
- Themable
- Multi Languages support using Intl.DateTimeFormat
- Animations
- i18n
- Keyboard control
- ...
Installation
To install go through the following steps
npm install ngx-animating-datepicker --save
-- or --yarn add ngx-animating-datepicker
- Add
AaDatepickerModule
to your module imports:
;
Basic Usage
Implement the datepicker component in one of the following ways
1. Inline Animatepicker
Implement aa-animatepicker component inline
2. As Directive
Implement datepicker as a directive
Options
The options can be used for the inline- as well as the directive implementation.
In the following example you'll see the default options:
datepickerOptions: Options =;
Directive options
These options can be used only on the directive like so
In the following example you'll see the default options
directiveOptions: DirectiveOptions =;
@Input's()
The following inputs are available for the Animatepicker
minDate: Date; // Disables dates until this date maxDate: Date; // Disables dates from this date language: string; // Set the locale string. Example: nl-NL numberOfMonths: number; // Number of months shown next to eachother selectedDates: Date | Date\; // Also a @Output (two-way data bindend) theme: string; // Theme string is added to the host isOpen: boolean; // The open state
Directive @input's()
All the above @Input's() can be used with the directive implementation as well. Additionally, you can use these @Input's() for the directive. The assigned values are the default ones:
appendToBody = true; // Append Datepicker to the body else append to directive openDirection = 'bottom' // 'top', 'left', 'right', 'bottom' closeOnBlur = true; // Close datepicker on blur
Composing
You can add a footer to the datepicker by adding a <footer>
element between the tags.
put your logic here
Regular Datepicker Component
The Animatepicker is an extension of the regular datepicker component. Don't want all that fancy animations? Then this is exactly what you need. Use aa-datepicker
to implement in your component
"Advanced" Usage
Control the datepicker programmatically
You can also control the datepicker programmatically from within your component by using ViewChild()
. Like so:
demoDatepicker: AnimatepickerComponent; close open next previous
And in your template:
Include your component in the datepicker
Implement your custom component into the datepicker by using the ng-content
located on the bottom of the datepicker