@next-level-integration/nli-datefield-lib

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.

Option	Default	Type	Description
currentDate	Today	Date	Default is displayed the date on Date picker
selectableRange	new DateRange(null, null)	DateRange	Selectable date span
filterMode	false	Boolean	The range picker is activated with this option
selectedRange	new DateRange(null, null)	DateRange	If filterMode activated, then you can select a default range on range picker.
locale	"en-US"	String	It supports german and english for now
labels	null	Array	If you want to translate the labels you can use this option. Usage: [{key:KEY, label:"LABEL"}].
required	false	Boolean	If the date is required
readOnly	false	Boolean	If the date picker is readOnly

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