DatePicker

DatePicker is a custom component to select a single date on a calendar

date-picker value: {{datePickerValue}}
input ngModel: {{datePickerFieldValue}}

Import


import {{'{'}}FuiDatePickerModule{{'}'}} from 'fuel-ui'; //module
import {{'{'}}DatePicker, DatePickerCalendar, DatePickerField, DatePickerFieldStyler{{'}'}} from 'fuel-ui'; //class

Getting Started

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

Usage


<div class="form-group">
    <label for="date">Pick a Date</label>
    <date-picker
        minDate="11/1/2015"
        maxDate="11/12/2016"
        [dateFilter]="dateFilter"
        (valueChange)="datePickerValue">
        <div class="date-picker-input-group">
            <input name="date" dateField class="form-control" value="5/6/2016" placeholder="pick a date" />
        </div>
    </date-picker>
</div>


export class DatePickerExample {{'{'}}
    datePickerValue: Date;

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

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

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

Attributes

Loading table...

DateField Attributes

Loading table...