| January | ||||||
|---|---|---|---|---|---|---|
| Mo | Tu | We | Th | Fr | Sa | Su |
1 |
||||||
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
|||||
| February | ||||||
|---|---|---|---|---|---|---|
| Mo | Tu | We | Th | Fr | Sa | Su |
1 |
2 |
3 |
4 |
5 |
||
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
|||||
Markup
<div class="odyssey-datepicker">
<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">
<svg class="odyssey-datepicker__selector__title__icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1258 6.7925L12.8333 5.5L7.33325 11L12.8333 16.5L14.1258 15.2075L9.92742 11L14.1258 6.7925Z"/>
</svg>
</th>
<th class="odyssey-datepicker__selector__title--name" colspan="5">January</th>
<th class="odyssey-datepicker__selector__title--next">
<svg class="odyssey-datepicker__selector__title__icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.16677 5.5L7.87427 6.7925L12.0726 11L7.87427 15.2075L9.16677 16.5L14.6668 11L9.16677 5.5Z"/>
</svg>
</th>
</tr>
<tr class="odyssey-datepicker__selector__picker__days--names">
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
<th>Su</th>
</tr>
</thead>
<tbody class="odyssey-datepicker__selector__picker">
<tr class="odyssey-datepicker__selector__picker__days--numbers">
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="selection-first"><div class="odyssey-datepicker__date">1</div></td>
</tr>
<tr class="odyssey-datepicker__selector__picker__days--numbers">
<td class="selection"><div class="odyssey-datepicker__date">2</div></td>
<td class="selection"><div class="odyssey-datepicker__date">3</div></td>
<td class="selection"><div class="odyssey-datepicker__date">4</div></td>
<td class="selection"><div class="odyssey-datepicker__date">5</div></td>
<td class="selection"><div class="odyssey-datepicker__date">6</div></td>
<td class="selection"><div class="odyssey-datepicker__date">7</div></td>
<td class="selection-first compare overlap"><div class="odyssey-datepicker__date">8</div></td>
</tr>
<tr class="odyssey-datepicker__selector__picker__days--numbers">
<td class="selection compare overlap"><div class="odyssey-datepicker__date">9</div></td>
<td class="selection compare overlap"><div class="odyssey-datepicker__date">10</div></td>
<td class="selection compare overlap"><div class="odyssey-datepicker__date">11</div></td>
<td class="selection-last compare overlap"><div class="odyssey-datepicker__date">12</div></td>
<td class="selection compare"><div class="odyssey-datepicker__date">13</div></td>
<td class="selection compare"><div class="odyssey-datepicker__date">14</div></td>
<td class="selection compare"><div class="odyssey-datepicker__date">15</div></td>
</tr>
<tr class="odyssey-datepicker__selector__picker__days--numbers">
<td class="selection compare"><div class="odyssey-datepicker__date">16</div></td>
<td class="selection compare"><div class="odyssey-datepicker__date">17</div></td>
<td class="selection-last compare"><div class="odyssey-datepicker__date">18</div></td>
<td><div class="odyssey-datepicker__date">19</div></td>
<td><div class="odyssey-datepicker__date">20</div></td>
<td><div class="odyssey-datepicker__date">21</div></td>
<td><div class="odyssey-datepicker__date">22</div></td>
</tr>
<tr class="odyssey-datepicker__selector__picker__days--numbers">
<td><div class="odyssey-datepicker__date">23</div></td>
<td><div class="odyssey-datepicker__date">24</div></td>
<td><div class="odyssey-datepicker__date">25</div></td>
<td><div class="odyssey-datepicker__date">26</div></td>
<td><div class="odyssey-datepicker__date">27</div></td>
<td><div class="odyssey-datepicker__date">28</div></td>
<td><div class="odyssey-datepicker__date">29</div></td>
</tr>
<tr class="odyssey-datepicker__selector__picker__days--numbers">
<td><div class="odyssey-datepicker__date">30</div></td>
<td><div class="odyssey-datepicker__date">31</div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
</tr>
</tbody>
</table>
</div>
<div class="odyssey-datepicker__column">
<table class="odyssey-datepicker__selector">
<thead class="odyssey-datepicker__selector__title">
<tr>
<th class="odyssey-datepicker__selector__title--prev">
<svg class="odyssey-datepicker__selector__title__icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1258 6.7925L12.8333 5.5L7.33325 11L12.8333 16.5L14.1258 15.2075L9.92742 11L14.1258 6.7925Z"/>
</svg>
</th>
<th class="odyssey-datepicker__selector__title--name" colspan="5">February</th>
<th class="odyssey-datepicker__selector__title--next">
<svg class="odyssey-datepicker__selector__title__icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.16677 5.5L7.87427 6.7925L12.0726 11L7.87427 15.2075L9.16677 16.5L14.6668 11L9.16677 5.5Z"/>
</svg>
</th>
</tr>
<tr class="odyssey-datepicker__selector__picker__days--names">
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
<th>Su</th>
</tr>
</thead>
<tbody class="odyssey-datepicker__selector__picker">
<tr class="odyssey-datepicker__selector__picker__days--numbers">
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td><div class="odyssey-datepicker__date">1</div></td>
<td><div class="odyssey-datepicker__date">2</div></td>
<td><div class="odyssey-datepicker__date">3</div></td>
<td><div class="odyssey-datepicker__date">4</div></td>
<td><div class="odyssey-datepicker__date">5</div></td>
</tr>
<tr class="odyssey-datepicker__selector__picker__days--numbers">
<td><div class="odyssey-datepicker__date">6</div></td>
<td><div class="odyssey-datepicker__date">7</div></td>
<td><div class="odyssey-datepicker__date">8</div></td>
<td><div class="odyssey-datepicker__date">9</div></td>
<td><div class="odyssey-datepicker__date">10</div></td>
<td><div class="odyssey-datepicker__date">11</div></td>
<td><div class="odyssey-datepicker__date">12</div></td>
</tr>
<tr class="odyssey-datepicker__selector__picker__days--numbers">
<td><div class="odyssey-datepicker__date">13</div></td>
<td><div class="odyssey-datepicker__date">14</div></td>
<td><div class="odyssey-datepicker__date">15</div></td>
<td><div class="odyssey-datepicker__date">16</div></td>
<td><div class="odyssey-datepicker__date">17</div></td>
<td><div class="odyssey-datepicker__date">18</div></td>
<td><div class="odyssey-datepicker__date">19</div></td>
</tr>
<tr class="odyssey-datepicker__selector__picker__days--numbers">
<td><div class="odyssey-datepicker__date">20</div></td>
<td><div class="odyssey-datepicker__date">21</div></td>
<td><div class="odyssey-datepicker__date">22</div></td>
<td><div class="odyssey-datepicker__date">23</div></td>
<td><div class="odyssey-datepicker__date">24</div></td>
<td><div class="odyssey-datepicker__date">25</div></td>
<td><div class="odyssey-datepicker__date">26</div></td>
</tr>
<tr class="odyssey-datepicker__selector__picker__days--numbers">
<td><div class="odyssey-datepicker__date">27</div></td>
<td><div class="odyssey-datepicker__date">28</div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
</tr>
<tr class="odyssey-datepicker__selector__picker__days--numbers">
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
</tr>
</tbody>
</table>
</div>
<div class="odyssey-datepicker__column">
<div class="odyssey-datepicker__input">
<div class="odyssey-datepicker__inputgroup">
<input class="date_padding odyssey-inputgroup__input" type="date">
<i class="arrow"></i>
<input class="date_padding odyssey-inputgroup__input" type="date">
</div>
<select class="odyssey-inputgroup__select">
<option>Last month</option>
<option>Last week</option>
<option>Last year</option>
</select>
<div class="odyssey-checkgroup odyssey-checkgroup--small">
<input checked type="checkbox" id="datepicker-compare" />
<label class="odyssey-check__label" for="datepicker-compare"></label>
<label for="remember" class="odyssey-checkgroup__label">Compare</label>
</div>
</div>
<div class="odyssey-datepicker__input compare">
<div class="odyssey-datepicker__inputgroup">
<input class="date_padding odyssey-inputgroup__input" type="date">
<i class="arrow"></i>
<input class="date_padding odyssey-inputgroup__input" type="date">
</div>
<select class="odyssey-inputgroup__select">
<option>Last month</option>
<option>Last week</option>
<option>Last year</option>
</select>
</div>
</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 12