Documentation
Fuse Components
Components

## Date Range

fuse-date-range is a date-time range selector component. It can be programmed to provide date or date-time ranges. It has full ngModel and reactive form support and built to works with moment.js.

Exported as: `fuseDateRange`

## Module

import { FuseDateRangeModule } from '@fuse/components/date-range';

## Usage

Here's the basic usage of the `fuse-date-range`:

<fuse-date-range [formControlName]="'range'" [dateFormat]="settings.dateFormat" [timeRange]="!eventForm.get('allDay').value" [timeFormat]="settings.timeFormat"></fuse-date-range>

## Properties

Name | Description | Default
--- | --- | ---
@Input() dateFormat: string | Moment.js date format string to format output date. | `DD/MM/YYYY`
@Input() timeFormat: string | 12 for 12-hour, 24 for 24-hour format. | `12`
@Input() timeRange: boolean | Whether to enable time range. | `true`
@Input() range: any | Date range input `{{'{'}} start: string, end: string {{'}'}}`. If you are using ngModel or Reactive forms, you shouldn't use this input! | `true`

## Range

The input of the range must be in the following format. The start and end date strings must be moment compatible strings as they will be immediately parsed with MomentJS.

// Input format { start: string, end : string }

The outputted range object will be in the following format. The date and time fields will be formatted based on the dateFormat and timeFormat inputs.

// Output format { startDate: string, startTime: null | string, endDate : string, endTime : null | string }