• Public
  • Public/Protected
  • All

Timepicker powered by ngx-material-timepicker library.

Example of usage

import customParseFormat = require('dayjs/plugin/customParseFormat');
import dayjs from 'dayjs';

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

    const time: { start?: string; end?: string } = {};
    let timeLeft: { hours: number; minutes: number };

    const onTimeChange = async (timeType: 'start' | 'end', { value }) => {
        time[timeType] = value;
        if (time.start && time.end) {
            const start = dayjs(time.start, 'HH:mm');
            const end = dayjs(time.end, 'HH:mm');
            timeLeft = { hours: end.diff(start, 'hours'), minutes: end.diff(start, 'minutes') % 60 };
            await forceUpdate();

    const wrapperStyle: CSS = {
        display: 'grid',
        gridAutoFlow: 'column',

    return () => {
        return <div>
            <div style={wrapperStyle}>
                    label="Start time"
                    onValueChange={onTimeChange.bind(this, 'start')}
                    label="End time"
                    onValueChange={onTimeChange.bind(this, 'end')}
            {timeLeft && <p>Time left: {timeLeft.hours} hours and {timeLeft.minutes} minutes.</p>}




Optional appearance

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

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

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 onValueChange

onValueChange: ElementEvent<{ value: string }>

Executed with an input value from user.

Optional placeholder

placeholder: string

The placeholder text.

Optional ref

ref: string

Optional showNowButton

showNowButton: boolean

Wether to show now 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.