Skip to content

Instantly share code, notes, and snippets.

@jdinunzio
Created April 26, 2016 17:38
Show Gist options
  • Save jdinunzio/a9de7a7ecc45898191b91de9a343ce94 to your computer and use it in GitHub Desktop.
Save jdinunzio/a9de7a7ecc45898191b91de9a343ce94 to your computer and use it in GitHub Desktop.
pickadate HTML Code
<div class="pattern-pickadate-wrapper">
<div class="pattern-pickadate-date-wrapper">
<input type="text" placeholder="Enter date..."
data-value=""
class="pattern-pickadate-date
picker__input picker__input--active"
readonly="" id="P1323868006" aria-haspopup="true"
aria-expanded="true" aria-readonly="false"
aria-owns="P1323868006_root P1323868006_submit">
<div class="picker picker--focused picker--opened" id="P1323868006_root" aria-hidden="false" aria-selected="true">
<div class="picker__holder">
<div class="picker__frame">
<div class="picker__wrap">
<div class="picker__box">
<div class="picker__header">
<div class="picker__nav--prev" data-nav="-1">
</div>
<div class="picker__nav--next" data-nav="1">
</div>
<select class="picker__select--month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3" selected="">April</option>
<option value="4">May</option>
...
<option value="11">December</option>
</select>
<select class="picker__select--year">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016" selected="">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</div>
<table class="picker__table">
<thead>
<tr><th class="picker__weekday">Sun</th><th class="picker__weekday">Mon</th><th class="picker__weekday">Tue</th><th class="picker__weekday">Wed</th><th class="picker__weekday">Thu</th><th class="picker__weekday">Fri</th><th class="picker__weekday">Sat</th>
</tr>
</thead>
<tbody>
<tr><td><div class="picker__day picker__day--outfocus" data-pick="1459053000000" role="button" aria-controls="P1323868006">27</div></td><td><div class="picker__day picker__day--outfocus" data-pick="1459139400000" role="button" aria-controls="P1323868006">28</div></td><td><div class="picker__day picker__day--outfocus" data-pick="1459225800000" role="button" aria-controls="P1323868006">29</div></td><td><div class="picker__day picker__day--outfocus" data-pick="1459312200000" role="button" aria-controls="P1323868006">30</div></td><td><div class="picker__day picker__day--outfocus" data-pick="1459398600000" role="button" aria-controls="P1323868006">31</div></td><td><div class="picker__day picker__day--infocus" data-pick="1459485000000" role="button" aria-controls="P1323868006">1</div></td><td><div class="picker__day picker__day--infocus" data-pick="1459571400000" role="button" aria-controls="P1323868006">2</div></td></tr><tr><td><div class="picker__day picker__day--infocus" data-pick="1459657800000" role="button" aria-controls="P1323868006">3</div></td><td><div class="picker__day picker__day--infocus" data-pick="1459744200000" role="button" aria-controls="P1323868006">4</div></td><td><div class="picker__day picker__day--infocus" data-pick="1459830600000" role="button" aria-controls="P1323868006">5</div></td><td><div class="picker__day picker__day--infocus" data-pick="1459917000000" role="button" aria-controls="P1323868006">6</div></td><td><div class="picker__day picker__day--infocus" data-pick="1460003400000" role="button" aria-controls="P1323868006">7</div></td><td><div class="picker__day picker__day--infocus" data-pick="1460089800000" role="button" aria-controls="P1323868006">8</div></td><td><div class="picker__day picker__day--infocus" data-pick="1460176200000" role="button" aria-controls="P1323868006">9</div></td></tr><tr><td><div class="picker__day picker__day--infocus" data-pick="1460262600000" role="button" aria-controls="P1323868006">10</div></td><td><div class="picker__day picker__day--infocus" data-pick="1460349000000" role="button" aria-controls="P1323868006">11</div></td><td><div class="picker__day picker__day--infocus" data-pick="1460435400000" role="button" aria-controls="P1323868006">12</div></td><td><div class="picker__day picker__day--infocus" data-pick="1460521800000" role="button" aria-controls="P1323868006">13</div></td><td><div class="picker__day picker__day--infocus" data-pick="1460608200000" role="button" aria-controls="P1323868006">14</div></td><td><div class="picker__day picker__day--infocus" data-pick="1460694600000" role="button" aria-controls="P1323868006">15</div></td><td><div class="picker__day picker__day--infocus" data-pick="1460781000000" role="button" aria-controls="P1323868006">16</div></td></tr><tr><td><div class="picker__day picker__day--infocus" data-pick="1460867400000" role="button" aria-controls="P1323868006">17</div></td><td><div class="picker__day picker__day--infocus" data-pick="1460953800000" role="button" aria-controls="P1323868006">18</div></td><td><div class="picker__day picker__day--infocus" data-pick="1461040200000" role="button" aria-controls="P1323868006">19</div></td><td><div class="picker__day picker__day--infocus" data-pick="1461126600000" role="button" aria-controls="P1323868006">20</div></td><td><div class="picker__day picker__day--infocus" data-pick="1461213000000" role="button" aria-controls="P1323868006">21</div></td><td><div class="picker__day picker__day--infocus" data-pick="1461299400000" role="button" aria-controls="P1323868006">22</div></td><td><div class="picker__day picker__day--infocus" data-pick="1461385800000" role="button" aria-controls="P1323868006">23</div></td></tr><tr><td><div class="picker__day picker__day--infocus" data-pick="1461472200000" role="button" aria-controls="P1323868006">24</div></td><td><div class="picker__day picker__day--infocus" data-pick="1461558600000" role="button" aria-controls="P1323868006">25</div></td><td><div class="picker__day picker__day--infocus picker__day--today picker__day--highlighted" data-pick="1461645000000" role="button" aria-controls="P1323868006" aria-activedescendant="true">26</div></td><td><div class="picker__day picker__day--infocus" data-pick="1461731400000" role="button" aria-controls="P1323868006">27</div></td><td><div class="picker__day picker__day--infocus" data-pick="1461817800000" role="button" aria-controls="P1323868006">28</div></td><td><div class="picker__day picker__day--infocus" data-pick="1461904200000" role="button" aria-controls="P1323868006">29</div></td><td><div class="picker__day picker__day--infocus" data-pick="1461990600000" role="button" aria-controls="P1323868006">30</div></td></tr><tr><td><div class="picker__day picker__day--outfocus" data-pick="1462077000000" role="button" aria-controls="P1323868006">1</div></td><td><div class="picker__day picker__day--outfocus" data-pick="1462163400000" role="button" aria-controls="P1323868006">2</div></td><td><div class="picker__day picker__day--outfocus" data-pick="1462249800000" role="button" aria-controls="P1323868006">3</div></td><td><div class="picker__day picker__day--outfocus" data-pick="1462336200000" role="button" aria-controls="P1323868006">4</div></td><td><div class="picker__day picker__day--outfocus" data-pick="1462422600000" role="button" aria-controls="P1323868006">5</div></td><td><div class="picker__day picker__day--outfocus" data-pick="1462509000000" role="button" aria-controls="P1323868006">6</div></td><td><div class="picker__day picker__day--outfocus" data-pick="1462595400000" role="button" aria-controls="P1323868006">7</div></td>
</tr>
</tbody>
</table>
<div class="picker__footer">
<button class="picker__button--today" type="button" data-pick="1461645000000">Today</button>
<button class="picker__button--clear" type="button" data-clear="1">Clear</button>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" name="_submit" id="P1323868006_submit">
</div>
<div class="pattern-pickadate-clear">
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment