WCAG Datepicker

The <wcag-datepicker> is an accessible, customizable web component for selecting dates. It supports keyboard navigation and ARIA attributes, ensuring compliance with WCAG standards.

Properties

Attributes

  • Name
    selectedDate
    Type
    Date
    Description

    Sets the currently selected date. Defaults to null.

Usage

To use the <wcag-datepicker>, include it in your HTML and customize it as needed. 

    
<wcag-datepicker></wcag-datepicker>

Methods

openCalendar()

Opens the datepicker calendar.

selectDate(date)

Sets the selected date to the specified date.

Styling

The <wcag-datepicker> uses a combination of utility classes and CSS for styling. Customize the styles in wcag-datepicker.css to match your design system.

Example

                            
<form id="myForm">
  <wcag-datepicker name="date"></wcag-datepicker>
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');
  const datepicker = document.querySelector('wcag-datepicker');

  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const selectedDate = datepicker.selectedDate;
    console.log('Selected Date:', selectedDate);
    // Handle the form submission as needed
  });
</script>