blue
View on GitHub

Date Input

A date input allows users to enter or select a specific date using a calendar or predefined format.

Usage

Use the date string format (YYYY-MM-DD) for setting the value.

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

<DateInput value="2020-09-13" />

Mandatory input

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

<div>
	<FormLabel required for="inp-demo">Label</FormLabel>
	<DateInput required value="2023-08-12" id="inp-demo" />
</div>

Input with icon

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

Light
Blue
Zoho Puvi 
<DateInput value="2024-12-13">
	<Icon slot="left-icon" icon={IconActivity} />
</DateInput>

Help message

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

<div>
	<DateInput value="2024-11-13">
		<span slot="help-msg">
			Answer to the Ultimate Question of Life, the Universe, and Everything
		</span>
	</DateInput>
</div>

Invalid state

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

<div>
	<DateInput value="2024-10-13" invalid>
		<span slot="error-msg">
			Answer to the Ultimate Question of Life, the Universe, and Everything
		</span>
	</DateInput>
</div>

Disabled state

Light
Blue
Zoho Puvi 
<DateInput value="2024-09-13" disabled />

Min and max values

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

<DateInput value="2024-09-13" min="2024-09-01" max="2024-09-20" />

Increments

Specifies the increment step in days.

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

<DateInput value="2024-09-13" step="5" />

Props

id string undefined Specifies a unique identifier for the date input field.
value Date String Format undefined Sets the current value of the date input in the format YYYY-MM-DD (e.g., 2005-06-07 ).
min Date String Format undefined Defines the earliest date allowed for selection (e.g., 2000-01-01 ).
max Date String Format undefined Defines the latest date allowed for selection (e.g., 2030-12-31 ).
step string | number undefined Specifies the increment step for date values (e.g., in days).
name string undefined Assigns a name to the date input field, useful for form submissions.
disabled boolean false Disables the date input field, preventing user interaction.
invalid boolean false Marks the date input field as invalid, typically used for form validation.
required boolean false Indicates that the date input is required before form submission.
readonly boolean false Makes the date input field read-only, preventing user modifications.
class string undefined Custom CSS class name for additional styling.

Slots

Events