blue
View on GitHub

Datetime Input

A datetime input allows users to enter or select both date and time values in a single field, combining calendar and time controls for more precise timestamps.

Usage

Use the datetime string format (YYYY-MM-DDTHH:MM:SS) for setting the value.

Light
Blue
Zoho Puvi 
<script>
	import { DateTimeInput } from 'deskblocks';
</script>

<DateTimeInput value="2000-09-13T13:00" />

Mandatory input

Light
Blue
Zoho Puvi 
<script>
	import { DateTimeInput, FormLabel } from 'deskblocks';
</script>

<div>
	<FormLabel required for="inp-demo">Label</FormLabel>
	<DateTimeInput required value="2023-08-12T13:00" id="inp-demo" />
</div>

Input with icon

Pass the Icon component within the left to render it on the left side of the input.

Light
Blue
Zoho Puvi 
<DateTimeInput value="2024-09-13T13:00">
	<Icon slot="left-icon" icon={IconActivity} />
</DateTimeInput>

Help message

Light
Blue
Zoho Puvi
Answer to the Ultimate Question of Life, the Universe, and Everything 
<script>
	import { DateTimeInput } from 'deskblocks';
</script>

<div>
	<DateTimeInput value="2024-09-13T13:00">
		<span slot="help-msg">
			Answer to the Ultimate Question of Life, the Universe, and Everything
		</span>
	</DateTimeInput>
</div>

Invalid state

Light
Blue
Zoho Puvi
Answer to the Ultimate Question of Life, the Universe, and Everything 
<script>
	import { DateTimeInput } from 'deskblocks';
</script>

<div>
	<DateTimeInput invalid value="2024-09-13T13:00">
		<span slot="error-msg">
			Answer to the Ultimate Question of Life, the Universe, and Everything
		</span>
	</DateTimeInput>
</div>

Disabled state

Light
Blue
Zoho Puvi 
<DateTimeInput disabled value="2024-09-13T13:00" />

Min and max values

Light
Blue
Zoho Puvi 
<script>
	import { DateTimeInput } from 'deskblocks';
</script>

<DateTimeInput value="2024-09-13T13:00" min="2024-09-01T01:00" max="2024-09-20T03:40" />

Props

id string undefined Specifies a unique identifier for the datetime input field.
value DateTime String Format undefined Sets the current value of the datetime input in a string format (e.g., 1977-04-01T14:00:30 ).
min DateTime String Format undefined Defines the earliest datetime allowed for selection (e.g., 1977-04-01T00:00:00 ).
max DateTime String Format undefined Defines the latest datetime allowed for selection (e.g., 2077-12-31T23:59:59 ).
step string | number undefined Specifies the increment step for datetime values (e.g., in seconds, minutes, or hours).
name string undefined Assigns a name to the datetime input field, useful for form submissions.
disabled boolean false Disables the datetime input field, preventing user interaction.
invalid boolean false Marks the datetime input field as invalid, typically used for form validation.
required boolean false Indicates that the datetime input is required before form submission.
readonly boolean false Makes the datetime input field read-only, preventing user modifications.
class string undefined Custom CSS class name for additional styling.

Slots

Events