Loconox-datetimepicker NPM

Loconox DateTime Picker

Overview

Loconox DateTime Picker is an angular 2 component for date and time picking. It has localizing feature with moment.js lib.

It is based on cuppalabs datetime picker.

Installation

The LoconoxDatetimePicker package is published on the npm Registry.
Install the package with npm:

	npm install loconox-datetimepicker

Usage

Import Angular2Datetimepicker2Module into your AppModule

import {LoconoxDatetimePickerModule} from 'loconox-datetimepicker';

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

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 {
    
	settings = {
		bigBanner: true,
		timePicker: false,
		defaultOpen: true
	}
}

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

  <input [loconoxDatetimePicker]="picker" (click)="picker.open($event)">
  <loconox-datetimepicker #picker [settings]="settings"></loconox-datetimepicker>

Settings

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

Property	Type	Default	Description
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.
locale	string	en	The locale in which date will be displayed
hour24	boolean	false	Hour in 24h mode

Callback Methods

dateChange

Define a callback method to be called on date change. $event is a LoconoxDatepickerInputEvent.

  <input [loconoxDatetimePicker]="picker" (click)="picker.open($event)" (dateChange)="onDateChange($event)">
  <loconox-datetimepicker #picker [settings]="settings"></loconox-datetimepicker>

dateInput

Define a callback method to be called on select of the date. $event is a LoconoxDatepickerInputEvent.

  <input [loconoxDatetimePicker]="picker" (click)="picker.open($event)" (dateInput)="onDateInput($event)">
  <loconox-datetimepicker #picker [settings]="settings"></loconox-datetimepicker>

opened

Define a callback method to be called on the open of the calendar.

  <input [loconoxDatetimePicker]="picker" (click)="picker.open($event)">
  <loconox-datetimepicker #picker [settings]="settings" (opened)="onOpen($event)"></loconox-datetimepicker>

closed

Define a callback method to be called on the close of the calendar.

  <input [loconoxDatetimePicker]="picker" (click)="picker.open($event)">
  <loconox-datetimepicker #picker [settings]="settings" (closed)="onClose($event)"></loconox-datetimepicker>