• Public
  • Public/Protected
  • All

Datepicker powered by Angular Material library. Accepts as an input and emits on change a date in ISO 8601 format.

Example of usage

import dayjs from 'dayjs';

export const component: DraymanComponent = async ({ forceUpdate }) => {

    let age;
    let date;

    const onValueChange = async ({ value }) => {
        date = value;
        const dateOfBirth = dayjs(value);
        age = dayjs().diff(dateOfBirth, 'years');
        await forceUpdate();

    return () => {
        return (
                    label="Date of Birth"
                {age && `You are ${age} years old!`}




Optional appearance

appearance: "legacy" | "standard" | "fill" | "outline"

Appearance style for the field. Wether outline (default), legacy, fill or standard.

Optional dateFormat

dateFormat: string

In which format date will be displayed. Defaults to YYYY-MM-DD.

Optional disabled

disabled: boolean

Whether the control is disabled.

Optional error

error: string

Error text to be shown underneath the form field control.

Optional helpText

helpText: string

Hint text to be shown underneath the form field control.

Optional label

label: string

The floating label for a field.

Optional monthPicker

monthPicker: boolean

If true, the datepicker will work in month picker mode.

Optional onValueChange

onValueChange: ElementEvent<{ value: string }>

Executed with an input value from user.

Optional placeholder

placeholder: string

The placeholder text.

Optional ref

ref: string

Optional showTodayButton

showTodayButton: boolean

Wether to show today button or not.

Optional style

style: CSS

Optional updateOnBlur

updateOnBlur: boolean

Wether value of the field should be emitted when user is blurred out of the control.

Optional value

value: string

Value of the input.