---
title: Datepicker
desc: Form element that allows users to select a date from a calendar interface.
ico: mdi:calendar-multiselect
keywords:
  - form
  - time

props:
  - class: .prs-date
    type: component
    desc: For <input>
  - class: .prs-cal
    type: component
    desc: Container
  - class: .prs-cal-header
    type: part
    desc: Container
  - class: .prs-cal-prev
    type: part
    desc: For <button>
  - class: .prs-cal-next
    type: part
    desc: For <button>
  - class: .prs-cal-my
    type: part
    desc: For current m/y
  - class: .prs-cal-days
    type: part
    desc: Day list
  - class: .prs-cal-week
    type: part
    desc: Weekday list
  - class: .prs-cal-day
    type: part
    desc: For <button>
  - class: .prs-cal-day_today
    type: state
    desc: Today
  - class: .prs-cal-day_selected
    type: state
    desc: Selected day

controls: false

preview: |
  <div class="w-96 max-w-[16.875rem]">
    <div class="prs-cal">
      <div class="prs-cal-header">
        <button class="prs-cal-prev" aria-label="Previous month">
          <iconify-icon icon="mdi:menu-left" width="1.5rem" height="1.5rem" noobserver></iconify-icon>
        </button>
        <button class="prs-cal-next" aria-label="Next month">
          <iconify-icon icon="mdi:menu-right" width="1.5rem" height="1.5rem" noobserver></iconify-icon>
        </button>
        <span class="prs-cal-my">Month 20XX</span>
      </div>
      <div class="prs-cal-days">
        <div class="prs-cal-week">
          <span>Sun</span>
          <span>Mon</span>
          <span>Tue</span>
          <span>Wed</span>
          <span>Thu</span>
          <span>Fri</span>
          <span>Sat</span>
        </div>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">26</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">27</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">28</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">29</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">30</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">31</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">1</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">2</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">3</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">4</button>
        <button class="prs-cal-day prs-cal-day_selected" aria-label="Mm DD, YYYY selected">5</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">6</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">7</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">8</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">9</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">10</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">11</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">12</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">13</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">14</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">15</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">16</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">17</button>
        <button class="prs-cal-day prs-cal-day_today" aria-current="date" aria-label="Mm DD, YYYY">18</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">19</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">20</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">21</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">22</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">23</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">24</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">25</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">26</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">27</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">28</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">29</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">30</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">31</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">1</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">2</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">3</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">4</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">5</button>
      </div>
    </div>
  </div>

code:
  html: |
    <div class="prs-cal">
      <div class="prs-cal-header">
        <button class="prs-cal-prev" aria-label="Previous month">
          <iconify-icon icon="mdi:menu-left" width="1.5rem" height="1.5rem"></iconify-icon>
        </button>
        <button class="prs-cal-next" aria-label="Next month">
          <iconify-icon icon="mdi:menu-right" width="1.5rem" height="1.5rem"></iconify-icon>
        </button>
        <span class="prs-cal-my">Month 20XX</span>
      </div>
      <div class="prs-cal-days">
        <div class="prs-cal-week">
          <span>Sun</span>
          <span>Mon</span>
          <span>Tue</span>
          <span>Wed</span>
          <span>Thu</span>
          <span>Fri</span>
          <span>Sat</span>
        </div>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">26</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">27</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">28</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">29</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">30</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">31</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">1</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">2</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">3</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">4</button>
        <button class="prs-cal-day prs-cal-day_selected" aria-label="Mm DD, YYYY selected">5</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">6</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">7</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">8</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">9</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">10</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">11</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">12</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">13</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">14</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">15</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">16</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">17</button>
        <button class="prs-cal-day prs-cal-day_today" aria-current="date" aria-label="Mm DD, YYYY">18</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">19</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">20</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">21</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">22</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">23</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">24</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">25</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">26</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">27</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">28</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">29</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">30</button>
        <button class="prs-cal-day" aria-label="Mm DD, YYYY">31</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">1</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">2</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">3</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">4</button>
        <button class="prs-cal-day prs-cal-day_disabled" aria-label="Mm DD, YYYY">5</button>
      </div>
    </div>
  logic: false
---

We recommend using the built-in browser date/time input type so we can inherit all the accessibility features as well as prevent z-index and overflow clipping in iframes. { .text-balance }