An Angular 2 Animating Datepicker
For some smooth date picking 😉
I’ve been working alot with Angular 2 the past year, building apps and therefor, creating many components. For an app I needed to implement a datepicker, what the web was offering wasn’t meeting the requirements so I decided to create one myself. What I wanted to put in was: range functionality, animation and multiple calendars next to each other. It is still work-in-progress, but below you’ll find a link to the (beta) demo and you can check out the repository on Github.
public options: Options;
@Input('options') _options: Options;
public defaults: Options = {
theme: '', // Theme string is added to the host
selectMultiple: false, // Select multiple dates
closeOnSelect: true, // Close datepicker when date(s) selected
animate: false, // Animate the datepicker
animationSpeed: 400, // Animation speed in ms
easing: 'ease-in', // 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
min: null, // Disables dates until this date
max: null, // Disables dates from this date
year: this.year, // Initial year that is displayed
month: this.month, // Initial month that is displayed
};
Datepicker Options
These are the default options set by the datepicker. You can override them by using the [options] directive. They will be merged onInit, changing them later wont have any effect.
@Input()’s
These are some inputs you can use. These can be changed over time and the datepicker will react to it.The “numberOfMonths” Input works only for the animate extension and the multiple calendar extension
/**
* Set the the language manualy. A string with a BCP 47 language tag
* @example nl-NL
*/
@Input() public language: string = navigator.language;
/**
* Minimal Date: If set the dates before it will be disabled
*/
@Input() set minDate(value: Date) {
this._minDate = new Date(value);
}
/**
* Maximal Date: If set the dates after it will be disabled
*/
@Input() set maxDate(value: Date) {
this._maxDate = new Date(value);
}
/**
* Number of months: the number of months displayed
*/
@Input() set numberOfMonths(value) {
this._numberOfMonths = new Array(value);
this.setDatePickerDimension();
}