37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import '@material/web/textfield/filled-text-field.js';
|
|
import '@material/web/iconbutton/icon-button.js';
|
|
|
|
import {FilledTextField} from '@material/web/textfield/internal/filled-text-field';
|
|
import {mdiCalendarMonthOutline} from '@mdi/js';
|
|
import MdIcon from '@osm/Components/MdIcon';
|
|
import {Vnode} from 'mithril';
|
|
import {
|
|
Attributes,
|
|
Component
|
|
} from 'mithril-utilities';
|
|
import {KebabCasedProperties} from 'type-fest';
|
|
|
|
export interface FilledDateTextFieldAttributes extends Attributes, Partial<Omit<KebabCasedProperties<FilledTextField>, 'style'>> {}
|
|
|
|
export default class FilledDateTextField<A extends FilledDateTextFieldAttributes> extends Component<A> {
|
|
element!: FilledTextField;
|
|
view(vnode: Vnode<A>) {
|
|
vnode.attrs.type ??= 'date';
|
|
return (
|
|
<md-filled-text-field {...vnode.attrs}>
|
|
{/* @ts-ignore */}
|
|
{vnode.children}
|
|
<md-icon-button type="button" slot="trailingicon" onclick={this.openDatePicker.bind(this)}>
|
|
<MdIcon icon={mdiCalendarMonthOutline}/>
|
|
</md-icon-button>
|
|
</md-filled-text-field>
|
|
);
|
|
}
|
|
|
|
openDatePicker(event: MouseEvent & {redraw?: boolean}) {
|
|
event.redraw = false;
|
|
// @ts-expect-error - getInput() is private
|
|
(this.element.getInput() as HTMLInputElement).showPicker();
|
|
}
|
|
}
|