sass:
#datePicker
display: none
button#datePickerToggle.c-btn Click me
#datePicker.c-datepicker
.c-datepicker__nav
a.c-datepicker__previous href=""
i.kzicon.kzicon-arrow-left
a.c-datepicker__next href=""
i.kzicon.kzicon-arrow-right
.c-datepicker__heading
span.c-datepicker__month-year-picker February
span.c-datepicker__month-year-picker 2015
table.c-datepicker__table
tr
th Mon
th Tue
th Wed
th Thu
th Fri
th Sat
th Sun
tr
td: span data-date="2015-01-26T00:00:00+09:00" 26
td: span data-date="2015-01-27T00:00:00+09:00" 27
td: span data-date="2015-01-28T00:00:00+09:00" 28
td: a.c-datepicker__date--muted href="" data-date="2015-01-29T00:00:00+09:00" 29
td: a.c-datepicker__date--muted href="" data-date="2015-01-30T00:00:00+09:00" 30
td: a.c-datepicker__date--muted href="" data-date="2015-01-31T00:00:00+09:00" 31
td: a href="" data-date="2015-02-01T00:00:00+09:00" 1
tr
td: a href="" data-date="2015-02-02T00:00:00+09:00" 2
td: a href="" data-date="2015-02-03T00:00:00+09:00" 3
td: a href="" data-date="2015-02-04T00:00:00+09:00" 4
td: a.c-datepicker__date--selected href="" data-date="2015-02-05T00:00:00+09:00" 5
td: a href="" data-date="2015-02-06T00:00:00+09:00" 6
td: a href="" data-date="2015-02-07T00:00:00+09:00" 7
td: a href="" data-date="2015-02-08T00:00:00+09:00" 8
tr
td: a href="" data-date="2015-02-09T00:00:00+09:00" 9
td: a href="" data-date="2015-02-10T00:00:00+09:00" 10
td: a href="" data-date="2015-02-11T00:00:00+09:00" 11
td: a href="" data-date="2015-02-12T00:00:00+09:00" 12
td: a href="" data-date="2015-02-13T00:00:00+09:00" 13
td: a href="" data-date="2015-02-14T00:00:00+09:00" 14
td: a href="" data-date="2015-02-15T00:00:00+09:00" 15
tr
td: a href="" data-date="2015-02-16T00:00:00+09:00" 16
td: a href="" data-date="2015-02-17T00:00:00+09:00" 17
td: a href="" data-date="2015-02-18T00:00:00+09:00" 18
td: a href="" data-date="2015-02-19T00:00:00+09:00" 19
td: a href="" data-date="2015-02-20T00:00:00+09:00" 20
td: a href="" data-date="2015-02-21T00:00:00+09:00" 21
td: a href="" data-date="2015-02-22T00:00:00+09:00" 22
tr
td: a href="" data-date="2015-02-23T00:00:00+09:00" 23
td: a href="" data-date="2015-02-24T00:00:00+09:00" 24
td: a href="" data-date="2015-02-25T00:00:00+09:00" 25
td: a href="" data-date="2015-02-26T00:00:00+09:00" 26
td: a href="" data-date="2015-02-27T00:00:00+09:00" 27
td: a href="" data-date="2015-02-28T00:00:00+09:00" 28
td: a.c-datepicker__date--muted href="" data-date="2015-03-01T00:00:00+09:00" 1
javascript:
document.addEventListener("click", function(e) {
if (e.srcElement.id == 'datePickerToggle') {
e.preventDefault();
document.getElementById('datePicker').style.display = 'block';
} else {
document.getElementById('datePicker').style.display = 'none';
}
});
<style type="text/css">
#datePicker {
display: none;
}
</style>
<button id="datePickerToggle" class="c-btn">Click me</button>
<div id="datePicker" class="c-datepicker">
<div class="c-datepicker__nav">
<a class="c-datepicker__previous" href=""><i class="kzicon kzicon-arrow-left"></i></a><a class="c-datepicker__next" href=""><i class="kzicon kzicon-arrow-right"></i></a>
<div class="c-datepicker__heading">
<span class="c-datepicker__month-year-picker">February</span><span class="c-datepicker__month-year-picker">2015</span>
</div>
</div>
<table class="c-datepicker__table">
<tr>
<th>
Mon
</th>
<th>
Tue
</th>
<th>
Wed
</th>
<th>
Thu
</th>
<th>
Fri
</th>
<th>
Sat
</th>
<th>
Sun
</th>
</tr>
<tr>
<td>
<span data-date="2015-01-26T00:00:00+09:00">26</span>
</td>
<td>
<span data-date="2015-01-27T00:00:00+09:00">27</span>
</td>
<td>
<span data-date="2015-01-28T00:00:00+09:00">28</span>
</td>
<td>
<a class="c-datepicker__date--muted" href="" data-date="2015-01-29T00:00:00+09:00">29</a>
</td>
<td>
<a class="c-datepicker__date--muted" href="" data-date="2015-01-30T00:00:00+09:00">30</a>
</td>
<td>
<a class="c-datepicker__date--muted" href="" data-date="2015-01-31T00:00:00+09:00">31</a>
</td>
<td>
<a href="" data-date="2015-02-01T00:00:00+09:00">1</a>
</td>
</tr>
<tr>
<td>
<a href="" data-date="2015-02-02T00:00:00+09:00">2</a>
</td>
<td>
<a href="" data-date="2015-02-03T00:00:00+09:00">3</a>
</td>
<td>
<a href="" data-date="2015-02-04T00:00:00+09:00">4</a>
</td>
<td>
<a class="c-datepicker__date--selected" href="" data-date="2015-02-05T00:00:00+09:00">5</a>
</td>
<td>
<a href="" data-date="2015-02-06T00:00:00+09:00">6</a>
</td>
<td>
<a href="" data-date="2015-02-07T00:00:00+09:00">7</a>
</td>
<td>
<a href="" data-date="2015-02-08T00:00:00+09:00">8</a>
</td>
</tr>
<tr>
<td>
<a href="" data-date="2015-02-09T00:00:00+09:00">9</a>
</td>
<td>
<a href="" data-date="2015-02-10T00:00:00+09:00">10</a>
</td>
<td>
<a href="" data-date="2015-02-11T00:00:00+09:00">11</a>
</td>
<td>
<a href="" data-date="2015-02-12T00:00:00+09:00">12</a>
</td>
<td>
<a href="" data-date="2015-02-13T00:00:00+09:00">13</a>
</td>
<td>
<a href="" data-date="2015-02-14T00:00:00+09:00">14</a>
</td>
<td>
<a href="" data-date="2015-02-15T00:00:00+09:00">15</a>
</td>
</tr>
<tr>
<td>
<a href="" data-date="2015-02-16T00:00:00+09:00">16</a>
</td>
<td>
<a href="" data-date="2015-02-17T00:00:00+09:00">17</a>
</td>
<td>
<a href="" data-date="2015-02-18T00:00:00+09:00">18</a>
</td>
<td>
<a href="" data-date="2015-02-19T00:00:00+09:00">19</a>
</td>
<td>
<a href="" data-date="2015-02-20T00:00:00+09:00">20</a>
</td>
<td>
<a href="" data-date="2015-02-21T00:00:00+09:00">21</a>
</td>
<td>
<a href="" data-date="2015-02-22T00:00:00+09:00">22</a>
</td>
</tr>
<tr>
<td>
<a href="" data-date="2015-02-23T00:00:00+09:00">23</a>
</td>
<td>
<a href="" data-date="2015-02-24T00:00:00+09:00">24</a>
</td>
<td>
<a href="" data-date="2015-02-25T00:00:00+09:00">25</a>
</td>
<td>
<a href="" data-date="2015-02-26T00:00:00+09:00">26</a>
</td>
<td>
<a href="" data-date="2015-02-27T00:00:00+09:00">27</a>
</td>
<td>
<a href="" data-date="2015-02-28T00:00:00+09:00">28</a>
</td>
<td>
<a class="c-datepicker__date--muted" href="" data-date="2015-03-01T00:00:00+09:00">1</a>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
document.addEventListener("click", function(e) {
if (e.srcElement.id == 'datePickerToggle') {
e.preventDefault();
document.getElementById('datePicker').style.display = 'block';
} else {
document.getElementById('datePicker').style.display = 'none';
}
});
</script>