Core Datepicker

@nrk/core-datepicker enhances all child input, select table and button elements with keyboard accessible functionality for selecting both dates and times. The interface and granularity of date refinement can easily be altered through markup.

Examples (Plain JS)

Toggled calendar

Toggled datepicker (using core-toggle) with calendar to update value of input

Note: We add event listeners to both, datepicker.change as well as datepicker.click.day, events to only close the core-toggle on the latter of the two.

1<!-- demo -->
2<input type="text" placeholder="No date selected" id="toggled-datepicker-output">
3<button type="button">Show calendar</button>
4<core-toggle id="calendar-toggle" data-popup hidden class="my-popup">
5  <core-datepicker
6    id="toggled-datepicker"
7    days="Mon,Tue,Wed,Thu,Fri,Sat,Sun"
8    months="January,Febuary,March,April,May,June,July,August,September,October,November,December"
9  >
10    <table></table>
11  </core-datepicker>
12</core-toggle>
13<script>
14  // Update output
15  document.addEventListener('datepicker.change', function (event) {
16    if (event.target.id !== 'toggled-datepicker') return
17    document.getElementById('toggled-datepicker-output').value = event.target.date ? event.target.date.toLocaleString() : null
18  })
19  // Close toggle on click
20  document.addEventListener('datepicker.click.day', function (event) {
21    if (event.target.id !== 'toggled-datepicker') return
22    document.getElementById('calendar-toggle').setAttribute('hidden', true)
23    document.getElementById('toggled-datepicker-output').value = event.target.date ? event.target.date.toLocaleString() : null
24  })
25</script>

Adjacent calendar

Datepicker with inline calendar

Note: Table and buttons are outside of core-datepicker element, using data-for.

1<!-- demo -->
2<core-datepicker
3  id="adjacent-datepicker"
4></core-datepicker>
5<button type="button" data-for="adjacent-datepicker" value="-1 month">Previous month</button>
6<input id="adjacent-datepicker-output" placeholder="No date selected" readonly/>
7<button type="button" data-for="adjacent-datepicker" value="now">Today</button>
8<button type="button" data-for="adjacent-datepicker" value="+1 month">Next month</button>
9
10<table data-for="adjacent-datepicker"></table>
11<script>
12  // Update output
13  document.addEventListener('datepicker.change', function (event) {
14    if (event.target.id !== 'adjacent-datepicker') return
15    document.getElementById('adjacent-datepicker-output').value = event.target.date ? event.target.date.toLocaleString() : null
16  })
17</script>

All the things

Extravagantly featured implementation to showcase most of what you can do out of the box

1<!-- demo -->
2<button type="button" class="my-toggle">Choose date</button>
3<core-toggle data-popup hidden class="my-popup">
4  <core-datepicker
5    id="my-datepicker"
6    days="Mon,Tue,Wed,Thu,Fri,Sat,Sun"
7    months="January,Febuary,March,April,May,June,July,August,September,October,November,December"
8  >
9    <input type="timestamp">
10    <fieldset>
11      <legend>Navigation</legend>
12      <button type="button" value="now">Today</button>
13      <button type="button" value="now - 1 day">Yesterday</button>
14      <button type="button" value="now + 1 day">Tomorrow</button>
15      <button type="button" value="- 1 week">Previous week</button>
16      <button type="button" value="+ 1 week">Next week</button>
17      <button type="button" value="now tuesday - 1 week">Tuesday last week</button>
18      <button type="button" value="now + 10 years">Add ten years</button>
19      <button type="button" value="yy00-01-01 - 100 years">Last century</button>
20    </fieldset>
21    <label>
22      Year
23      <select>
24        <option value="2016-m-d">2016</option>
25        <option value="2017-m-d">2017</option>
26        <option value="2018-m-d">2018</option>
27        <option value="2019-m-d">2019</option>
28      </select>
29    </label>
30    <label>Month<select></select></label>
31    <fieldset>
32      <legend>Month</legend>
33      <label><input type="radio" name="my-months" value="y-1-d">January</label>
34      <label><input type="radio" name="my-months" value="y-2-d">February</label>
35      <label><input type="radio" name="my-months" value="y-3-d">March</label>
36      <label><input type="radio" name="my-months" value="y-4-d">April</label>
37      <label><input type="radio" name="my-months" value="y-5-d">May</label>
38      <label><input type="radio" name="my-months" value="y-6-d">June</label>
39      <label><input type="radio" name="my-months" value="y-7-d">July</label>
40      <label><input type="radio" name="my-months" value="y-8-d">August</label>
41      <label><input type="radio" name="my-months" value="y-9-d">September</label>
42      <label><input type="radio" name="my-months" value="y-10-d">October</label>
43      <label><input type="radio" name="my-months" value="y-11-d">November</label>
44      <label><input type="radio" name="my-months" value="y-12-d">December</label>
45    </fieldset>
46    <label><span>Year</span><input type="year"></label>
47    <label><span>Month</span><input type="month"></label>
48    <fieldset>
49      <legend>Clock</legend>
50      <label>Hour<input type="hour"></label>
51      <label>Minute<input type="minute"></label>
52      <label>
53        <span>Hour</span>
54        <select>
55          <option>--</option>
56          <option value="11:m">11</option>
57          <option value="12:m">12</option>
58          <option value="13:m">13</option>
59        </select>
60      </label>
61    </fieldset>
62    <table></table>
63  </core-datepicker>
64</core-toggle>
65<button type="button" data-for="my-datepicker" value="now">Now</button>
66<button type="button" data-for="my-datepicker" value="now + 1 week">Next week</button>
67<button type="button" data-for="my-datepicker" value="+ 1 week">Add one week</button>
68<select data-for="my-datepicker">
69  <option>Hour</option>
70  <option value="11:m">11</option>
71  <option value="12:m">12</option>
72  <option value="13:m">13</option>
73</select>
74<table data-for="my-datepicker"></table>
75<input type="text" id="my-datepicker-output" placeholder="No date selected">
76<script>
77  // Disable dates past one week from now
78  document.getElementById('my-datepicker').disabled = (date) => {
79    var oneWeekFromNow = new Date()
80    oneWeekFromNow.setDate(new Date().getDate() + 7)
81    return date > oneWeekFromNow
82  }
83
84  // Update output
85  document.addEventListener('datepicker.change', function (event) {
86    if (event.target.id !== 'my-datepicker') return
87    document.getElementById('my-datepicker-output').value = event.target.date.toLocaleString()
88  })
89</script>

Examples (React)

Toggled calendar

Toggled datepicker (using core-toggle) with calendar to update value of input

1<!-- demo -->
2<div id="react-basic-datepicker"></div>
3
4<script>
5  const BasicPicker = () => {
6    const [hiddenVal, setHiddenVal] = React.useState(true)
7    const [dateVal, setDateVal] = React.useState(null)
8
9    const handleToggle = (event) => { setHiddenVal(event.target.hidden) }
10    const handleDateChange = (event) => { setDateVal(event.target.date) }
11    const handleDateClick = (event) => {
12      setDateVal(event.target.date)
13      setHiddenVal(true)
14    }
15    return (
16      <>
17        <input type="text" readOnly value={dateVal ? dateVal.toLocaleDateString() : ''} placeholder="No date selected"/>
18        <button type="button">Choose date</button>
19        <CoreToggle
20          className="my-popup"
21          hidden={hiddenVal}
22          onToggle={handleToggle}
23          data-popup
24        >
25          <CoreDatepicker
26            date={dateVal}
27            onDatepickerChange={handleDateChange}
28            onDatepickerClickDay={handleDateClick}
29          >
30              <label>Year<input type="year" /></label>
31              <label>Month<select></select></label>
32              <table></table>
33          </CoreDatepicker>
34        </CoreToggle>
35      </>
36    )
37  }
38  ReactDOM.render(<BasicPicker />, document.getElementById('react-basic-datepicker'))
39</script>
40
41

React class

1<!-- demo -->
2<div id="jsx-datepicker"></div>
3<script type="text/javascript">
4  class MyDate extends React.Component {
5    constructor (props) {
6      super(props)
7      this.today = Date.now() - Date.now() % 864e3
8      this.state = { date: null }
9      this.onNow = this.onNow.bind(this)
10      this.onChange = this.onChange.bind(this)
11      this.resetDate = this.resetDate.bind(this)
12      this.myRef = React.createRef();
13    }
14    onNow () { this.setState({ date: new Date() }) }
15    onChange (event) { this.setState({ date: event.target.date }) }
16    resetDate () {
17      this.setState({ date: null })
18    }
19    getForwardRef (node) { return node }
20    render () {
21      return <>
22        <button type="button">Choose date</button>
23        <CoreToggle hidden data-popup className="my-popup">
24          <CoreDatepicker
25            date={this.state.date}
26            disabled={(date) => date <= this.today}
27            onDatepickerChange={this.onChange}
28            forwardRef={this.myRef}
29          >
30              <label>Year <input type="year" /></label>
31              <label>Month <select></select></label>
32              <table></table>
33          </CoreDatepicker>
34        </CoreToggle>
35        <button type="button" onClick={this.onNow}>Today</button>
36        <button type="button" onClick={this.resetDate}>Reset</button>
37        <input type="text" readOnly value={this.state.date ? this.state.date.toLocaleDateString() : ''} placeholder="No date selected" />
38      </>
39    }
40  }
41
42  ReactDOM.render(<MyDate />, document.getElementById('jsx-datepicker'))
43</script>

Installation

Using NPM provides own element namespace and extensibility. Recommended:

1npm install @nrk/core-datepicker  # Using NPM

Using static registers the custom element with default name automatically:

1<script src="https://static.nrk.no/core-components/major/10/core-datepicker/core-datepicker.min.js"></script>  <!-- Using static -->

Remember to polyfill custom elements if needed.

Usage

All date values - both HTML markup and JavaScript - accepts accepts dates as numbers, or as natural language in the format of @nrk/simple-date-parse.

HTML / JavaScript

1<core-datepicker
2  date="{String}"         <!-- Optional. Uses simple-date-parse to set date from parseable value or natural language -->
3  months="{String}"       <!-- Optional. Comma separated list of custom month names to be used. ("Jan,Feb,...") -->
4  days="{String}">        <!-- Optional. Comma separated list of custom weekday names to be used ("Man,Tir,Ons,...") -->
5  <!-- There are different behaviours depending on the type of <input>. -->
6  <!-- When 'radio' or 'checkbox' is used, core-datepicker checks the value field -->
7  <!-- to see if the date specified is matching the values of the <input>s. -->
8  <!-- When any other type is used, core-datepicker sets the type to number -->
9  <!-- and sets the date specified in the value field. -->
10  <!-- NOTE: Other input types are not handled by core-datepicker to allow -->
11  <!-- more customizability with other elements inside core-datepicker container -->
12  <input type="radio|checkbox|year|month|day|hour|minute|second|timestamp"/>
13
14  <!-- If an empty <select> is provided, core-datepicker will populate the select -->
15  <!-- with months and automatically handle the date state when an option is chosen -->
16  <select></select>
17
18  <!-- If you use a <select> that is already populated, core-datepicker will not -->
19  <!-- modify it, but handle the dates specified in values -->
20  <select>
21    <option value="2016-m-d">Set year to 2016</option>
22    <option value="19yy-1-1">Back 100 years and set to January 1st.</option>
23    <option value="1985-12-19">December 19, 1985</option>
24  </select>
25
26
27  <!-- If an empty <table> is provided, core-datepicker will display all dates -->
28  <!-- for the current/chosen month -->
29  <table></table>
30
31  <!-- It is also possible to extend the datepicker with more features -->
32  <!-- As shown in the example, it is possible to provide buttons that moves -->
33  <!-- the date a certain amount of time  -->
34  <fieldset>
35    <legend>Navigasjon</legend>
36    <!-- Dates relative to today/now by using the keyword 'now' -->
37    <button type="button" value="now">I dag</button>
38    <button type="button" value="now - 1 day|week|month|year">I går/forrige uke/måned/år</button>
39    <button type="button" value="now + 1 day|week|month|year">I morgen/neste uke/måned/år</button>
40
41    <!-- Semi-specific dates -->
42    <!-- Will use the first two digits of the current year and set the two last -->
43    <!-- digits of the year 0. Will set the date to 1st of January -->
44    <button type="button" value="yy00-01-01">Start of current century</button>
45  </fieldset>
46</core-datepicker>

1import CoreDatepicker from '@nrk/core-datepicker'               // Using NPM
2window.customElements.define('core-datepicker', CoreProgress)   // Using NPM. Replace 'core-datepicker' with 'my-datepicker' to namespace
3
4const myDatepicker = document.querySelector('core-datepicker')
5
6// Getters
7myDatepicker.date          // Get date object
8myDatepicker.timestamp     // Get timestamp
9myDatepicker.year          // Get year
10myDatepicker.month         // Get month
11myDatepicker.day           // Get day
12myDatepicker.hour          // Get hour
13myDatepicker.minute        // Get minute
14myDatepicker.second        // Get second
15// Setters
16myDatepicker.date = 'now'                    // Set date. Accepts simple-date-parse format or Date object
17myDatepicker.months = ['Jan', 'Feb', ...]    // Set list of custom month names to be used
18myDatepicker.days = ['Man', 'Tir', ...]      // Set list of custom weekday names to be used
19myDatepicker.disabled = Function|Boolean     // Disable dates. If true disable all dates. Function receives each date, returns a boolean.
20// Methods
21myDatepicker.parse('fri')                    // Utility function for parsing time and dates. Really just @nrk/simple-date-parse

React / Preact

1import CoreDatepicker from '@nrk/core-datepicker/jsx'
2
3<CoreDatepicker
4  date={String}                     // Optional. Uses simple-date-parse to set date from parseable value or natural language
5  months={String}                   // Optional. Comma separated list of custom month names to be used ("Jan,Feb,...")
6  days={String}                     // Optional. Comma separated list of custom weekday names to be used ("Man,Tir,Ons,...")
7  ref={(comp) => {}}                // Optional. Get reference to React component
8  forwardRef={(el) => {}}           // Optional. Get reference to underlying DOM custom element
9  onDatepickerChange={Function}     // Optional. See event 'datepicker.change'
10  onDatepickerClickDay={Function}   // Optional. See event 'datepicker.click.day'
11>
12  <input type="radio|checkbox|year|month|day|hour|minute|second|timestamp"/> // Same as with plain js
13  <select></select>                    // Same as with plain js
14  <table></table>                      // Same as with plain js
15</CoreDatepicker>

Events

datepicker.change

Fired when date is changed by user or programatically:

1document.addEventListener('datepicker.change', (event) => {
2  event.target     // The datepicker
3  event.detail     // The new date that triggered change
4})

datepicker.click.day

Fired if the user clicks a day in the month days grid. The datepicker.click.day runs before datepicker.change:

1document.addEventListener('datepicker.click.day', (event) => {
2  event.target     // The datepicker
3})

Properties

@nrk/core-datepicker defaults to Norwegian Bokmål text without abbreviations (writing September instead of Sept). This can be configured by setting the days and months properties. Note that abbreviations should always be at least 3 characters long to ensure a better experience for screen reader users (for instance writing Mon, Tue... instead of m, t...).

1myDatepicker.days = ['man', 'tir', 'ons', 'tor', 'fre', 'lør', 'søn'] // Change name of days
2myDatepicker.months = ['jan', 'feb', ...] // Change name of months
3myDatepicker.disabled = (date) => date > Date.now() // Disable future dates
4myDatepicker.disabled = false // Enable all dates

Styling

CSS

1.my-datepicker                                /* Target datepicker container */
2.my-datepicker input:checked                  /* Target selected checkbox/radio dates */
3.my-datepicker input:disabled                 /* Target disabled checkbox/radio dates */
4.my-datepicker button:disabled                /* Target disabled dates */
5.my-datepicker button[autofocus]              /* Target the chosen date in month view */
6.my-datepicker button[aria-current="date"]    /* Target current date (today) in month view */
7.my-datepicker button[data-adjacent="false"]  /* Target date in current month in the month view */
8.my-datepicker button[data-adjacent="true"]   /* Target date in next or previous month in the month view */