DateRangePicker

DateRangePicker is a custom component to select a date range on a single calendar

value.start: {{dateRangePickerValue.start}}
value.end: {{dateRangePickerValue.end}}
startDateField: {{arrivalDate}}
endDateField: {{departureDate}}

Import


import {{'{'}}FuiDatePickerModule{{'}'}} from 'fuel-ui'; //module
import {{'{'}}DateRange, DateRangePicker, DatePickerField, StartDateField, EndDateField, DatePickerCalendar, DatePickerFieldStyler{{'}'}} from 'fuel-ui'; //class

Getting Started

DateRangePicker is a custom element to select a date range on a calendar. It supports filtering of dates so that you can disable dates programmatically. Also supports min and max dates

Usage


<form class="form-inline">
    <date-range-picker
        minDate="11/1/2015"
        maxDate="11/12/2016"
        [dateFilter]="dateFilter"
        (valueChange)="datePickerValueChange($event)">
        <div class="form-group">
            <label for="arrival">Arrival Date</label>
            <div class="date-picker-input-group">
                <input name="arrival" startDateField class="form-control" value="5/5/2016" placeholder="Arrival" />
            </div>
        </div>

        <div class="form-group">
            <label for="departure">Departure Date</label>
            <div class="date-picker-input-group">
                <input name="departure" endDateField class="form-control" value="5/10/2016" placeholder="Departure" />
            </div>
        </div>
    </date-range-picker>
</form>


export class DateRangePickerExample {{'{'}}
    dateRangePickerValue: DateRange;

    datePickerValueChange(eventValue: any){{'{'}}
        this.dateRangePickerValue = eventValue;
    {{'}'}}

    dateFilter(d: Date): boolean {{'{'}}

        //every Tuesday
        if([2].indexOf(d.getDay()) > -1)
            return false;

        return true;
    {{'}'}}
{{'}'}}

DateRangePicker Attributes

Loading table...

StartDate / EndDate Attributes

Loading table...