Form

Datepicker

The .quanta-datepicker component provides an input field with an interactive popup for selecting a date. It includes navigation, grid views for month/year, and full theme support.

<div class="quanta-datepicker">
  <input type="text" placeholder="Select a date" readonly />
  <div class="quanta-datepicker-popup">
    <!-- Popup content auto-generated by JS -->
  </div>
</div>

Popup Panel

The calendar popup contains navigation and calendar elements. It appears when the input is focused or clicked.

<div class="quanta-datepicker-popup">
  <div class="quanta-datepicker-header">
    <button class="quanta-nav-btn"></button>
    <span class="quanta-month-display">June 2025</span>
    <button class="quanta-nav-btn"></button>
  </div>
  <div class="quanta-weekdays"><!-- Sun - Sat --></div>
  <div class="quanta-calendar"><!-- Date grid --></div>
</div>

Month & Year Grid

Optional popup grid for switching between months or years.

<div class="quanta-grid-popup quanta-month-grid">
  <div>Jan</div>
  <div>Feb</div>
  <!-- ... -->
</div>

Calendar Days

The .quanta-calendar grid uses .quanta-day to render individual days, with modifiers like .today, .selected, or .disabled.

<div class="quanta-calendar">
  <div class="quanta-day today">28</div>
  <div class="quanta-day selected">29</div>
  <div class="quanta-day">30</div>
</div>

28

29

30