au-date-range-picker

Date Input Picker Ember Addon

This Ember addon serves as a date (range) input picker component, utilizing the Daterangepicker library. It was specifically developed under the commission of the Agency of Home Affairs (ABB) for integration into the BurgernabijeBesluitenDatabank application.

Installation

To install this addon, run the following command in your Ember project:

ember install au-date-range-picker

Usage

To use the date input picker component in your Ember project, simply include it in your template:

<AuDateRangePicker
  @label="Optional label"
  @start="2023-01-01"
  @end="2023-12-31"
  @width="block"
  @cancelAction={{action this.cancelDatePicker}}
  @applyAction={{action this.applyDatePicker}}
  @hideAction={{action this.hideDatePicker}}
/>

@action applyDatePicker(picker, start, end) {
    this.dateRange = start + ' - ' + end;
}

@action hideDatePicker(picker, start, end) {
    return this.start;
}

@action cancel(picker, start, end) {}

You can pass in the following arguments to customize the behavior of the component:

• start : The initial start date for the date range.
• end : The initial end date for the date range.
• actionName : The name of the action to be called when the date range is changed. This action will be called with 3 args: picker, start and end

Configuration

The following options can be passed to <AuDateRangePicker>:

Format

Name	Default value	Description
@format	'D MMM, YYYY'
@serverFormat	'YYYY-MM-DD'
@direction	'ltr'	Locale setting for text direction
@regional	'be-nl'	Selected region
@separator	' - '	What character(s) to put between range

Range

Name	Default value	Description
@singleDatePicker	false	Whether to only select a single date (instead of the default two)
@minDate	undefined	Lowest possible date. If undefined, no limit is set
@maxDate	undefined	Highest possible date. If undefined, no limit is set
@datelimit	false

Appearance

Name	Default value	Description
@firstDay	0	What day of the week to start with. 0 = sunday, 1 = monday...
@placeholder	'Aangepast bereik'
@daysOfWeek	moment.weekdaysMin()
@monthNames	moment.monthsShort()
@cancelLabel	'Terug'	Text on the cancel button
@applyLabel	'Verder'	Text on the apply button
@customRangeLabel	'Aangepast bereik'
@showCustomRangeLabel	false
@fromLabel	'Van'
@toLabel	'Tot'
@showWeekNumbers	false
@showDropdowns	false

Classes

Name	Default value	Description
@containerClass	'form-group au-c-content '	Class for the container
@inputClass	'form-control'	Class for the input
@buttonClasses	['au-c-button']	Classes for the buttons
@applyClass	'au-c-button--primary'	Class for the apply button
@cancelClass	'au-c-button--secondary au-u-margin-right-tiny'	Class for the cancel button
@labelClass	'au-u-h5'	Class for all labels/buttons

TimePicker

Name	Default value	Description
@timePicker	false	Whether to enable the timePicker
@timePicker24Hour	false
@timePickerSeconds	false
@timePickerIncrement	undefined

Dom behaviour

Name	Default value	Description
@autoUpdateInput	true
@autoApply	false
@alwaysShowCalendars	true
@context	undefined
@removeDropdownOnDestroy	false
@parentEl	'body'

Other

Name	Default value	Description
@isInvalidDate	noop
@isCustomDate	noop
@opens	null
@drops	null
@linkedCalendars	false

Ranges

@ranges defines the preset ranges on the left of the date picker. The following format has to be passed:

{
    PRESET-NAME: [STARTDATE, ENDDATE]
}

You can optionally use moment.js for dynamic assignment

{
    Yesterday: [
        moment().subtract(1, 'days').startOf('day'),
        moment().subtract(1, 'days').endOf('day'),
    ],
    'Last week': [moment().subtract(7, 'days'), moment()],
}

Development

To run the tests for this addon, run the following command:

ember test

Contributing

Contributions to this addon are welcome. Please submit a pull request with your changes.

Updating documentation

If you've added or modified any options in date-range-picker.js, you can run npm run docs to automatically update the configuration table. npm run docs is run automatically when using npm run build as well.

License

This addon is licensed under the MIT License. See the LICENSE file for details.