Base
June
|
Sun
|
Mon
|
Tue
|
Wed
|
Thu
|
Fri
|
Sat
|
|
31
|
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
|
1
|
2
|
3
|
4
|
|
Today
|
<div aria-hidden="false" aria-label="Date picker: June" class="joy-datepicker joy-dropdown joy-dropdown_left" role="dialog">
<div class="joy-datepicker__filter joy-flex joy-flex--row">
<div class="joy-datepicker__filter_month joy-flex joy-flex--row joy-flex__item--grow-1">
<div class="joy-align-middle joy-flex__item--shrink-1 joy-p-horizontal--small">
<button class="joy-button joy-button--link" title="Previous Month">
<i class="fa fa-caret-left"></i>
<span class="joy-assistive-text">Previous Month</span>
</button>
</div>
<h2 aria-atomic="true" aria-live="assertive" class="joy-align-middle joy-flex__item--grow-1 joy-text-align--center" id="month">June</h2>
<div class="joy-align-middle joy-flex__item--shrink-1 joy-p-horizontal--small">
<button class="joy-button joy-button--link" title="Next Month">
<i class="fa fa-caret-right"></i>
<span class="joy-assistive-text">Previous Month</span>
</button>
</div>
</div>
<div class="joy-shrink-none">
<label class="joy-assistive-text" for="select-01">Pick a Year</label>
<div class="joy-select__container">
<select class="joy-select joy-select--small" id="select-01">
<option>2014</option>
<option>2015</option>
<option>2016</option>
</select>
</div>
</div>
</div>
<table aria-labelledby="month" aria-multiselectable="true" class="joy-datepicker__month" role="grid">
<thead>
<tr id="weekdays">
<th id="Sunday" scope="col">
<abbr title="Sunday">Sun</abbr>
</th>
<th id="Monday" scope="col">
<abbr title="Monday">Mon</abbr>
</th>
<th id="Tuesday" scope="col">
<abbr title="Tuesday">Tue</abbr>
</th>
<th id="Wednesday" scope="col">
<abbr title="Wednesday">Wed</abbr>
</th>
<th id="Thursday" scope="col">
<abbr title="Thursday">Thu</abbr>
</th>
<th id="Friday" scope="col">
<abbr title="Friday">Fri</abbr>
</th>
<th id="Saturday" scope="col">
<abbr title="Saturday">Sat</abbr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">31</span>
</td>
<td aria-selected="false" role="gridcell" tabindex="0">
<span class="joy-day">1</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">2</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">3</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">4</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">5</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">6</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="joy-day">7</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">8</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">9</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">10</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">11</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">12</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">13</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="joy-day">14</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">15</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">16</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">17</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">18</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">19</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">20</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="joy-day">21</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">22</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">23</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">24</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">25</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">26</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">27</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="joy-day">28</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">29</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">30</span>
</td>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">1</span>
</td>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">2</span>
</td>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">3</span>
</td>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">4</span>
</td>
</tr>
<tr>
<td colspan="7" role="gridcell">
<span class="joy-show_inline-block joy-text-link joy-p-bottom_x-small">Today</span>
</td>
</tr>
</tbody>
</table>
</div>
Date Selected
June
|
Sun
|
Mon
|
Tue
|
Wed
|
Thu
|
Fri
|
Sat
|
|
31
|
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
|
1
|
2
|
3
|
4
|
|
Today
|
<div aria-hidden="false" aria-label="Date picker: June" class="joy-datepicker joy-dropdown joy-dropdown_left" role="dialog">
<div class="joy-datepicker__filter joy-flex joy-flex--row">
<div class="joy-datepicker__filter_month joy-flex joy-flex--row joy-flex__item--grow-1">
<div class="joy-align-middle joy-flex__item--shrink-1 joy-p-horizontal--small">
<button class="joy-button joy-button--link" title="Previous Month">
<i class="fa fa-caret-left"></i>
<span class="joy-assistive-text">Previous Month</span>
</button>
</div>
<h2 aria-atomic="true" aria-live="assertive" class="joy-align-middle joy-flex__item--grow-1 joy-text-align--center" id="month">June</h2>
<div class="joy-align-middle joy-flex__item--shrink-1 joy-p-horizontal--small">
<button class="joy-button joy-button--link" title="Next Month">
<i class="fa fa-caret-right"></i>
<span class="joy-assistive-text">Previous Month</span>
</button>
</div>
</div>
<div class="joy-shrink-none">
<label class="joy-assistive-text" for="select-01">Pick a Year</label>
<div class="joy-select__container">
<select class="joy-select joy-select--small" id="select-01">
<option>2014</option>
<option>2015</option>
<option>2016</option>
</select>
</div>
</div>
</div>
<table aria-labelledby="month" aria-multiselectable="true" class="joy-datepicker__month" role="grid">
<thead>
<tr id="weekdays">
<th id="Sunday" scope="col">
<abbr title="Sunday">Sun</abbr>
</th>
<th id="Monday" scope="col">
<abbr title="Monday">Mon</abbr>
</th>
<th id="Tuesday" scope="col">
<abbr title="Tuesday">Tue</abbr>
</th>
<th id="Wednesday" scope="col">
<abbr title="Wednesday">Wed</abbr>
</th>
<th id="Thursday" scope="col">
<abbr title="Thursday">Thu</abbr>
</th>
<th id="Friday" scope="col">
<abbr title="Friday">Fri</abbr>
</th>
<th id="Saturday" scope="col">
<abbr title="Saturday">Sat</abbr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">31</span>
</td>
<td aria-selected="false" role="gridcell" tabindex="0">
<span class="joy-day">1</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">2</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">3</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">4</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">5</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">6</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="joy-day">7</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">8</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">9</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">10</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">11</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">12</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">13</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="joy-day">14</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">15</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">16</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">17</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">18</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">19</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">20</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="joy-day">21</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">22</span>
</td>
<td class="joy-is-selected" aria-selected="false" role="gridcell">
<span class="joy-day">23</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">24</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">25</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">26</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">27</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="joy-day">28</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">29</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">30</span>
</td>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">1</span>
</td>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">2</span>
</td>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">3</span>
</td>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">4</span>
</td>
</tr>
<tr>
<td colspan="7" role="gridcell">
<span class="joy-show_inline-block joy-text-link joy-p-bottom_x-small">Today</span>
</td>
</tr>
</tbody>
</table>
</div>
Multi-Date Range Selected
June
|
Sun
|
Mon
|
Tue
|
Wed
|
Thu
|
Fri
|
Sat
|
|
31
|
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
|
1
|
2
|
3
|
4
|
|
Today
|
<div aria-hidden="false" aria-label="Date picker: June" class="joy-datepicker joy-dropdown joy-dropdown_left" role="dialog">
<div class="joy-datepicker__filter joy-flex joy-flex--row">
<div class="joy-datepicker__filter_month joy-flex joy-flex--row joy-flex__item--grow-1">
<div class="joy-align-middle joy-flex__item--shrink-1 joy-p-horizontal--small">
<button class="joy-button joy-button--link" title="Previous Month">
<i class="fa fa-caret-left"></i>
<span class="joy-assistive-text">Previous Month</span>
</button>
</div>
<h2 aria-atomic="true" aria-live="assertive" class="joy-align-middle joy-flex__item--grow-1 joy-text-align--center" id="month">June</h2>
<div class="joy-align-middle joy-flex__item--shrink-1 joy-p-horizontal--small">
<button class="joy-button joy-button--link" title="Next Month">
<i class="fa fa-caret-right"></i>
<span class="joy-assistive-text">Previous Month</span>
</button>
</div>
</div>
<div class="joy-shrink-none">
<label class="joy-assistive-text" for="select-01">Pick a Year</label>
<div class="joy-select__container">
<select class="joy-select joy-select--small" id="select-01">
<option>2014</option>
<option>2015</option>
<option>2016</option>
</select>
</div>
</div>
</div>
<table aria-labelledby="month" aria-multiselectable="true" class="joy-datepicker__month" role="grid">
<thead>
<tr id="weekdays">
<th id="Sunday" scope="col">
<abbr title="Sunday">Sun</abbr>
</th>
<th id="Monday" scope="col">
<abbr title="Monday">Mon</abbr>
</th>
<th id="Tuesday" scope="col">
<abbr title="Tuesday">Tue</abbr>
</th>
<th id="Wednesday" scope="col">
<abbr title="Wednesday">Wed</abbr>
</th>
<th id="Thursday" scope="col">
<abbr title="Thursday">Thu</abbr>
</th>
<th id="Friday" scope="col">
<abbr title="Friday">Fri</abbr>
</th>
<th id="Saturday" scope="col">
<abbr title="Saturday">Sat</abbr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">31</span>
</td>
<td aria-selected="false" role="gridcell" tabindex="0">
<span class="joy-day">1</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">2</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">3</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">4</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">5</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">6</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="joy-day">7</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">8</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">9</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">10</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">11</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">12</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">13</span>
</td>
</tr>
<tr>
<td aria-selected="false" role="gridcell">
<span class="joy-day">14</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">15</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">16</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">17</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">18</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">19</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">20</span>
</td>
</tr>
<tr class="joy-has-multi-row-selection">
<td aria-selected="false" role="gridcell">
<span class="joy-day">21</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">22</span>
</td>
<td aria-selected="true" role="gridcell" class="joy-is-selected joy-is-selected-multi">
<span class="joy-day">23</span>
</td>
<td aria-selected="true" role="gridcell" class="joy-is-selected joy-is-selected-multi">
<span class="joy-day">24</span>
</td>
<td aria-selected="true" role="gridcell" class="joy-is-selected joy-is-selected-multi">
<span class="joy-day">25</span>
</td>
<td aria-selected="true" role="gridcell" class="joy-is-selected joy-is-selected-multi">
<span class="joy-day">26</span>
</td>
<td aria-selected="true" role="gridcell" class="joy-is-selected joy-is-selected-multi">
<span class="joy-day">27</span>
</td>
</tr>
<tr class="joy-has-multi-row-selection">
<td aria-selected="true" role="gridcell" class="joy-is-selected joy-is-selected-multi">
<span class="joy-day">28</span>
</td>
<td aria-selected="true" role="gridcell" class="joy-is-selected joy-is-selected-multi">
<span class="joy-day">29</span>
</td>
<td aria-selected="false" role="gridcell">
<span class="joy-day">30</span>
</td>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">1</span>
</td>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">2</span>
</td>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">3</span>
</td>
<td aria-disabled="true" aria-selected="false" class="joy-disabled-text" role="gridcell">
<span class="joy-day">4</span>
</td>
</tr>
<tr>
<td colspan="7" role="gridcell">
<span class="joy-show_inline-block joy-text-link joy-p-bottom_x-small">Today</span>
</td>
</tr>
</tbody>
</table>
</div>