Date Picker

A date picker is an interactive element for selecting and displaying a date from a calendar.

By default, the date picker starts in a closed state.

Use cases:

• selecting a date
• displaying a date
• disable selecting specific days of the week

Example

Date picker value: Not changed

Genesis

Declaration

<rapid-date-picker></rapid-date-picker>

Usage

@customElement({
    name: 'my-element',
    template: html`
        <rapid-date-picker @value-changed=${(x, ctx) => x.valueChanged(customEvent(ctx))}>
        </rapid-date-picker>
    `,
})
export class MyElement extends GenesisElement {
    valueChanged(e: CustomEvent) {
        console.log('date picker value changed', e.detail);
    }
}

React

Declaration

<rapid-date-picker></rapid-date-picker>

Usage

export function MyComponent() {

  const datePickerRef = useRef(null);
  const [value, setValue] = useState('Not changed');
  const handleValueChanged = (value) => {
    setValue(value.detail);
  }

  useEffect(() => {
    if (datePickerRef.current) {
      datePickerRef.current.addEventListener('value-changed', handleValueChanged);
    }
  }, []);

  return (
    <rapid-date-picker ref={datePickerRef}>
    </rapid-date-picker>
  );
}

Angular

Usage

import { AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild } from '@angular/core';

@Component({
selector: 'date-picker-example',
template: `
  <rapid-date-picker (value-changed)="handleValueChanged($event)">
  </rapid-date-picker>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class DatePickerExampleComponent implements AfterViewInit {
    valueChanged(e) {
      console.log(e.detail);
    }
}

DOM API

The sections below provide property and attribute binding examples for Genesis Component syntax. The HTML closing tag is not included.

Attributes

Attribute	Type	Use	Example
format	string	The date format shown defaults to MM-DD-YYYY and can accept any valid dayjs format	<rapid-date-picker format="DD-MM-YYYY">
lang	string	Determines the defuault locale. Defaults to en-US and can accept any valid day js lang	<rapid-date-picker lang="en-US">
visible	boolean	Displays the calendar by default. Defaults to false	<rapid-date-picker ?visible=${(x) => x.visible}>
inline-calendar	boolean	Displays the calendar as an inline block element as opposed to being absolutely positioned relative to it's parent. Defaults to false	<rapid-date-picker inline-calendar>
hide-weekends	boolean	Hides Saturday and Sundays restricting user to selecting only week days. Defaults to false	<rapid-date-picker hide-weekends>
position	string	Determines the position of the calendar. Possible options 'right', 'left', 'center' or 'left'.	<rapid-date-picker position="right">
label	string	Sets the label that will be displayed next to the date input text field	<rapid-date-picker label="Trade Date">
value	string	Sets the date value as string in the configured format on the date picker.	<rapid-date-picker label="06-20-2025">

Properties

Property	Type	Use	Example
disabledDaysOfWeek	() => number[]	An array of numbers disabling days of the week with 0 being Sunday and 6 being Saturday	<rapid-date-picker :disabledDaysOfTheWeek="${() => [1]}">

Component Methods

This component doesn't have any methods.

Slots

Slot	Use
end	The icon in the calendar toggle.
bottom	The bottom of the calendar.

Parts

Part	Use
date-toggle	The calendar toggle element which shows the current value and toggle icon.
input-icon-container	The icon in the calendar toggle.

Events fired

Event	Type	Use	Example
value-changed	event	Emits a custom change event when the a date is selected in the calendar. Access the value on the event via .target.value.	<rapid-date-picker @value-changed="${(x) => x.myChangeHandler(event)}">

Events listened to

This component doesn't listen to any events.