Ui.DatePicker

A simple component that allows the user to pick a date from a calendar.

Interactive Demo

You can play around with a Ui.DatePicker below using the controls.

2024-12-03
Value
2024-12-03
Position
BottomRight
Size (16px)
Offset (5px)
Disabled
Invalid
<Ui.DatePicker
position={Ui.Position.BottomRight}
value={Time.from(2024, 12, 3)}
size={Ui.Size.Px(16)}
disabled={false}
invalid={false}
offset={5}/>
Value

The value can be controlled with the value property.

2024-12-03
<Ui.DatePicker value={Time.atBeginningOfDay(Time.now())}/>
Disabled

The component can be disabled using the disabled property.

2024-12-03
<Ui.DatePicker disabled={true}/>
Invalid

The component can be makred invalid using the invalid property.

2024-12-03
<Ui.DatePicker invalid={true}/>
Size

The size of the component can be set with the size property.

2024-12-03
2024-12-03
2024-12-03
<>
<Ui.DatePicker size={Ui.Size.Px(12)}/>
<Ui.DatePicker size={Ui.Size.Px(16)}/>
<Ui.DatePicker size={Ui.Size.Px(20)}/>
</>
Position

The position property controls the panels position. For more information check out the the same property of the Ui.Dropdown

Offset

The offset property controls the panels offset. For more information check out the the same property of the Ui.Dropdown

Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.