Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

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

Package Overview
Dependencies
1
Maintainers
11
Versions
179
Issues
File Explorer

Advanced tools

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

NLI-Datefield component

    10.0.3latest

Version published
Maintainers
11
Yearly downloads
8,176
decreased by-49.69%

Weekly downloads

Readme

Source

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.

OptionDefaultTypeDescription
currentDateTodayDateDefault is displayed the date on Date picker
selectableRangenew DateRange(null, null)DateRangeSelectable date span
filterModefalseBooleanThe range picker is activated with this option
selectedRangenew DateRange(null, null)DateRangeIf filterMode activated, then you can select a default range on range picker.
locale"en-US"StringIt supports german and english for now
labelsnullArrayIf you want to translate the labels you can use this option. Usage: [{key:KEY, label:"LABEL"}].
requiredfalseBooleanIf the date is required
readOnlyfalseBooleanIf 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

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc