DateRangePicker is a custom component to select a date range on a single calendar
import {{'{'}}FuiDatePickerModule{{'}'}} from 'fuel-ui'; //module
import {{'{'}}DateRange, DateRangePicker, DatePickerField, StartDateField, EndDateField, DatePickerCalendar, DatePickerFieldStyler{{'}'}} from 'fuel-ui'; //class
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
<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;
{{'}'}}
{{'}'}}