# Datepicker

## Visual Structure

```
ga-datepicker
  ├── ga-calendar...
  └── ga-datepicker__footer
ga-datepicker-toggle
```

## Elements Hierarchy

### Core Blocks

- `ga-datepicker` - Main container for the entire datepicker component
- `ga-datepicker-toggle` - Icon button to toggle the visibility of the datepicker to be used inside an input field

### Optional Elements

- `ga-datepicker__footer` - Footer section with additional actions like "Today" button

## Examples

### Default

```html
<div class="ga-datepicker">
  <div class="ga-calendar">
    <div class="ga-calendar__header">
      <div class="ga-calendar__month-year">
        <button type="button" class="ga-calendar__month-year-button">
          Sep
          <!-- icon: chevron-down, size=16, class="ga-icon" -->
        </button>
        <button type="button" class="ga-calendar__month-year-button">
          2025
          <!-- icon: chevron-down, size=16, class="ga-icon" -->
        </button>
      </div>
      <div class="ga-calendar__navigation">
        <button type="button" class="ga-calendar__navigation-button">
          <!-- icon: chevron-left, size=24, class="ga-icon" -->
        </button>
        <button type="button" class="ga-calendar__navigation-button">
          <!-- icon: chevron-right, size=24, class="ga-icon" -->
        </button>
      </div>
    </div>
    <div class="ga-calendar__weekdays">
      <div class="ga-calendar__weekday">Mo</div>
      <div class="ga-calendar__weekday">Tu</div>
      <div class="ga-calendar__weekday">We</div>
      <div class="ga-calendar__weekday">Th</div>
      <div class="ga-calendar__weekday">Fr</div>
      <div class="ga-calendar__weekday">Sa</div>
      <div class="ga-calendar__weekday">Su</div>
    </div>
    <div class="ga-calendar__selection ga-calendar__selection--day">
      <div class="ga-calendar__day">1</div>
      <div class="ga-calendar__day">2</div>
      <div class="ga-calendar__day">3</div>
      <div class="ga-calendar__day">4</div>
      <div class="ga-calendar__day">5</div>
      <div class="ga-calendar__day">6</div>
      <div class="ga-calendar__day">7</div>
      <div class="ga-calendar__day">8</div>
      <div class="ga-calendar__day">9</div>
      <div class="ga-calendar__day ga-calendar__day--special">10</div>
      <div class="ga-calendar__day">11</div>
      <div class="ga-calendar__day">12</div>
      <div class="ga-calendar__day">13</div>
      <div class="ga-calendar__day">14</div>
      <div class="ga-calendar__day ga-calendar__day--current">15</div>
      <div class="ga-calendar__day">16</div>
      <div class="ga-calendar__day">17</div>
      <div class="ga-calendar__day">18</div>
      <div class="ga-calendar__day">19</div>
      <div class="ga-calendar__day ga-calendar__day--selected">20</div>
      <div class="ga-calendar__day">21</div>
      <div class="ga-calendar__day">22</div>
      <div class="ga-calendar__day">23</div>
      <div class="ga-calendar__day">24</div>
      <div class="ga-calendar__day">25</div>
      <div class="ga-calendar__day">26</div>
      <div class="ga-calendar__day">27</div>
      <div class="ga-calendar__day">28</div>
      <div class="ga-calendar__day">29</div>
      <div class="ga-calendar__day">30</div>
    </div>
  </div>
  <div class="ga-datepicker__footer text-center">
    <button class="ga-button ga-button--secondary">Today</button>
  </div>
</div>
```

### Input

```html
<div class="ga-input">
  <input type="text" value="2025-09-15" />
  <button type="button" class="ga-datepicker-toggle">
    <!-- icon: calendar-days, size=24 -->
  </button>
</div>
```