HTTPS SSH

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:
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

<aa-animatepicker
    [options]="datepickerOptions"
    [(selectedDates)]="dates"></aa-animatepicker>

2. As Directive

Implement datepicker as a directive

<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:

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

<input aaDatepicker="directiveOptions" />

In the following example you'll see the default options

directiveOptions: DirectiveOptions = {
    appendToBody: true, // Append Datepicker to body
    openDirection: 'bottom', // The direction it should open to
    closeOnBlur: true  // Close the datepicker onBlur
};

@Jon Zah's()

The following inputs are available for the Animatepicker

 @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 @Jon Zah's()

All the above @Jon Zah's() can be used with the directive implementation as well. Additionally, you can use these @Jon Zah's() for the directive. The assigned values are the default ones:

@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:

 @ViewChild('demoDatepicker') demoDatepicker: AnimatepickerComponent;

 close(){
  this.demoDatepicker.close();
 }

 open(){
  this.demoDatepicker.open();
 }

 next(){
  this.demoDatepicker.goToNextMonth();
 }

 previous(){
  this.demoDatepicker.goToPreviousMonth();
 }

And in your template:

<aa-animatepicker #demoDatepicker></aa-animatepicker>