Angular 2

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 Bitbucket.

Check out the demo



	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();
	}

This is a unique website which will require a more modern browser to work!

Please upgrade today!