@next-level-integration/nli-datefield-lib v10.0.8-beta

NLIDateField

Angular Date Picker

Description

Compatible with Angular8 version.

Installation

To install this component to an external project, follow the procedure:

1. npm install nli-datefield --save

2. Run npm install in project folder (The home folder that package.json exists): npm install This command downloads all dependencies including @next-level-integration/nli-datefield-lib. You can also download just this module with: npm install @next-level-integration/nli-datefield-lib

3. Import input module to your project. In your main module (or module that you want use this component) that its default name is app.module.ts, import it:

   import { NLIDateFieldModule } from '@next-level-integration/nli-datefield-lib/datefield.module';
   ...
   @NgModule({
     ...
     imports: [
       ...
       NLIDateFieldModule
      ]
      ...
   });

4. Add the following snippet inside your template:

   <nli-datefield [configs]="options"
   		 label="Date"
   		 [selectedDate]="tomorrow"
   		 (changed)="onChange($event)"></nli-datefield>

Attributes

Value of the options attribute is a type of DateFieldOptions. It can contain the following properties.

Example of the options data (not all properties listed):

var labels:Array<any> = [{key:DateUtils.ERROR_DATE_IS_NOT_SELECTABLE_RANGE, label:"Das Mindestalter für einen Vertragsabschluss ist 18 Jahre."}];

public options:DateFieldOptions = new DateFieldOptions().setOptions(false, new Date(2000, 1, 1), new DateRange(null, new Date(1999, 11, 31)), null, "de-DE", labels, false, false);

Callbacks

changed:

called when the date is selected, removed or input field typing is valid or on range picker a date range is selected.

Examples

1. Default date picker

in Template:

<nli-datefield classes="width-120"[configs]="options"
				label="Datum"
				[selectedDate]="tomorrow"
				(changed)="onChange($event)"></nli-datefield>

in your component:

public options:DateFieldOptions = new DateFieldOptions().setOptions(false, new Date(), new DateRange(null, null), null, "de-DE", null, true, false);

2. Date picker with selectable range

in Template:

	<nli-datefield [configs]="options"
								 label="Geburtsdatum"
								 [selectedDate]="null"
								 (changed)="onChange($event)"></nli-datefield>

in your component:

	public options:DateFieldOptions = new DateFieldOptions().setOptions(false, new Date(2017, 5, 5), new DateRange(new Date(2018, 8, 6), new Date(2018, 8, 16)), null, "de-DE", null, true, true);

3. Range picker

		in Template:

			<nli-datefield classes="width-250"  
								[configs]="options"
								label="Select a range"
								(changed)="onChange($event)"></nli-datefield>

		in your component:

			public options:DateFieldOptions = new DateFieldOptions().setOptions(true, new Date(), null, null, "en-US", null, false, false);

Compatibility (tested with)

	Firefox (latest)
	Chrome (latest)
	Opera (latest)
	Edge
	IE11