Monthpicker
The monthpicker component accepts the following attributes: value = {selected, compared}; min = 'YYYYMM' or 'YYYY-MM'; max = 'YYYYMM' or 'YYYY-MM'; optionalCompare = boolean; forceCompare = boolean;
Markup
<div class="odyssey-datepicker odyssey-datepicker--months">
<div class="odyssey-datepicker__dates">
<div class="odyssey-datepicker__column">
<table class="odyssey-datepicker__selector">
<thead class="odyssey-datepicker__selector__title">
<tr>
<th class="odyssey-datepicker__selector__title--prev">
<a class="icon-button">
<i class="odyssey-datepicker__arrow-left icon-button__icon"></i>
</a>
</th>
<th class="odyssey-datepicker__selector__title--name" colspan="2">2021</th>
<th class="odyssey-datepicker__selector__title--next">
<a class="icon-button">
<i class="odyssey-datepicker__arrow-right icon-button__icon"></i>
</a>
</th>
</tr>
</thead>
<tbody class="odyssey-datepicker__selector__picker">
<tr class="odyssey-datepicker__selector__picker__months">
<td><div class="odyssey-datepicker__month">Jan</div></td>
<td><div class="odyssey-datepicker__month">Feb</div></td>
<td><div class="odyssey-datepicker__month">Mar</div></td>
<td><div class="odyssey-datepicker__month">Apr</div></td>
</tr>
<tr class="odyssey-datepicker__selector__picker__months">
<td><div class="odyssey-datepicker__month">May</div></td>
<td class="odyssey-datepicker__selected-accent"><div class="odyssey-datepicker__month">Jun</div></td>
<td class="odyssey-datepicker__selected-primary"><div class="odyssey-datepicker__month">Jul</div></td>
<td><div class="odyssey-datepicker__month">Aug</div></td>
</tr>
<tr class="odyssey-datepicker__selector__picker__months">
<td><div class="odyssey-datepicker__month">Sep</div></td>
<td><div class="odyssey-datepicker__month">Oct</div></td>
<td><div class="odyssey-datepicker__month">Nov</div></td>
<td><div class="odyssey-datepicker__month">Dec</div></td>
</tr>
</tbody>
</table>
</div>
<div class="odyssey-checkgroup odyssey-checkgroup--small odyssey-datepicker__compare">
<input type="checkbox" id="compare" />
<label class="odyssey-check__label" for="compare"></label>
<label for="compare" class="odyssey-checkgroup__label">Compare</label>
</div>
</div>
<div class="odyssey-datepicker__apply">
<button class="odyssey-button odyssey-button--small odyssey-button--links">Cancel</button>
<button class="odyssey-button odyssey-button--small odyssey-button--primary">Apply</button>
</div>
</div>
Source:
src/components/datepicker.less, line 584