Angular 2 / 4 DateTime Picker

Documentation | Demos / Examples.

Overview

Angular 2 DateTimepicker is a cool responsive DateTimepicker component for Web and Mobile. It is Mobile friendly and light weight. Developed by Cuppa Labs. Upgraded by VK. These functions were added:

• allow only dates from - to
• allow empty value
• binding way was changed

Getting Started

To get started with using the multiselect dropdown component, follow the below steps. It’s easy to integrate and just a matter of minutes.

Installation

• Install the package with npm:

	npm i vk-custom-angular2-datetimepicker --save

Usage

Import AngularDateTimePickerModule into your AppModule

import { AngularDateTimePickerModule } from 'angular2-datetimepicker';

@NgModule({
  // ...
  imports: [
    AngularDateTimePickerModule,
  ]
  // ...
})

Declare the component data variables and options in your component where you want to consume the dropdown component.

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
    
	date: Date = new Date();
	settings = {
		bigBanner: true,
		timePicker: false,
		format: 'dd-MM-yyyy',
		defaultOpen: true
	}
	constructor(){}
    ngOnInit(){
       
    }
}

Add the following component tag in the template where your want to place the datepicker

<angular2-date-picker [date]="date" [settings]="settings"></angular2-date-picker>

Settings

Following settings object properties can be used to configure the component.

|Property |Type |Default |Description | |:--- |:--- |:--- |:--- | |format|String|dd-MMM-yyyy hh:mm a|Date format of the selected date.| |bigBanner|Boolean|true| The banner section to show the date details. | |defaultOpen|Boolean|false|To open the datepicker popover on load. Default is set to false.| |timePicker|Boolean|false|Enable time picker feature.| |closeOnSelect|Boolean|true|to close the popover on date select or on click of done button.| |from|Date|null|to allow only dates from.| |to|Date|null|to allow only dates to.| |allowEmpty|boolean|false|to allow empty value.| |placeholder|string|Select Date|Value to show when date is not selected.|

Callback Methods

• onDateSelect

Define a callback method to be called on select of the date.

  
  <angular2-date-picker (onDateSelect)="onDateSelect($event)" 
			[date]="date" 
			[settings]="settings" >
  </angular2-date-picker>

Date Formats Support

format string can be composed of the following elements:

• 'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
• 'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
• 'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
• 'MMMM': Month in year (January-December)
• 'MMM': Month in year (Jan-Dec)
• 'MM': Month in year, padded (01-12)
• 'M': Month in year (1-12)
• 'LLLL': Stand-alone month in year (January-December)
• 'dd': Day in month, padded (01-31)
• 'd': Day in month (1-31)
• 'EEEE': Day in Week,(Sunday-Saturday)
• 'EEE': Day in Week, (Sun-Sat)
• 'HH': Hour in day, padded (00-23)
• 'H': Hour in day (0-23)
• 'hh': Hour in AM/PM, padded (01-12)
• 'h': Hour in AM/PM, (1-12)
• 'mm': Minute in hour, padded (00-59)
• 'm': Minute in hour (0-59)
• 'ss': Second in minute, padded (00-59)
• 's': Second in minute (0-59)
• 'sss': Millisecond in second, padded (000-999)
• 'a': AM/PM marker
• 'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)
• 'ww': Week of year, padded (00-53). Week 01 is the week with the first Thursday of the year
• 'w': Week of year (0-53). Week 1 is the week with the first Thursday of the year
• 'G', 'GG', 'GGG': The abbreviated form of the era string (e.g. 'AD')
• 'GGGG': The long form of the era string (e.g. 'Anno Domini')

format string can also be one of the following predefined localizable formats:

• 'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 PM)

• 'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 PM)

• 'fullDate': equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday, September 3, 2010)

• 'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010)

• 'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)

• 'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)

• 'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 PM)

• 'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 PM)

Run locally

• Clone the repository or downlod the .zip,.tar files.
• Run npm install
• Run ng serve for a dev server
• Navigate to http://localhost:4200/

License

MIT License.

Credits

Thanks to Font Awesome and Moment.js for the libraries.

Author

Pradeep Kumar Terli