How to use @fundamental-ngx/core - 10 common examples

public parse(value: string): FdDate {
        const values: number[] = value.split('-').map(Number);

        // If date is 0, set the date to invalid by setting month to 14
        if (values[2] === 0) {
            values[1] = 14;
        }
        return new FdDate(values[2], values[1], values[0]);
    }

<br>
        <div>Selected Date: {{date.toDateString()}}</div>
        <button>Disable Wednesday</button>
    `,
    styles: [
        `
            button {
                margin-top: 1rem;
            }
        `
    ]
})
export class CalendarSingleExampleComponent {

    date = FdDate.getToday();

    myDisableFunction = function (d: FdDate): boolean {
        const day = d.getDay();
        return day === 6 || day === 7;
    };

    // Block days before/after any day
    myBlockFunction = function (d: FdDate): boolean {
        const firstDay = FdDate.getToday();
        const lastDay = new FdDate(firstDay.year, firstDay.month, firstDay.day + 7);
        return d.getTimeStamp() &gt; firstDay.getTimeStamp() &amp;&amp; d.getTimeStamp() &lt; lastDay.getTimeStamp();
    };

    disableWednesday() {
        this.myDisableFunction = function (d: FdDate): boolean {
            const day = d.getDay();

public parse(value: string): FdDatetime {
        value = value.replace(/[\/hms ]/g, '-');
        const values: number[] = value.split('-').map(Number);
        return new FdDatetime(new FdDate(values[0], values[1], values[2]), {hour: values[3], minute: values[4], second: values[5]} );
    }

import { Component } from '@angular/core';
import { FdDate } from '@fundamental-ngx/core';

@Component({
    selector: 'fd-date-picker-disabled-example',
    template: ` 
            <br>
            <div>Selected Date: {{date ? date.toDateString() : 'null'}}</div>`
})
export class DatePickerDisabledExampleComponent {

    date = FdDate.getToday();

}

Touched: {{customForm.controls.dates.touched}}<br>
        Dirty: {{customForm.controls.dates.dirty}}<br>
        Valid: {{customForm.controls.dates.valid}}<br>

        Range Start Date: {{ customForm.controls.dates.value.start ? customForm.controls.dates.value.start.toDateString() : 'null' }}<br>
        Range End Date: {{ customForm.controls.dates.value.end ? customForm.controls.dates.value.end.toDateString() : 'null' }}
        
    `
})
export class DatePickerFormRangeExampleComponent {

    customForm = new FormGroup({
        dates: new FormControl({
            start: FdDate.getToday(),
            end: FdDate.getToday().nextDay()
        })
    });
}

Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toDateString() : 'null' }}
            
            <div>
                <br>
                Touched: {{customForm.controls.disabledDate.touched}}<br>
                Dirty: {{customForm.controls.disabledDate.dirty}}<br>
                Valid: {{customForm.controls.disabledDate.valid}}<br>
                Disabled: {{customForm.controls.disabledDate.disabled}} <br>
                Selected Date: {{ customForm.controls.disabledDate.value ? customForm.controls.date.value.toDateString() : 'null' }}
            </div>
        
    `
})
export class DatePickerFormExampleComponent {
    customForm = new FormGroup({
        date: new FormControl(FdDate.getToday()),
        disabledDate: new FormControl({ value: FdDate.getToday(), disabled: true })
    });
}

import { Component } from '@angular/core';
import { FdDate } from '@fundamental-ngx/core';

@Component({
    selector: 'fd-date-picker-position-example',
    template: ` 
                <br>
                <div>Selected Date: {{date ? date.toDateString() : 'null'}}</div>`
})
export class DatePickerPositionExampleComponent {

        date = FdDate.getToday();

}

<div>Selected Last Date: {{selectedRange?.end?.toDateString()}}</div>
    `,
    providers: [
        {
            provide: DateFormatParser,
            useClass: DateFormatDashes
        }
    ]
})
export class DatePickerFormatExampleComponent {

    date = FdDate.getToday();

    selectedRange: FdRangeDate = {
        start: FdDate.getToday(),
        end: FdDate.getToday().nextDay()
    };

}

Touched: {{customForm.controls.dates.touched}}<br>
        Dirty: {{customForm.controls.dates.dirty}}<br>
        Valid: {{customForm.controls.dates.valid}}<br>

        Range Start Date: {{ customForm.controls.dates.value.start ? customForm.controls.dates.value.start.toDateString() : 'null' }}<br>
        Range End Date: {{ customForm.controls.dates.value.end ? customForm.controls.dates.value.end.toDateString() : 'null' }}
        
    `
})
export class DatePickerFormRangeExampleComponent {

    customForm = new FormGroup({
        dates: new FormControl({
            start: FdDate.getToday(),
            end: FdDate.getToday().nextDay()
        })
    });
}

import { Component } from '@angular/core';
import { FdDate } from '@fundamental-ngx/core';

@Component({
    selector: 'fd-date-picker-allow-null-example',
    template: `
        
        <br>
        <div>Selected Date: {{date ? date.toDateString() : 'null'}}</div>`
})
export class DatePickerAllowNullExampleComponent {

    date = FdDate.getToday();

}