mithril-materialized
    Preparing search index...

    Interface DatePickerAttrs

    interface DatePickerAttrs {
        autoClose?: boolean;
        autocomplete?: "on" | "off";
        autofocus?: boolean | (() => boolean);
        canClear?: boolean;
        class?: string;
        className?: string;
        cols?: number;
        dataError?: string;
        dataSuccess?: string;
        dateLabel?: string;
        dateRange?: boolean;
        defaultDate?: Date;
        defaultValue?: string;
        disabled?: boolean;
        disableDayFn?: (date: Date) => boolean;
        disableWeekends?: boolean;
        displayFormat?: string;
        firstDay?: number;
        format?: string;
        height?: string;
        helperText?: string;
        i18n?: DatePickerI18n;
        iconName?: string;
        id?: string;
        initialEndDate?: Date;
        initialStartDate?: Date;
        isMandatory?: boolean;
        key?: string | number;
        label?: string;
        max?: number;
        maxDate?: Date;
        maxDateRange?: number;
        maxLength?: number;
        maxValue?: number;
        min?: number;
        minDate?: Date;
        minDateRange?: number;
        minLength?: number;
        minmax?: boolean;
        minValue?: number;
        newRow?: boolean;
        onblur?: (ev: FocusEvent) => void;
        onchange?: (value: string, maxValue?: string) => void;
        onClose?: () => void;
        oninput?: (value: string, maxValue?: string) => void;
        onkeydown?: (ev: KeyboardEvent, value?: string) => void;
        onkeypress?: (ev: KeyboardEvent, value?: string) => void;
        onkeyup?: (ev: KeyboardEvent, value?: string) => void;
        onOpen?: () => void;
        onSelect?: (date: Date, endDate?: Date) => void;
        parse?: (dateString: string, format: string) => null | Date;
        pattern?: RegExp;
        placeholder?: string;
        readOnly?: boolean;
        required?: boolean;
        rows?: number;
        setDefaultDate?: boolean;
        showClearBtn?: boolean;
        showWeekNumbers?: boolean;
        style?: string;
        tooltipPos?: "top" | "bottom" | "left" | "right";
        validate?: (v: string, target?: HTMLInputElement) => string | boolean;
        value?: string;
        valueDisplay?: "auto" | "always" | "none";
        vertical?: boolean;
        weekNumbering?: "iso" | "local";
        yearrange?: string;
        yearRange?: number | number[];
        onbeforeremove?(this: any, vnode: VnodeDOM<any, any>): void | Promise<any>;
        onbeforeupdate?(
            this: any,
            vnode: Vnode<any, any>,
            old: VnodeDOM<any, any>,
        ): boolean | void;
        oncreate?(this: any, vnode: VnodeDOM<any, any>): any;
        oninit?(this: any, vnode: Vnode<any, any>): any;
        onremove?(this: any, vnode: VnodeDOM<any, any>): any;
        onupdate?(this: any, vnode: VnodeDOM<any, any>): any;
        [property: string]: any;
    }

    Hierarchy (View Summary)

    Indexable

    • [property: string]: any

      Any other virtual element properties, including attributes and event handlers.

    Index

    Properties

    autoClose? autocomplete? autofocus? canClear? class? className? cols? dataError? dataSuccess? dateLabel? dateRange? defaultDate? defaultValue? disabled? disableDayFn? disableWeekends? displayFormat? firstDay? format? height? helperText? i18n? iconName? id? initialEndDate? initialStartDate? isMandatory? key? label? max? maxDate? maxDateRange? maxLength? maxValue? min? minDate? minDateRange? minLength? minmax? minValue? newRow? onblur? onchange? onClose? oninput? onkeydown? onkeypress? onkeyup? onOpen? onSelect? parse? pattern? placeholder? readOnly? required? rows? setDefaultDate? showClearBtn? showWeekNumbers? style? tooltipPos? validate? value? valueDisplay? vertical? weekNumbering? yearrange? yearRange?

    Methods

    onbeforeremove? onbeforeupdate? oncreate? oninit? onremove? onupdate?

    Properties

    autoClose?: boolean

    Close when date is selected

    autocomplete?: "on" | "off"

    The autocomplete property sets or returns the value of the autocomplete attribute in a text field. When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

    'on'
    autofocus?: boolean | (() => boolean)

    When true, add the autofocus attribute to the input field.

    canClear?: boolean

    Show a clear button (small 'x') to clear the input value. Only valid for TextInput.

    class?: string

    The class name(s) for this virtual element, as a space-separated list.

    className?: string

    The class name(s) for this virtual element, as a space-separated list.

    cols?: number

    Number of cols of a textarea

    dataError?: string

    Will replace the helperText, if any, when the input is invalid.

    dataSuccess?: string

    Will replace the helperText, if any, when the input is valid.

    dateLabel?: string

    Legacy: Date label (use label instead)

    dateRange?: boolean

    Enable date range selection mode for selecting start and end dates

    defaultDate?: Date

    The initial date to view when first opened

    defaultValue?: string

    Initial value for uncontrolled mode. Only used when value and oninput are not provided. In uncontrolled mode, the component manages its own internal state.

    disabled?: boolean

    Sets the input field to disabled.

    disableDayFn?: (date: Date) => boolean

    Custom function to disable specific days

    disableWeekends?: boolean

    Disable weekends

    displayFormat?: string

    Legacy: Display format (use format instead)

    firstDay?: number

    First day of week (0: Sunday, 1: Monday etc)

    format?: string

    Date format attribute (alternative to format property)

    height?: string

    For vertical range inputs: height of the slider

    helperText?: string

    Add a description underneath the input field.

    i18n?: DatePickerI18n

    Internationalization

    iconName?: string

    Uses Materialize icons as a prefix or postfix.

    id?: string

    Optional ID.

    initialEndDate?: Date

    Initial end date for range selection

    initialStartDate?: Date

    Initial start date for range selection

    isMandatory?: boolean

    If true, add a mandatory * after the label (if any), and add the required and aria-required attributes to the input element.

    key?: string | number

    Unique key for use of the element in an array.

    label?: string

    Optional label.

    max?: number

    When input type is a number, optionally specify the maximum value.

    maxDate?: Date

    The latest date that can be selected

    maxDateRange?: number

    Maximum number of days between start and end dates

    maxLength?: number

    When input type is a text or text area, optionally specify the maximum length.

    maxValue?: number

    For range inputs with minmax: initial maximum value

    min?: number

    When input type is a number, optionally specify the minimum value.

    minDate?: Date

    The earliest date that can be selected

    minDateRange?: number

    Minimum number of days between start and end dates

    minLength?: number

    When input type is a text or text area, optionally specify the minimum length.

    minmax?: boolean

    For range inputs: enable dual thumb (min/max) range selection

    minValue?: number

    For range inputs with minmax: initial minimum value

    newRow?: boolean

    If true, break to a new row

    onblur?: (ev: FocusEvent) => void

    Invoked when the element looses focus

    onchange?: (value: string, maxValue?: string) => void

    Invoked when the input looses focus. For range sliders with minmax, second parameter is maxValue.

    onClose?: () => void

    Callback when picker is closed

    oninput?: (value: string, maxValue?: string) => void

    Invoked when the value changes (immediate feedback). For range sliders with minmax, second parameter is maxValue.

    onkeydown?: (ev: KeyboardEvent, value?: string) => void

    Key down event

    onkeypress?: (ev: KeyboardEvent, value?: string) => void

    Key press event

    onkeyup?: (ev: KeyboardEvent, value?: string) => void

    Key up event

    onOpen?: () => void

    Callback when picker is opened

    onSelect?: (date: Date, endDate?: Date) => void

    Callback when date is selected (single date or range start/end)

    parse?: (dateString: string, format: string) => null | Date

    Custom parse function

    pattern?: RegExp

    The pattern property sets or returns the value of the pattern attribute of a text field. The pattern attribute specifies a regular expression that the text field's value is checked against.

    placeholder?: string

    Add a a placeholder to the input field.

    readOnly?: boolean

    The readOnly property sets or returns whether a text field is read-only, or not. A read-only field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it.

    required?: boolean

    Add the required and aria-required attributes to the input element

    rows?: number

    Number of rows of a textarea

    setDefaultDate?: boolean

    Make the defaultDate the initial selected value

    showClearBtn?: boolean

    Show clear button

    showWeekNumbers?: boolean

    Show week numbers

    style?: string

    Optional style information.

    tooltipPos?: "top" | "bottom" | "left" | "right"

    For range inputs with valueDisplay: position of value tooltips

    validate?: (v: string, target?: HTMLInputElement) => string | boolean

    When returning true or an empty string, clear the custom validity (= valid). When returning false, set the custom validity message to a default string string. When returning a non-empty string, set the custom validity message to this string.

    value?: string

    Current value of the input field. If provided along with oninput, the component operates in controlled mode where the parent manages the state. The parent must update this value in response to oninput callbacks.

    valueDisplay?: "auto" | "always" | "none"

    For range inputs: control value display behavior. 'auto' shows on drag, 'always' shows always, 'none' never shows

    vertical?: boolean

    For range inputs: render vertically instead of horizontally

    weekNumbering?: "iso" | "local"

    Week numbering system: 'iso' (ISO 8601) or 'local' (local convention)

    yearrange?: string

    Year range attribute (alternative to yearRange property)

    yearRange?: number | number[]

    Number of years either side, or array of upper/lower range

    Methods

    • The onbeforeremove hook is called before a DOM element is detached from the document. If a Promise is returned, Mithril only detaches the DOM element after the promise completes.

      Parameters

      • this: any
      • vnode: VnodeDOM<any, any>

      Returns void | Promise<any>

    • The onbeforeupdate hook is called before a vnode is diffed in a update.

      Parameters

      • this: any
      • vnode: Vnode<any, any>
      • old: VnodeDOM<any, any>

      Returns boolean | void

    • The oncreate hook is called after a DOM element is created and attached to the document.

      Parameters

      • this: any
      • vnode: VnodeDOM<any, any>

      Returns any

    • The oninit hook is called before a vnode is touched by the virtual DOM engine.

      Parameters

      • this: any
      • vnode: Vnode<any, any>

      Returns any

    • The onremove hook is called before a DOM element is removed from the document.

      Parameters

      • this: any
      • vnode: VnodeDOM<any, any>

      Returns any

    • The onupdate hook is called after a DOM element is updated, while attached to the document.

      Parameters

      • this: any
      • vnode: VnodeDOM<any, any>

      Returns any

    Settings

    Member Visibility

    On This Page

    Properties
    Methods