Date Picker
This component has a dependency. Make sure you follow the install instructions and load the moment JS dependencies.
Installation#
For detailed instructions, view our install section in this documentation. Make sure all the dependencies and polyfills are loaded or the components will not be cross-browser compatible.
CDN#
<script src="https://unpkg.com/@pearson-ux/datepicker"></script>NPM#
npm i @pearson-ux/datepicker --saveDemo#
Default Datepicker#
<pearson-datepicker></pearson-datepicker>Set Value Datepicker#
Important Note: When you set your value, make sure you include a leading zero on single digits. For example, January would become 01.
<pearson-datepicker value="10/17/1978"></pearson-datepicker>Structure#
To add a datepicker, just add the markup in your app where you want it displayed.
API#
All attributes in this API are optional.
| Attribute | Type | Default | Description |
|---|---|---|---|
value | String | unset | The date you want the calendar to display. If no value is set the calendar will default to today's date. |
Events#
There are no events that get emitted.
HTML Markup#
Do you want to use your own JS to make your own datepicker function? No problem, use the markup below along with CSS to build a datepicker with your own JS.
Important note: Refer to the UXF guidelines for the suggested functionality of the datepicker.
<div class="gr-datepicker-container"> <label class="gr-label" for="datepicker">Select date (mm/dd/yyyy)</label> <div class="datepicker"> <input type="text" class="gr-input" id="datepicker" aria-expanded="false" data-selected="11/06/2018"> <button class="gr-btn icon-btn-18" aria-label="open calendar"> <svg focusable="false" class="icon-18" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#date-18"></use> </svg> </button> </div> <section class="gr-calendar-container"> <div> <fieldset> <div class="actions"> <legend id="month">November 2019</legend> <div class="buttons"> <button class="gr-btn icon-btn-24 no-border previous" aria-label="go toprevious month"> <svg focusable="false" class="icon-24" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#previous-24"></use> </svg> </button> <button class="gr-btn icon-btn-24 no-border" aria-label="go to next month"> <svg focusable="false" class="icon-24" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#next-24"></use> </svg> </button> </div> </div> <div class="row weekdays"> <div><abbr title="Sunday">S</abbr></div> <div><abbr title="Monday">M</abbr></div> <div><abbr title="Tuesday">T</abbr></div> <div><abbr title="Wednesday">W</abbr></div> <div><abbr title="Thursday">T</abbr></div> <div><abbr title="Friday">F</abbr></div> <div><abbr title="Saturday">S</abbr></div> </div> <div class="dates"> <div class="row"> <div><button class="start" aria-label="November 1, 2019" aria-pressed="false">1</button></div> <div><button class="start" aria-label="November 2, 2019" aria-pressed="false">2</button></div> <div><button class="start" aria-label="November 3, 2019" aria-pressed="false">3</button></div> <div><button class="start" aria-label="November 4, 2019" aria-pressed="false">4</button></div> <div><button class="start" aria-label="November 5, 2019" aria-pressed="false">5</button></div> <div><button class="start" aria-label="November 6, 2019" aria-pressed="false">6</button></div> <div><button class="start" aria-label="November 7, 2019" aria-pressed="false">7</button></div> </div> <div class="row"> <div><button class="start" aria-label="November 8, 2019" aria-pressed="false">8</button></div> <div><button class="start" aria-label="November 9, 2019" aria-pressed="false">9</button></div> <div><button class="start" aria-label="November 10, 2019" aria-pressed="false">10</button></div> <div><button class="start" aria-label="November 11, 2019" aria-pressed="false">11</button></div> <div><button class="start" aria-label="November 12, 2019" aria-pressed="false">12</button></div> <div><button class="start" aria-label="November 13, 2019" aria-pressed="false">13</button></div> <div><button class="start" aria-label="November 14, 2019" aria-pressed="false">14</button></div> </div> <div class="row"> <div><button class="start" aria-label="November 15, 2019" aria-pressed="false">15</button></div> <div><button class="start" aria-label="November 16, 2019" aria-pressed="false">16</button></div> <div><button class="start" aria-label="November 17, 2019" aria-pressed="false">17</button></div> <div><button class="start" aria-label="November 18, 2019" aria-pressed="false">18</button></div> <div><button class="start" aria-label="November 19, 2019" aria-pressed="false">19</button></div> <div><button class="start" aria-label="November 20, 2019" aria-pressed="false">20</button></div> <div><button class="start" aria-label="November 21, 2019" aria-pressed="false">21</button></div> </div> <div class="row"> <div><button class="start" aria-label="November 22, 2019" aria-pressed="false">22</button></div> <div><button class="start" aria-label="November 23, 2019" aria-pressed="false">23</button></div> <div><button class="start" aria-label="November 24, 2019" aria-pressed="false">24</button></div> <div><button class="start" aria-label="November 25, 2019" aria-pressed="false">25</button></div> <div><button class="start" aria-label="November 26, 2019" aria-pressed="false">26</button></div> <div><button class="start" aria-label="November 27, 2019" aria-pressed="false">27</button></div> <div><button class="start" aria-label="November 28, 2019" aria-pressed="false">28</button></div> </div> <div class="row"> <div><button class="start" aria-label="November 29, 2019" aria-pressed="false">29</button></div> <div><button class="start" aria-label="November 30, 2019" aria-pressed="false">30</button></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </fieldset> </div> </section></div>