Date-picker-directive NPM

date-picker-directive

Angular date picker

Description

This is a date picker that uses a directive which you can place on your html input. Compatible with Angular2+

Installation

npm i date-picker-directive --save

Dependencies

Basic Usage

1. Add DatepickerModule import to your @NgModule like example below

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyTestApp } from './my-test-app';
import { DatePickerModule } from 'date-picker-directive';

@NgModule({
    imports:      [ BrowserModule, DatePickerModule ],
    declarations: [ MyTestApp ],
    bootstrap:    [ MyTestApp ]
})
export class MyTestAppModule {}

2. Add the directive and additional options to your HTML input

<input type="text" placeholder="Input Date" date-picker (dateselected)="dateSelected($event)" />

3. Provide method for date selected event

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  dateval: string = null;
  dateSelected(val) {
    this.dateval = val;
  }
}

Attributes

The following options are available for the date picker

NB all date options must be entered in the format MM/DD/YYYY

Option	Default	Type	Description
singleDatePicker	false	boolean	Determine whether to show a single calendar or show a range calendar
minDate	no default value	string	Set earliest date in the past that the calendar can show.
maxdate	no default value	string	Set the latest date in the future which the calendar can show
startDate	Today	string	Set the start date of the selected range on the calendar. If using singleDatePicker, then this property should be used to set the default selected date on the calendar
endDate	Today	string	Set the end date of the selected range on the calendar.

Events

dateselected

This event is triggered when a date is selected. If using a single calendar then it is triggered once a date is clicked and returns a single date "MM/DD/YYYY". When using a range calendar, it is triggered when a default range is selected or the apply button is clicked and returns a date range "MM/DD/YYYY" - "MM/DD/YYYY".