Date picker

The datepicker allows users to select a date from a calendar or enter it manually, offering flexibility and internationalisation support

Overview

The date picker component is a themed version of FormKit’s date picker input, allowing users to select dates via a calendar interface or manual entry.

For more detailed information on configuring and using FormKit’s date picker component, refer to the official FormKit datepicker documentation.

Basic usage

Check out the FormKit documentation in the Foundations section for setup instructions if you’re new to FormKit.

Importing the component

Ensure your application is configured to use the FormKit plugin. You can then include the date picker component in your FormKit schema or as a standalone component.

Example usage

Once registered, use the datepicker component like this:


                                                        
                                                        
                                                            <FormKit
                                                          type="datepicker"
                                                          label="Select a date"
                                                          name="appointment"
                                                          placeholder="Pick a date"
                                                          :format="{ date: 'short' }"
                                                        />
                                                        
                                                            

Accessibility

The date picker component inherits accessibility features from the native HTML elements, supporting keyboard navigation and customisable accessible labels.

Internationalisation

The date picker supports multiple formats and locales, making it adaptable for international users and different date representations.