# Animating Angular Datepicker *Note: this is a beta version but will be updated frequently. Want a improvement or found bug? please use the pull request functionality or create an issue* 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. ## Installation To install go through the following steps 1. `npm install ngx-animating-datepicker --save` -- or -- `yarn add ngx-animating-datepicker` 2. Add `aaDatepickerModule` to your module imports: ```ts import {aaDatepickerModule} from 'ng2-animating-datepicker'; @NgModule({ ... imports: [ ... DpDatePickerModule ] } ``` ## Basic Usage Implement the datepicker component in one of the following ways ### 1. Inline Animatepicker Implement aaAnimatepicker component inline ```html <aa-animatepicker [options]="datepickerOptions" [(selectedDates)]="dates"></aa-animatepicker> ``` ### 2. As Directive Implement datepicker as a directive ```html <input type="text" value="dates | date" [options]="datepickerOptions" [(selectedDates)]="dates" aaDatepicker="directiveOptions" /> ``` ### 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: ```ts datepickerOptions: Options = { selectMultiple: false, // Select multiple dates closeOnSelect: false, // Close datepicker when date(s) selected animationSpeed: 400, // Animation speed in ms easing: 'ease-in', // CSS easing type string numberOfMonths: 1, // Number of months shown hideRestDays: false, // Hide the rest days disableRestDays: true, // Disable the click on rest days hideNavigation: false, // Hide the navigation range: false, // Use range functionality currentDate: new Date(), // Tne current displayed date (month, year) timeoutBeforeClosing: 5000 // The timeout / delay before closing }; ``` #### Directive options These options can be used only on the directive like so ```html <input aaDatepicker="directiveOptions" /> ``` In the following example you'll see the default options ```ts directiveOptions: DirectiveOptions = { appendToBody: true, // Append Datepicker to body openDirection: 'bottom', // The direction it should open to closeOnBlur: true // Close the datepicker onBlur }; ``` ### @Input's() The following inputs are available for the Animatepicker ```ts @Input() minDate: Date; // Disables dates until this date @Input() maxDate: Date; // Disables dates from this date @Input() language: string; // Set the locale string. Example: nl-NL @Input() numberOfMonths: number; // Number of months shown next to eachother @Input() selectedDates: Date | Date\[\]; // Also a @Output (two-way data bindend) @Input() theme: string; // Theme string is added to the host @Input() 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: ```ts @Input() appendToBody = true; // Append Datepicker to the body else append to directive @Input() openDirection = 'bottom' // 'top', 'left', 'right', 'bottom' @Input() closeOnBlur = true; // Close datepicker on blur ``` ### 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 You can also control the datepicker programmatically from within your component by using `ViewChild()`. Like so: ```ts @ViewChild('demoDatepicker') demoDatepicker: AnimatepickerComponent; close(){ this.demoDatepicker.close(); } open(){; } next(){ this.demoDatepicker.goToNextMonth(); } previous(){ this.demoDatepicker.goToPreviousMonth(); } ``` And in your template: ```html <aa-animatepicker #demoDatepicker></aa-animatepicker> ```