@next-level-integration/nli-datefield-lib
v10.0.8-beta
Published
NLI-Datefield component
Downloads
229
Maintainers
Keywords
Readme
NLIDateField
Angular Date Picker
Description
Compatible with Angular8 version.
Installation
To install this component to an external project, follow the procedure:
npm install nli-datefield --save
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
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 ] ... });
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