Odyssey styleguide

Monthpicker

Toggle example guides Toggle HTML markup

The monthpicker component accepts the following attributes: value = {selected, compared}; min = 'YYYYMM' or 'YYYY-MM'; max = 'YYYYMM' or 'YYYY-MM'; optionalCompare = boolean; forceCompare = boolean;

<insert-markup>components.datepicker.monthpicker-</insert-markup>
2021
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
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