Save 15% on all Justd Blocks
Components

Date Picker

A UI component that provides an interactive way to select a single date from a calendar view.

Basic

A date picker combines a DateField with a Calendar popover, allowing users to either type in or select a date and time.

Event date

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Date Picker comes packed with several components to enhance functionality and provide a seamless experience.

Buttons play a crucial role in functionality, whether for submitting a form or navigating to another page.
A date-based UI component that enables users to view and select dates, supporting scheduling and event tracking.
A form input specifically for entering and selecting dates, supporting various date formats and validation.
A small, floating UI element that appears near a trigger to show contextual information or actions.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Date and Time

While not a full-fledged date-time picker, this setup lets you edit both date and time in a segmented field.

Event date

Validation

To ensure that the date picker is filled out, use the isRequired prop.

Delivery date

Custom Validation

The validate function is your go-to for custom validation rules. It checks the current date value and returns an error message string or strings if the value doesn't meet your criteria.

Delivery date

Controlled

Take control of your date picker by passing a value prop, which allows you to manage the selected date.

Friday, February 28, 2025

2025-02-28

Event date

Disabled

When the date picker is disabled, it becomes non-interactive and visually represents a disabled state.

Event date