Datepicker FigmaFigma Code Connected JSWeb Component

Datepickers are used to select an individual date, date range, and/or time from a familiar small calendar dropdown.

Datepicker types

Honeycomb supports two different methods of displaying a datepicker: an interactive JS-based web component that is fully accessible, as well as the browser-native <input type="date"> element. The later is generally preferred but does not yet support screen readers completely, so we recommend the web component.

We also provide a noninteractive CSS-based datepicker that should be used as an HTML/CSS component if you’re creating you’re own custom datepicker.

Web component

The datepicker web component is a self-contained web component that provides all accessibility and interactive features out of the box. Create one after importing the appropriate JavaScript module/file by using the <hc-datepicker> element.

html

Expand Edit in Playground Copy


<hc-datepicker name="basic"></hc-datepicker>

<hc-datepicker name="mdy" format="mdy" direction="right"></hc-datepicker>

<hc-datepicker name="complete" 
               placeholder="Seleziona una data..." 
               min="2025-01-01" 
               max="2025-12-31" 
               lang="it-IT" 
               data-first-day="1" 
               format="iso"
               required>
</hc-datepicker>

For accessibility and standardization reasons, we currently recommend using this component over the browser-native inputs. Screen reader and other assistive technologies are supported fully with the web component.

Options

This web component accepts the a number of attributes, including the normal <input> attributes as well as some basic ones to control the bounds and other aspects of the datepicker.

Attribute	Type	Default	Description
name	string	—	Field name used when the control participates in form submission. Behaves like `<input name>`.
value	ISO yyyy-mm-dd	—	Currently selected date. Can be set programmatically or in markup. Reflects the internal date value.
min	ISO yyyy-mm-dd	—	Earliest selectable date. Dates before this are disabled.
max	ISO yyyy-mm-dd	—	Latest selectable date. Dates after this are disabled.
format	enum	iso	Input date format. Default is YYYY-MM-DD. Use `mdy` for MM/DD/YYYY and `dmy` for DD/MM/YYYY.
placeholder	string	YYYY-MM-DD	Placeholder text shown when no value is set.
direction	string	left	Dropdown menu direction. Use `right` to right-align the menu to the input.
lang	BCP-47 locale	browser locale	Controls localized month and weekday names, e.g. en-US, fr-FR, ja-JP.
data-first-day	0-6	“0”	Which weekday the calendar starts on (0 = Sunday, 1 = Monday, 2 = Tuesday, etc.).
required	boolean	false	Marks the control as required for form validation.
disabled	boolean	false	Disables all interaction and greys out the control.

The following CSS variables are available for overriding the calendar day items. Dark mode is not yet supported but forthcoming.

Variable	Default	Description
`--hc-datepicker-text`	`text-primary`	Default text color
`--hc-datepicker-active-bg`	`black`	Selected day background color
`--hc-datepicker-active-bg-hover`	`void`	Selected day background hover color
`--hc-datepicker-active-text`	`white`	Selected day text color
`--hc-datepicker-bg-hover`	`gray-100`	Default day background hover color
`--hc-datepicker-focus`	`gray-650`	Outline color for days days that have `:focus`
`--hc-datepicker-range-bg`	`navy-50`	Selected range background color, excluding start and end days
`--hc-datepicker-range-bg-hover`	`navy-100`	Background hover color for interior selected range days

You can override these by setting them via CSS within an hc-datepicker element:


hc-datepicker {
  --hc-datepicker-focus: var(--hc-color-peacock-500);
  --hc-datepicker-active-bg: var(--hc-color-peacock-600);
}

Native HTML date and time inputs

The native HTML date and time input types should be used whenever the user must select a date (and the web component is not available), or when selecting a time.

These inputs have full cross-browser support and work well now on mobile, though they do not fully support screen readers currently.

CSS datepicker

If you’d like to create you’re own datepicker control, Honeycomb also supports a CSS/HTML version that can be customized. This should normally appear in a Dropdown menu, though they can also be embedded on screen or in any other component, like a Modal or Drawer.

Create one with a wrapper element with class .hc-datepicker. Additional elements should be included as necessary depending on the use case. Here is a complete default example with exlanations for each element below:

August 2024

M T W R F S U

html

Expand Edit in Playground Copy


<div class="hc-datepicker bg-white rounded-md" id="hcdp1">
  <div class="hc-datepicker-title">
    <div class="hc-datepicker-title-month">
      <span class="hc-label">August 2024</span>
      <label for="hc-datepicker-year-select" class="hc-button hc-button--icon hc-button--sm hc-button--secondary hc-datepicker-year-toggle-button" aria-label="Previous month">
        <i class="hc-icon hc-icon--chevron-down"></i>
      </label>
    </div>
    <div class="hc-datepicker-title-actions">
      <button class="hc-button hc-button--icon hc-button--sm hc-button--secondary" 
        aria-label="Previous month"
        onclick="document.querySelectorAll('#hcdp1 .hc-datepicker-calendar-month').forEach((cal) => { swapCalendars(cal, 'ltr') });">
        <i class="hc-icon hc-icon--chevron-left"></i>
      </button>
      <button class="hc-button hc-button--icon hc-button--sm hc-button--secondary" 
        aria-label="Next month"
        onclick="document.querySelectorAll('#hcdp1 .hc-datepicker-calendar-month').forEach((cal) => { swapCalendars(cal, 'rtl') });">
        <i class="hc-icon hc-icon--chevron-right"></i>
      </button>
    </div>
  </div>
  <input type="checkbox" class="hc-datepicker-year-toggle" id="hc-datepicker-year-select">
  <div class="hc-datepicker-years">
    <button class="hc-datepicker-calendar-item">2028</button>
    <button class="hc-datepicker-calendar-item">2027</button>
    <button class="hc-datepicker-calendar-item">2026</button>
    <button class="hc-datepicker-calendar-item">2025</button>
    <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on hc-datepicker-calendar-item--today">2024</button>
    <button class="hc-datepicker-calendar-item">2023</button>
    <button class="hc-datepicker-calendar-item">2022</button>
    <button class="hc-datepicker-calendar-item">2021</button>
    <button class="hc-datepicker-calendar-item">2020</button>
    <button class="hc-datepicker-calendar-item">2019</button>
    <button class="hc-datepicker-calendar-item">2018</button>
    <button class="hc-datepicker-calendar-item">2017</button>
    <button class="hc-datepicker-calendar-item">2016</button>
    <button class="hc-datepicker-calendar-item">2015</button>
    <button class="hc-datepicker-calendar-item">2014</button>
    <button class="hc-datepicker-calendar-item">2013</button>
    <button class="hc-datepicker-calendar-item">2012</button>
    <button class="hc-datepicker-calendar-item">2011</button>
    <button class="hc-datepicker-calendar-item">2010</button>
    <button class="hc-datepicker-calendar-item">2009</button>
    <button class="hc-datepicker-calendar-item">2008</button>
    <button class="hc-datepicker-calendar-item">2007</button>
    <button class="hc-datepicker-calendar-item">2006</button>
    <button class="hc-datepicker-calendar-item">2005</button>
    <button class="hc-datepicker-calendar-item">2004</button>
    <button class="hc-datepicker-calendar-item">2003</button>
    <button class="hc-datepicker-calendar-item">2002</button>
    <button class="hc-datepicker-calendar-item">2001</button>
    <button class="hc-datepicker-calendar-item">2000</button>
    <button class="hc-datepicker-calendar-item">1999</button>
    <button class="hc-datepicker-calendar-item">1998</button>
    <button class="hc-datepicker-calendar-item">1997</button>
    <button class="hc-datepicker-calendar-item">1996</button>
    <button class="hc-datepicker-calendar-item">1995</button>
    <button class="hc-datepicker-calendar-item">1994</button>
    <button class="hc-datepicker-calendar-item">1993</button>
    <button class="hc-datepicker-calendar-item">1992</button>
    <button class="hc-datepicker-calendar-item">1991</button>
    <button class="hc-datepicker-calendar-item">1990</button>
    <button class="hc-datepicker-calendar-item">1989</button>
    <button class="hc-datepicker-calendar-item">1988</button>
    <button class="hc-datepicker-calendar-item">1987</button>
    <button class="hc-datepicker-calendar-item">1986</button>
    <button class="hc-datepicker-calendar-item">1985</button>
  </div>
  <div class="hc-datepicker-calendar">
    <div class="hc-datepicker-calendar-head">
      <span class="hc-datepicker-calendar-th">M</span>
      <span class="hc-datepicker-calendar-th">T</span>
      <span class="hc-datepicker-calendar-th">W</span>
      <span class="hc-datepicker-calendar-th">R</span>
      <span class="hc-datepicker-calendar-th">F</span>
      <span class="hc-datepicker-calendar-th">S</span>
      <span class="hc-datepicker-calendar-th">U</span>
    </div>
    <div class="hc-datepicker-calendar-months">
      <div class="hc-datepicker-calendar-month hc-is--active" data-hc-datepicker-month="August" data-hc-datepicker-year="2024">
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</button>
        <button class="hc-datepicker-calendar-item">1</button>
        <button class="hc-datepicker-calendar-item">2</button>
        <button class="hc-datepicker-calendar-item">3</button>
        <button class="hc-datepicker-calendar-item">4</button>
        <button class="hc-datepicker-calendar-item">5</button>
        <button class="hc-datepicker-calendar-item">6</button>
        <button class="hc-datepicker-calendar-item">7</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--today">8</button>
        <button class="hc-datepicker-calendar-item">9</button>
        <button class="hc-datepicker-calendar-item">10</button>
        <button class="hc-datepicker-calendar-item">11</button>
        <button class="hc-datepicker-calendar-item">12</button>
        <button class="hc-datepicker-calendar-item">13</button>
        <button class="hc-datepicker-calendar-item">14</button>
        <button class="hc-datepicker-calendar-item">15</button>
        <button class="hc-datepicker-calendar-item">16</button>
        <button class="hc-datepicker-calendar-item">17</button>
        <button class="hc-datepicker-calendar-item">18</button>
        <button class="hc-datepicker-calendar-item">19</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on">20</button>
        <button class="hc-datepicker-calendar-item">21</button>
        <button class="hc-datepicker-calendar-item">22</button>
        <button class="hc-datepicker-calendar-item">23</button>
        <button class="hc-datepicker-calendar-item">24</button>
        <button class="hc-datepicker-calendar-item">25</button>
        <button class="hc-datepicker-calendar-item">26</button>
        <button class="hc-datepicker-calendar-item">27</button>
        <button class="hc-datepicker-calendar-item">28</button>
        <button class="hc-datepicker-calendar-item">29</button>
        <button class="hc-datepicker-calendar-item">30</button>
        <button class="hc-datepicker-calendar-item">31</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">6</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">7</button>
      </div>
      <div class="hc-datepicker-calendar-month" data-hc-datepicker-month="September" data-hc-datepicker-year="2024">
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">25</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">26</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">27</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</button>
        <button class="hc-datepicker-calendar-item">1</button>
        <button class="hc-datepicker-calendar-item">2</button>
        <button class="hc-datepicker-calendar-item">3</button>
        <button class="hc-datepicker-calendar-item">4</button>
        <button class="hc-datepicker-calendar-item">5</button>
        <button class="hc-datepicker-calendar-item">6</button>
        <button class="hc-datepicker-calendar-item">7</button>
        <button class="hc-datepicker-calendar-item">8</button>
        <button class="hc-datepicker-calendar-item">9</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--start">10</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">11</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">12</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">13</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">14</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">15</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--end">16</button>
        <button class="hc-datepicker-calendar-item">17</button>
        <button class="hc-datepicker-calendar-item">18</button>
        <button class="hc-datepicker-calendar-item">19</button>
        <button class="hc-datepicker-calendar-item">20</button>
        <button class="hc-datepicker-calendar-item">21</button>
        <button class="hc-datepicker-calendar-item">22</button>
        <button class="hc-datepicker-calendar-item">23</button>
        <button class="hc-datepicker-calendar-item">24</button>
        <button class="hc-datepicker-calendar-item">25</button>
        <button class="hc-datepicker-calendar-item">26</button>
        <button class="hc-datepicker-calendar-item">27</button>
        <button class="hc-datepicker-calendar-item">28</button>
        <button class="hc-datepicker-calendar-item">29</button>
        <button class="hc-datepicker-calendar-item">30</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</button>
        <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</button>
      </div>
    </div>
  </div>
</div>

Embedded datepicker

The datepicker component may also be used as an embedded calendar either for display or for mild interactions. This can be useful on a fuller calendar screen to show the month preview with indicators for days that have events.

Append the class .hc-datepicker--embedded to the parent element and remove any controls that are unnecessary for your use case (such as the year toggle or month switcher).

Use <span> elements for display and <button> elements for interactive calendars.

Display

August 2024

M T W R F S U

28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 5 6 7

Interactive

August 2024

M T W R F S U

html

Expand Edit in Playground Copy


<div class="flex flex-col gap-2 items-center">
  <div>Display</div>
  <div class="hc-datepicker hc-datepicker--embedded hc-datepicker--embedded--with-border">
    <div class="hc-datepicker-title">
      <div class="hc-datepicker-title-month">
        <span class="hc-label" id="hcdpm">August 2024</span>
      </div>
    </div>
    <div class="hc-datepicker-calendar">
      <div class="hc-datepicker-calendar-head">
        <span class="hc-datepicker-calendar-th">M</span>
        <span class="hc-datepicker-calendar-th">T</span>
        <span class="hc-datepicker-calendar-th">W</span>
        <span class="hc-datepicker-calendar-th">R</span>
        <span class="hc-datepicker-calendar-th">F</span>
        <span class="hc-datepicker-calendar-th">S</span>
        <span class="hc-datepicker-calendar-th">U</span>
      </div>
      <div class="hc-datepicker-calendar-months">
        <div class="hc-datepicker-calendar-month hc-is--active" data-hc-datepicker-month="August" data-hc-datepicker-year="2024">
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</span>
          <span class="hc-datepicker-calendar-item">1</span>
          <span class="hc-datepicker-calendar-item">2</span>
          <span class="hc-datepicker-calendar-item">3</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">4</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">5</span>
          <span class="hc-datepicker-calendar-item">6</span>
          <span class="hc-datepicker-calendar-item">7</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--today hc-datepicker-calendar-item--event">8</span>
          <span class="hc-datepicker-calendar-item">9</span>
          <span class="hc-datepicker-calendar-item">10</span>
          <span class="hc-datepicker-calendar-item">11</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">12</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">13</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">14</span>
          <span class="hc-datepicker-calendar-item">15</span>
          <span class="hc-datepicker-calendar-item">16</span>
          <span class="hc-datepicker-calendar-item">17</span>
          <span class="hc-datepicker-calendar-item">18</span>
          <span class="hc-datepicker-calendar-item">19</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on hc-datepicker-calendar-item--event">20</span>
          <span class="hc-datepicker-calendar-item">21</span>
          <span class="hc-datepicker-calendar-item">22</span>
          <span class="hc-datepicker-calendar-item">23</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">24</span>
          <span class="hc-datepicker-calendar-item">25</span>
          <span class="hc-datepicker-calendar-item">26</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">27</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">28</span>
          <span class="hc-datepicker-calendar-item">29</span>
          <span class="hc-datepicker-calendar-item">30</span>
          <span class="hc-datepicker-calendar-item">31</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">6</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">7</span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="flex flex-col gap-2 items-center">
  <div>Interactive</div>
  <div class="hc-datepicker hc-datepicker--embedded hc-datepicker--embedded--with-border">
    <div class="hc-datepicker-title">
      <div class="hc-datepicker-title-month">
        <span class="hc-label" id="hcdpm2">August 2024</span>
      </div>
    </div>
    <div class="hc-datepicker-calendar">
      <div class="hc-datepicker-calendar-head">
        <span class="hc-datepicker-calendar-th">M</span>
        <span class="hc-datepicker-calendar-th">T</span>
        <span class="hc-datepicker-calendar-th">W</span>
        <span class="hc-datepicker-calendar-th">R</span>
        <span class="hc-datepicker-calendar-th">F</span>
        <span class="hc-datepicker-calendar-th">S</span>
        <span class="hc-datepicker-calendar-th">U</span>
      </div>
      <div class="hc-datepicker-calendar-months">
        <div class="hc-datepicker-calendar-month hc-is--active" data-hc-datepicker-month="August" data-hc-datepicker-year="2024">
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</button>
          <button class="hc-datepicker-calendar-item">1</button>
          <button class="hc-datepicker-calendar-item">2</button>
          <button class="hc-datepicker-calendar-item">3</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">4</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">5</button>
          <button class="hc-datepicker-calendar-item">6</button>
          <button class="hc-datepicker-calendar-item">7</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--today hc-datepicker-calendar-item--event">8</button>
          <button class="hc-datepicker-calendar-item">9</button>
          <button class="hc-datepicker-calendar-item">10</button>
          <button class="hc-datepicker-calendar-item">11</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">12</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">13</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">14</button>
          <button class="hc-datepicker-calendar-item">15</button>
          <button class="hc-datepicker-calendar-item">16</button>
          <button class="hc-datepicker-calendar-item">17</button>
          <button class="hc-datepicker-calendar-item">18</button>
          <button class="hc-datepicker-calendar-item">19</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on hc-datepicker-calendar-item--event">20</button>
          <button class="hc-datepicker-calendar-item">21</button>
          <button class="hc-datepicker-calendar-item">22</button>
          <button class="hc-datepicker-calendar-item">23</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">24</button>
          <button class="hc-datepicker-calendar-item">25</button>
          <button class="hc-datepicker-calendar-item">26</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">27</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">28</button>
          <button class="hc-datepicker-calendar-item">29</button>
          <button class="hc-datepicker-calendar-item">30</button>
          <button class="hc-datepicker-calendar-item">31</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">6</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">7</button>
        </div>
      </div>
    </div>
  </div>
</div>

The calendar markup is essentially the same otherwise as the interactive datepicker, with an additional class on each day to indicate that there is an event on that day: .hc-datepicker-calendar-item--event.

The height of the calendar is automatic based on the number of weeks presented for the given month.

Brand themes

Apply a brand theme to the buttons by adding .hc-theme to the parent element. Ensure also that an theme is set in the <body> element as well.

Theme:

August 2024

M T W R F S U

August 2024

M T W R F S U

28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 5 6 7

html

Expand Edit in Playground Copy


<div class="w-full md:w-1/2 xl:w-1/3 mx-auto flex flex-row items-center gap-2 pt-2 mb-4">
    <label class="whitespace-nowrap" for="toggle-theme">Theme:</label>
    <select class="hc-select" onchange="document.querySelector('body').dataset.hcTheme=this.value" name="toggle-theme" id="toggle-theme">
        <option value="ss">Default</option>
        <option value="attend">Attend</option>
        <option value="boost">Boost</option>
        <option value="connect">Connect</option>
        <option value="forms">Forms &amp; Flows</option>
    </select>
</div>
<div class="flex flex-row gap-12">
  <div class="hc-datepicker hc-theme bg-white rounded-md" id="hcdp2">
    <div class="hc-datepicker-title">
      <div class="hc-datepicker-title-month">
        <span class="hc-label" id="hcdpm3">August 2024</span>
        <label for="hc-datepicker-year-select2" class="hc-button hc-button--icon hc-button--sm hc-button--secondary hc-datepicker-year-toggle-button" aria-label="Previous month">
          <i class="hc-icon hc-icon--chevron-down"></i>
        </label>
      </div>
      <div class="hc-datepicker-title-actions">
        <button class="hc-button hc-button--icon hc-button--sm hc-button--secondary" 
          aria-label="Previous month"
          onclick="document.querySelectorAll('#hcdp2 .hc-datepicker-calendar-month').forEach((cal) => { swapCalendars(cal, 'ltr') });">
          <i class="hc-icon hc-icon--chevron-left"></i>
        </button>
        <button class="hc-button hc-button--icon hc-button--sm hc-button--secondary" 
          aria-label="Next month"
          onclick="document.querySelectorAll('#hcdp2 .hc-datepicker-calendar-month').forEach((cal) => { swapCalendars(cal, 'rtl') });">
          <i class="hc-icon hc-icon--chevron-right"></i>
        </button>
      </div>
    </div>
    <input type="checkbox" class="hc-datepicker-year-toggle" id="hc-datepicker-year-select2">
    <div class="hc-datepicker-years">
      <button class="hc-datepicker-calendar-item">2028</button>
      <button class="hc-datepicker-calendar-item">2027</button>
      <button class="hc-datepicker-calendar-item">2026</button>
      <button class="hc-datepicker-calendar-item">2025</button>
      <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on hc-datepicker-calendar-item--today">2024</button>
      <button class="hc-datepicker-calendar-item">2023</button>
      <button class="hc-datepicker-calendar-item">2022</button>
      <button class="hc-datepicker-calendar-item">2021</button>
      <button class="hc-datepicker-calendar-item">2020</button>
      <button class="hc-datepicker-calendar-item">2019</button>
      <button class="hc-datepicker-calendar-item">2018</button>
      <button class="hc-datepicker-calendar-item">2017</button>
      <button class="hc-datepicker-calendar-item">2016</button>
      <button class="hc-datepicker-calendar-item">2015</button>
      <button class="hc-datepicker-calendar-item">2014</button>
      <button class="hc-datepicker-calendar-item">2013</button>
      <button class="hc-datepicker-calendar-item">2012</button>
      <button class="hc-datepicker-calendar-item">2011</button>
      <button class="hc-datepicker-calendar-item">2010</button>
      <button class="hc-datepicker-calendar-item">2009</button>
      <button class="hc-datepicker-calendar-item">2008</button>
      <button class="hc-datepicker-calendar-item">2007</button>
      <button class="hc-datepicker-calendar-item">2006</button>
      <button class="hc-datepicker-calendar-item">2005</button>
      <button class="hc-datepicker-calendar-item">2004</button>
      <button class="hc-datepicker-calendar-item">2003</button>
      <button class="hc-datepicker-calendar-item">2002</button>
      <button class="hc-datepicker-calendar-item">2001</button>
      <button class="hc-datepicker-calendar-item">2000</button>
      <button class="hc-datepicker-calendar-item">1999</button>
      <button class="hc-datepicker-calendar-item">1998</button>
      <button class="hc-datepicker-calendar-item">1997</button>
      <button class="hc-datepicker-calendar-item">1996</button>
      <button class="hc-datepicker-calendar-item">1995</button>
      <button class="hc-datepicker-calendar-item">1994</button>
      <button class="hc-datepicker-calendar-item">1993</button>
      <button class="hc-datepicker-calendar-item">1992</button>
      <button class="hc-datepicker-calendar-item">1991</button>
      <button class="hc-datepicker-calendar-item">1990</button>
      <button class="hc-datepicker-calendar-item">1989</button>
      <button class="hc-datepicker-calendar-item">1988</button>
      <button class="hc-datepicker-calendar-item">1987</button>
      <button class="hc-datepicker-calendar-item">1986</button>
      <button class="hc-datepicker-calendar-item">1985</button>
    </div>
    <div class="hc-datepicker-calendar">
      <div class="hc-datepicker-calendar-head">
        <span class="hc-datepicker-calendar-th">M</span>
        <span class="hc-datepicker-calendar-th">T</span>
        <span class="hc-datepicker-calendar-th">W</span>
        <span class="hc-datepicker-calendar-th">R</span>
        <span class="hc-datepicker-calendar-th">F</span>
        <span class="hc-datepicker-calendar-th">S</span>
        <span class="hc-datepicker-calendar-th">U</span>
      </div>
      <div class="hc-datepicker-calendar-months">
        <div class="hc-datepicker-calendar-month hc-is--active" data-hc-datepicker-month="August" data-hc-datepicker-year="2024">
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</button>
          <button class="hc-datepicker-calendar-item">1</button>
          <button class="hc-datepicker-calendar-item">2</button>
          <button class="hc-datepicker-calendar-item">3</button>
          <button class="hc-datepicker-calendar-item">4</button>
          <button class="hc-datepicker-calendar-item">5</button>
          <button class="hc-datepicker-calendar-item">6</button>
          <button class="hc-datepicker-calendar-item">7</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--today">8</button>
          <button class="hc-datepicker-calendar-item">9</button>
          <button class="hc-datepicker-calendar-item">10</button>
          <button class="hc-datepicker-calendar-item">11</button>
          <button class="hc-datepicker-calendar-item">12</button>
          <button class="hc-datepicker-calendar-item">13</button>
          <button class="hc-datepicker-calendar-item">14</button>
          <button class="hc-datepicker-calendar-item">15</button>
          <button class="hc-datepicker-calendar-item">16</button>
          <button class="hc-datepicker-calendar-item">17</button>
          <button class="hc-datepicker-calendar-item">18</button>
          <button class="hc-datepicker-calendar-item">19</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on">20</button>
          <button class="hc-datepicker-calendar-item">21</button>
          <button class="hc-datepicker-calendar-item">22</button>
          <button class="hc-datepicker-calendar-item">23</button>
          <button class="hc-datepicker-calendar-item">24</button>
          <button class="hc-datepicker-calendar-item">25</button>
          <button class="hc-datepicker-calendar-item">26</button>
          <button class="hc-datepicker-calendar-item">27</button>
          <button class="hc-datepicker-calendar-item">28</button>
          <button class="hc-datepicker-calendar-item">29</button>
          <button class="hc-datepicker-calendar-item">30</button>
          <button class="hc-datepicker-calendar-item">31</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">6</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">7</button>
        </div>
        <div class="hc-datepicker-calendar-month" data-hc-datepicker-month="September" data-hc-datepicker-year="2024">
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">25</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">26</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">27</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</button>
          <button class="hc-datepicker-calendar-item">1</button>
          <button class="hc-datepicker-calendar-item">2</button>
          <button class="hc-datepicker-calendar-item">3</button>
          <button class="hc-datepicker-calendar-item">4</button>
          <button class="hc-datepicker-calendar-item">5</button>
          <button class="hc-datepicker-calendar-item">6</button>
          <button class="hc-datepicker-calendar-item">7</button>
          <button class="hc-datepicker-calendar-item">8</button>
          <button class="hc-datepicker-calendar-item">9</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--start">10</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">11</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">12</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">13</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">14</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--middle">15</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--end">16</button>
          <button class="hc-datepicker-calendar-item">17</button>
          <button class="hc-datepicker-calendar-item">18</button>
          <button class="hc-datepicker-calendar-item">19</button>
          <button class="hc-datepicker-calendar-item">20</button>
          <button class="hc-datepicker-calendar-item">21</button>
          <button class="hc-datepicker-calendar-item">22</button>
          <button class="hc-datepicker-calendar-item">23</button>
          <button class="hc-datepicker-calendar-item">24</button>
          <button class="hc-datepicker-calendar-item">25</button>
          <button class="hc-datepicker-calendar-item">26</button>
          <button class="hc-datepicker-calendar-item">27</button>
          <button class="hc-datepicker-calendar-item">28</button>
          <button class="hc-datepicker-calendar-item">29</button>
          <button class="hc-datepicker-calendar-item">30</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</button>
          <button class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</button>
        </div>
      </div>
    </div>
  </div>
  <div class="hc-datepicker hc-datepicker--embedded hc-theme bg-white border-card border-gray-500 rounded-lg">
    <div class="hc-datepicker-title">
      <div class="hc-datepicker-title-month">
        <span class="hc-label" id="hcdpm4">August 2024</span>
      </div>
    </div>
    <div class="hc-datepicker-calendar">
      <div class="hc-datepicker-calendar-head">
        <span class="hc-datepicker-calendar-th">M</span>
        <span class="hc-datepicker-calendar-th">T</span>
        <span class="hc-datepicker-calendar-th">W</span>
        <span class="hc-datepicker-calendar-th">R</span>
        <span class="hc-datepicker-calendar-th">F</span>
        <span class="hc-datepicker-calendar-th">S</span>
        <span class="hc-datepicker-calendar-th">U</span>
      </div>
      <div class="hc-datepicker-calendar-months">
        <div class="hc-datepicker-calendar-month hc-is--active" data-hc-datepicker-month="August" data-hc-datepicker-year="2024">
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">28</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">29</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">30</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">31</span>
          <span class="hc-datepicker-calendar-item">1</span>
          <span class="hc-datepicker-calendar-item">2</span>
          <span class="hc-datepicker-calendar-item">3</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">4</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">5</span>
          <span class="hc-datepicker-calendar-item">6</span>
          <span class="hc-datepicker-calendar-item">7</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--today hc-datepicker-calendar-item--event">8</span>
          <span class="hc-datepicker-calendar-item">9</span>
          <span class="hc-datepicker-calendar-item">10</span>
          <span class="hc-datepicker-calendar-item">11</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">12</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">13</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">14</span>
          <span class="hc-datepicker-calendar-item">15</span>
          <span class="hc-datepicker-calendar-item">16</span>
          <span class="hc-datepicker-calendar-item">17</span>
          <span class="hc-datepicker-calendar-item">18</span>
          <span class="hc-datepicker-calendar-item">19</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--on hc-datepicker-calendar-item--event">20</span>
          <span class="hc-datepicker-calendar-item">21</span>
          <span class="hc-datepicker-calendar-item">22</span>
          <span class="hc-datepicker-calendar-item">23</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">24</span>
          <span class="hc-datepicker-calendar-item">25</span>
          <span class="hc-datepicker-calendar-item">26</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">27</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--event">28</span>
          <span class="hc-datepicker-calendar-item">29</span>
          <span class="hc-datepicker-calendar-item">30</span>
          <span class="hc-datepicker-calendar-item">31</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">1</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">2</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">3</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">4</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">5</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">6</span>
          <span class="hc-datepicker-calendar-item hc-datepicker-calendar-item--off">7</span>
        </div>
      </div>
    </div>
  </div>
</div>

Interactions and state

Many of the animations and interactions are handled by default via CSS only. This includes month scrolling transitions, switching between the year selector screen and the calendar view, and hover/selected states.

You are responsible for all JavaScript or other state-handling, however. This includes populating the month containers for previous and successive months, adding appropriate class names to a day or days that a user selects, and any logic that happens when a user changes the year.