@nrk/core-datepicker - npm Package Compare versions

Comparing version 3.1.0 to 4.0.0

core-datepicker.cjs.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-datepicker v3.1.0 - Copyright (c) 2017-2021 NRK */
+/*! @nrk/core-datepicker v4.0.0 - Copyright (c) 2017-2021 NRK */
 'use strict';
@@ -136,2 +136,4 @@
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
@@ -408,12 +410,13 @@
     key: "attributeChangedCallback",
-    value: function attributeChangedCallback() {
-      if (!this._date) return; // Only render after connectedCallback and before disconnectedCallback
+    value: function attributeChangedCallback(attr, prev, next) {
+      if (!this.parentNode) return; // Only render after connectedCallback
 
       if (this.disabled(this.date) && !this.disabled(this._date)) return this.date = this._date; // Jump back
+      // Treat change between null and 0, either way, as a valid change for dispatching event
 
-      if (this.diff(this.date)) dispatchEvent(this, 'datepicker.change', this._date = this.date);
-      forEach('button', this, button);
-      forEach('select', this, select);
-      forEach('input', this, input);
-      forEach('table', this, table);
+      if (this.diff(this.date) || prev === null && next === '0' || prev === '0' && next === null) dispatchEvent(this, 'datepicker.change', this._date = this.date);
+      forEachController('button', this, setupButton);
+      forEachController('select', this, setupSelect);
+      forEachController('input', this, setupInput);
+      forEachController('table', this, setupTable);
     }
@@ -423,15 +426,23 @@ }, {
     value: function handleEvent(event) {
+      // Filter event and target
       if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey || event.type === 'keydown' && !KEYS[event.keyCode]) return;
       if (!this.contains(event.target) && !closest(event.target, "[for=\"".concat(this.id, "\"],[data-for=\"").concat(this.id, "\"]"))) return;
-      if (event.type === 'change') this.date = MASK[event.target.getAttribute('data-type')].replace('*', event.target.value);else if (event.type === 'click') {
-        var _button = closest(event.target, 'button[value]');
 
+      if (event.type === 'change') {
+        this.date = MASK[event.target.getAttribute('data-type')].replace('*', event.target.value);
+      } else if (event.type === 'click') {
+        var button = closest(event.target, 'button[value]');
+        var table = closest(event.target, 'table');
+        if (button) this.date = button.value;
+        if (button && table) dispatchEvent(this, 'datepicker.click.day');
+      } else if (event.type === 'keydown') {
         var _table = closest(event.target, 'table');
 
-        if (_button) this.date = _button.value;
-        if (_button && _table) dispatchEvent(this, 'datepicker.click.day');
-      } else if (event.type === 'keydown' && closest(event.target, 'table')) {
-        this.date = KEYS[event.keyCode];
-        this.querySelector('[autofocus]').focus();
-        event.preventDefault(); // Prevent scrolling
+        if (_table) {
+          this.date = KEYS[event.keyCode];
+
+          _table.querySelector('[autofocus]').focus();
+
+          event.preventDefault(); // Prevent scrolling
+        }
       }
@@ -447,3 +458,3 @@ }
     value: function parse(val, from) {
-      return _parse(val, from || this._date);
+      return _parse(val, from || this._date || Date.now());
     }
@@ -458,7 +469,7 @@ }, {
 
-      this._disabled = typeof fn === 'function' ? function (val) {
-        return fn(_this2.parse(val), _this2);
-      } : function () {
-        return fn;
-      }; // Auto parse dates
+      if (typeof fn !== 'function') this._disabled = function () {
+        return Boolean(fn);
+      };else this._disabled = function (val) {
+        return val !== null && fn(_this2.parse(val), _this2);
+      }; // null is always false / never disabled
 
@@ -470,4 +481,4 @@ this.attributeChangedCallback(); // Re-render
     get: function get() {
-      return String(this._date.getTime());
-    } // Stringify for consistency and for truthy '0'
+      return this._date ? this._date.getTime() : null;
+    } // Stringify for consistency with pad and for truthy '0'
 
@@ -477,3 +488,3 @@ }, {
     get: function get() {
-      return String(this._date.getFullYear());
+      return this._date ? String(this._date.getFullYear()) : null;
     }
@@ -483,3 +494,3 @@ }, {
     get: function get() {
-      return pad(this._date.getMonth() + 1);
+      return this._date ? pad(this._date.getMonth() + 1) : null;
     }
@@ -489,3 +500,3 @@ }, {
     get: function get() {
-      return pad(this._date.getDate());
+      return this._date ? pad(this._date.getDate()) : null;
     }
@@ -495,3 +506,3 @@ }, {
     get: function get() {
-      return pad(this._date.getHours());
+      return this._date ? pad(this._date.getHours()) : null;
     }
@@ -501,3 +512,3 @@ }, {
     get: function get() {
-      return pad(this._date.getMinutes());
+      return this._date ? pad(this._date.getMinutes()) : null;
     }
@@ -507,3 +518,3 @@ }, {
     get: function get() {
-      return pad(this._date.getSeconds());
+      return this._date ? pad(this._date.getSeconds()) : null;
     }
@@ -513,6 +524,15 @@ }, {
     get: function get() {
-      return _parse(this.getAttribute('timestamp') || this._date || Date.now());
+      var dateAttr = this.getAttribute('date');
+
+      if (!dateAttr) {
+        dateAttr = this.getAttribute('timestamp');
+        if (!dateAttr) return null;
+        this.removeAttribute('timestamp');
+        console.warn(this, 'uses deprecated `timestamp` attribute. Please use `date` as specified in the docs (https://static.nrk.no/core-components/latest/index.html?core-datepicker/readme.md). Note that the attribute has been removed to avoid confusion with the `date` attribute');
+      }
+
+      return this.parse(dateAttr);
     },
     set: function set(val) {
-      return this.setAttribute('timestamp', this.parse(val).getTime());
+      return val === null ? this.removeAttribute('date') : this.setAttribute('date', this.parse(val).getTime());
     }
@@ -538,3 +558,3 @@ }, {
     get: function get() {
-      return ['timestamp', 'months', 'days'];
+      return ['date', 'months', 'days'];
     }
@@ -550,9 +570,9 @@ }]);
 
-var forEach = function forEach(css, self, fn) {
+var forEachController = function forEachController(css, self, fn) {
   return [].forEach.call(document.getElementsByTagName(css), function (el) {
-    if (self.contains(el) || self.id === el.getAttribute(self.external)) fn(self, el);
+    if (self.contains(el) || self.id === (el.getAttribute('data-for') || el.getAttribute('for'))) fn(self, el);
   });
 };
 
-function button(self, el) {
+function setupButton(self, el) {
   if (!el.value) return; // Skip buttons without a set value
@@ -565,3 +585,3 @@
 
-function input(self, el) {
+function setupInput(self, el) {
   var type = el.getAttribute('data-type') || el.getAttribute('type');
@@ -581,3 +601,3 @@
 
-function table(self, table) {
+function setupTable(self, table) {
   if (!table.firstElementChild) {
@@ -588,6 +608,7 @@ table.innerHTML = "\n    <caption></caption><thead><tr>".concat(Array(8).join('</th><th>'), "</tr></thead>\n    <tbody>").concat(Array(7).join("<tr>".concat(Array(8).join('<td><button type="button"></button></td>'), "</tr>")), "</tbody>");
   var today = new Date();
-  var month = self.date.getMonth();
-  var day = self.parse('y-m-1 mon'); // Monday in first week of month
+  var date = self._date || today;
+  var month = date.getMonth();
+  var day = self.parse('y-m-1 mon', date); // Monday in first week of month
 
-  table.caption.textContent = "".concat(self.months[month], ", ").concat(self.year);
+  table.caption.textContent = "".concat(self.months[month], ", ").concat(date.getFullYear());
   queryAll('th', table).forEach(function (th, day) {
@@ -597,3 +618,4 @@ return th.textContent = self.days[day];
   queryAll('button', table).forEach(function (button) {
-    var isSelected = !self.diff(day);
+    var isToday = day.getDate() === today.getDate() && day.getMonth() === today.getMonth() && day.getFullYear() === today.getFullYear();
+    var isSelected = self._date === null ? isToday : !self.diff(day);
     var dayInMonth = day.getDate();
@@ -605,6 +627,6 @@ var dayMonth = day.getMonth();
     button.disabled = self.disabled(day);
-    button.tabIndex = isSelected - 1;
+    button.setAttribute('tabindex', Number(isSelected) - 1);
     button.setAttribute('data-adjacent', month !== dayMonth);
     button.setAttribute('aria-label', "".concat(dayInMonth, ". ").concat(self.months[dayMonth]));
-    button.setAttribute('aria-current', day.getDate() === today.getDate() && day.getMonth() === today.getMonth() && day.getFullYear() === today.getFullYear() && 'date');
+    button.setAttribute('aria-current', isToday && 'date');
     toggleAttribute(button, 'autofocus', isSelected);
@@ -615,3 +637,3 @@ day.setDate(dayInMonth + 1);
 
-function select(self, select) {
+function setupSelect(self, select) {
   if (!select.firstElementChild) {
@@ -618,0 +640,0 @@ select._autofill = true;

core-datepicker.js

@@ -10,3 +10,3 @@ import { addStyle, closest, dispatchEvent, toggleAttribute, queryAll } from '../utils'
 export default class CoreDatepicker extends HTMLElement {
-  static get observedAttributes () { return ['timestamp', 'months', 'days'] }
+  static get observedAttributes () { return ['date', 'months', 'days'] }
 
@@ -29,18 +29,22 @@ connectedCallback () {
 
-  attributeChangedCallback () {
-    if (!this._date) return // Only render after connectedCallback and before disconnectedCallback
+  attributeChangedCallback (attr, prev, next) {
+    if (!this.parentNode) return // Only render after connectedCallback
     if (this.disabled(this.date) && !this.disabled(this._date)) return (this.date = this._date) // Jump back
-    if (this.diff(this.date)) dispatchEvent(this, 'datepicker.change', this._date = this.date)
 
-    forEach('button', this, button)
-    forEach('select', this, select)
-    forEach('input', this, input)
-    forEach('table', this, table)
+    // Treat change between null and 0, either way, as a valid change for dispatching event
+    if (this.diff(this.date) || (prev === null && next === '0') || (prev === '0' && next === null)) dispatchEvent(this, 'datepicker.change', this._date = this.date)
+    forEachController('button', this, setupButton)
+    forEachController('select', this, setupSelect)
+    forEachController('input', this, setupInput)
+    forEachController('table', this, setupTable)
   }
 
   handleEvent (event) {
+    // Filter event and target
     if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey || (event.type === 'keydown' && !KEYS[event.keyCode])) return
     if (!this.contains(event.target) && !closest(event.target, `[for="${this.id}"],[data-for="${this.id}"]`)) return
-    if (event.type === 'change') this.date = MASK[event.target.getAttribute('data-type')].replace('*', event.target.value)
-    else if (event.type === 'click') {
+
+    if (event.type === 'change') {
+      this.date = MASK[event.target.getAttribute('data-type')].replace('*', event.target.value)
+    } else if (event.type === 'click') {
       const button = closest(event.target, 'button[value]')
@@ -50,6 +54,9 @@ const table = closest(event.target, 'table')
       if (button && table) dispatchEvent(this, 'datepicker.click.day')
-    } else if (event.type === 'keydown' && closest(event.target, 'table')) {
-      this.date = KEYS[event.keyCode]
-      this.querySelector('[autofocus]').focus()
-      event.preventDefault() // Prevent scrolling
+    } else if (event.type === 'keydown') {
+      const table = closest(event.target, 'table')
+      if (table) {
+        this.date = KEYS[event.keyCode]
+        table.querySelector('[autofocus]').focus()
+        event.preventDefault() // Prevent scrolling
+      }
     }
@@ -60,3 +67,3 @@ }
 
-  parse (val, from) { return parse(val, from || this._date) }
+  parse (val, from) { return parse(val, from || this._date || Date.now()) }
 
@@ -66,24 +73,36 @@ get disabled () { return this._disabled || Function.prototype }
   set disabled (fn) {
-    this._disabled = typeof fn === 'function' ? (val) => fn(this.parse(val), this) : () => fn // Auto parse dates
+    if (typeof fn !== 'function') this._disabled = () => Boolean(fn)
+    else this._disabled = (val) => val !== null && fn(this.parse(val), this) // null is always false / never disabled
     this.attributeChangedCallback() // Re-render
   }
 
-  get timestamp () { return String(this._date.getTime()) }
+  get timestamp () { return this._date ? this._date.getTime() : null }
 
-  // Stringify for consistency and for truthy '0'
-  get year () { return String(this._date.getFullYear()) }
+  // Stringify for consistency with pad and for truthy '0'
+  get year () { return this._date ? String(this._date.getFullYear()) : null }
 
-  get month () { return pad(this._date.getMonth() + 1) }
+  get month () { return this._date ? pad(this._date.getMonth() + 1) : null }
 
-  get day () { return pad(this._date.getDate()) }
+  get day () { return this._date ? pad(this._date.getDate()) : null }
 
-  get hour () { return pad(this._date.getHours()) }
+  get hour () { return this._date ? pad(this._date.getHours()) : null }
 
-  get minute () { return pad(this._date.getMinutes()) }
+  get minute () { return this._date ? pad(this._date.getMinutes()) : null }
 
-  get second () { return pad(this._date.getSeconds()) }
+  get second () { return this._date ? pad(this._date.getSeconds()) : null }
 
-  get date () { return parse(this.getAttribute('timestamp') || this._date || Date.now()) }
+  get date () {
+    let dateAttr = this.getAttribute('date')
+    if (!dateAttr) {
+      dateAttr = this.getAttribute('timestamp')
+      if (!dateAttr) return null
+      this.removeAttribute('timestamp')
+      console.warn(this, 'uses deprecated `timestamp` attribute. Please use `date` as specified in the docs (https://static.nrk.no/core-components/latest/index.html?core-datepicker/readme.md). Note that the attribute has been removed to avoid confusion with the `date` attribute')
+    }
+    return this.parse(dateAttr)
+  }
 
-  set date (val) { return this.setAttribute('timestamp', this.parse(val).getTime()) }
+  set date (val) {
+    return val === null ? this.removeAttribute('date') : this.setAttribute('date', this.parse(val).getTime())
+  }
 
@@ -100,7 +119,8 @@ set months (val) { this.setAttribute('months', [].concat(val).join(',')) }
 const pad = (val) => `0${val}`.slice(-2)
-const forEach = (css, self, fn) => [].forEach.call(document.getElementsByTagName(css), (el) => {
-  if (self.contains(el) || self.id === el.getAttribute(self.external)) fn(self, el)
+
+const forEachController = (css, self, fn) => [].forEach.call(document.getElementsByTagName(css), (el) => {
+  if (self.contains(el) || self.id === (el.getAttribute('data-for') || el.getAttribute('for'))) fn(self, el)
 })
 
-function button (self, el) {
+function setupButton (self, el) {
   if (!el.value) return // Skip buttons without a set value
@@ -111,5 +131,4 @@ el.type = 'button' // Ensure forms are not submitted by datepicker-buttons
 
-function input (self, el) {
+function setupInput (self, el) {
   const type = el.getAttribute('data-type') || el.getAttribute('type')
-
   if (type === 'radio' || type === 'checkbox') {
@@ -125,3 +144,3 @@ el.disabled = self.disabled(el.value)
 
-function table (self, table) {
+function setupTable (self, table) {
   if (!table.firstElementChild) {
@@ -134,9 +153,10 @@ table.innerHTML = `
   const today = new Date()
-  const month = self.date.getMonth()
-  const day = self.parse('y-m-1 mon') // Monday in first week of month
-  table.caption.textContent = `${self.months[month]}, ${self.year}`
-
+  const date = self._date || today
+  const month = date.getMonth()
+  const day = self.parse('y-m-1 mon', date) // Monday in first week of month
+  table.caption.textContent = `${self.months[month]}, ${date.getFullYear()}`
   queryAll('th', table).forEach((th, day) => (th.textContent = self.days[day]))
   queryAll('button', table).forEach((button) => {
-    const isSelected = !self.diff(day)
+    const isToday = day.getDate() === today.getDate() && day.getMonth() === today.getMonth() && day.getFullYear() === today.getFullYear()
+    const isSelected = self._date === null ? isToday : !self.diff(day)
     const dayInMonth = day.getDate()
@@ -148,6 +168,6 @@ const dayMonth = day.getMonth()
     button.disabled = self.disabled(day)
-    button.tabIndex = isSelected - 1
+    button.setAttribute('tabindex', Number(isSelected) - 1)
     button.setAttribute('data-adjacent', month !== dayMonth)
     button.setAttribute('aria-label', `${dayInMonth}. ${self.months[dayMonth]}`)
-    button.setAttribute('aria-current', day.getDate() === today.getDate() && day.getMonth() === today.getMonth() && day.getFullYear() === today.getFullYear() && 'date')
+    button.setAttribute('aria-current', isToday && 'date')
     toggleAttribute(button, 'autofocus', isSelected)
@@ -158,3 +178,3 @@ day.setDate(dayInMonth + 1)
 
-function select (self, select) {
+function setupSelect (self, select) {
   if (!select.firstElementChild) {
@@ -161,0 +181,0 @@ select._autofill = true

core-datepicker.jsx.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-datepicker v3.1.0 - Copyright (c) 2017-2021 NRK */
+/*! @nrk/core-datepicker v4.0.0 - Copyright (c) 2017-2021 NRK */
 (function (global, factory) {
@@ -6,3 +6,3 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.CoreDatepicker = factory(global.React));
-}(this, (function (React) { 'use strict';
+})(this, (function (React) { 'use strict';
 
@@ -145,2 +145,4 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
       return call;
+    } else if (call !== void 0) {
+      throw new TypeError("Derived constructors may only return object or undefined");
     }
@@ -417,12 +419,13 @@
       key: "attributeChangedCallback",
-      value: function attributeChangedCallback() {
-        if (!this._date) return; // Only render after connectedCallback and before disconnectedCallback
+      value: function attributeChangedCallback(attr, prev, next) {
+        if (!this.parentNode) return; // Only render after connectedCallback
 
         if (this.disabled(this.date) && !this.disabled(this._date)) return this.date = this._date; // Jump back
+        // Treat change between null and 0, either way, as a valid change for dispatching event
 
-        if (this.diff(this.date)) dispatchEvent(this, 'datepicker.change', this._date = this.date);
-        forEach('button', this, button);
-        forEach('select', this, select);
-        forEach('input', this, input);
-        forEach('table', this, table);
+        if (this.diff(this.date) || prev === null && next === '0' || prev === '0' && next === null) dispatchEvent(this, 'datepicker.change', this._date = this.date);
+        forEachController('button', this, setupButton);
+        forEachController('select', this, setupSelect);
+        forEachController('input', this, setupInput);
+        forEachController('table', this, setupTable);
       }
@@ -432,15 +435,23 @@ }, {
       value: function handleEvent(event) {
+        // Filter event and target
         if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey || event.type === 'keydown' && !KEYS[event.keyCode]) return;
         if (!this.contains(event.target) && !closest$1(event.target, "[for=\"".concat(this.id, "\"],[data-for=\"").concat(this.id, "\"]"))) return;
-        if (event.type === 'change') this.date = MASK[event.target.getAttribute('data-type')].replace('*', event.target.value);else if (event.type === 'click') {
-          var _button = closest$1(event.target, 'button[value]');
 
+        if (event.type === 'change') {
+          this.date = MASK[event.target.getAttribute('data-type')].replace('*', event.target.value);
+        } else if (event.type === 'click') {
+          var button = closest$1(event.target, 'button[value]');
+          var table = closest$1(event.target, 'table');
+          if (button) this.date = button.value;
+          if (button && table) dispatchEvent(this, 'datepicker.click.day');
+        } else if (event.type === 'keydown') {
           var _table = closest$1(event.target, 'table');
 
-          if (_button) this.date = _button.value;
-          if (_button && _table) dispatchEvent(this, 'datepicker.click.day');
-        } else if (event.type === 'keydown' && closest$1(event.target, 'table')) {
-          this.date = KEYS[event.keyCode];
-          this.querySelector('[autofocus]').focus();
-          event.preventDefault(); // Prevent scrolling
+          if (_table) {
+            this.date = KEYS[event.keyCode];
+
+            _table.querySelector('[autofocus]').focus();
+
+            event.preventDefault(); // Prevent scrolling
+          }
         }
@@ -456,3 +467,3 @@ }
       value: function parse(val, from) {
-        return _parse(val, from || this._date);
+        return _parse(val, from || this._date || Date.now());
       }
@@ -467,7 +478,7 @@ }, {
 
-        this._disabled = typeof fn === 'function' ? function (val) {
-          return fn(_this2.parse(val), _this2);
-        } : function () {
-          return fn;
-        }; // Auto parse dates
+        if (typeof fn !== 'function') this._disabled = function () {
+          return Boolean(fn);
+        };else this._disabled = function (val) {
+          return val !== null && fn(_this2.parse(val), _this2);
+        }; // null is always false / never disabled
 
@@ -479,4 +490,4 @@ this.attributeChangedCallback(); // Re-render
       get: function get() {
-        return String(this._date.getTime());
-      } // Stringify for consistency and for truthy '0'
+        return this._date ? this._date.getTime() : null;
+      } // Stringify for consistency with pad and for truthy '0'
 
@@ -486,3 +497,3 @@ }, {
       get: function get() {
-        return String(this._date.getFullYear());
+        return this._date ? String(this._date.getFullYear()) : null;
       }
@@ -492,3 +503,3 @@ }, {
       get: function get() {
-        return pad(this._date.getMonth() + 1);
+        return this._date ? pad(this._date.getMonth() + 1) : null;
       }
@@ -498,3 +509,3 @@ }, {
       get: function get() {
-        return pad(this._date.getDate());
+        return this._date ? pad(this._date.getDate()) : null;
       }
@@ -504,3 +515,3 @@ }, {
       get: function get() {
-        return pad(this._date.getHours());
+        return this._date ? pad(this._date.getHours()) : null;
       }
@@ -510,3 +521,3 @@ }, {
       get: function get() {
-        return pad(this._date.getMinutes());
+        return this._date ? pad(this._date.getMinutes()) : null;
       }
@@ -516,3 +527,3 @@ }, {
       get: function get() {
-        return pad(this._date.getSeconds());
+        return this._date ? pad(this._date.getSeconds()) : null;
       }
@@ -522,6 +533,15 @@ }, {
       get: function get() {
-        return _parse(this.getAttribute('timestamp') || this._date || Date.now());
+        var dateAttr = this.getAttribute('date');
+
+        if (!dateAttr) {
+          dateAttr = this.getAttribute('timestamp');
+          if (!dateAttr) return null;
+          this.removeAttribute('timestamp');
+          console.warn(this, 'uses deprecated `timestamp` attribute. Please use `date` as specified in the docs (https://static.nrk.no/core-components/latest/index.html?core-datepicker/readme.md). Note that the attribute has been removed to avoid confusion with the `date` attribute');
+        }
+
+        return this.parse(dateAttr);
       },
       set: function set(val) {
-        return this.setAttribute('timestamp', this.parse(val).getTime());
+        return val === null ? this.removeAttribute('date') : this.setAttribute('date', this.parse(val).getTime());
       }
@@ -547,3 +567,3 @@ }, {
       get: function get() {
-        return ['timestamp', 'months', 'days'];
+        return ['date', 'months', 'days'];
       }
@@ -559,9 +579,9 @@ }]);
 
-  var forEach = function forEach(css, self, fn) {
+  var forEachController = function forEachController(css, self, fn) {
     return [].forEach.call(document.getElementsByTagName(css), function (el) {
-      if (self.contains(el) || self.id === el.getAttribute(self.external)) fn(self, el);
+      if (self.contains(el) || self.id === (el.getAttribute('data-for') || el.getAttribute('for'))) fn(self, el);
     });
   };
 
-  function button(self, el) {
+  function setupButton(self, el) {
     if (!el.value) return; // Skip buttons without a set value
@@ -574,3 +594,3 @@
 
-  function input(self, el) {
+  function setupInput(self, el) {
     var type = el.getAttribute('data-type') || el.getAttribute('type');
@@ -590,3 +610,3 @@
 
-  function table(self, table) {
+  function setupTable(self, table) {
     if (!table.firstElementChild) {
@@ -597,6 +617,7 @@ table.innerHTML = "\n    <caption></caption><thead><tr>".concat(Array(8).join('</th><th>'), "</tr></thead>\n    <tbody>").concat(Array(7).join("<tr>".concat(Array(8).join('<td><button type="button"></button></td>'), "</tr>")), "</tbody>");
     var today = new Date();
-    var month = self.date.getMonth();
-    var day = self.parse('y-m-1 mon'); // Monday in first week of month
+    var date = self._date || today;
+    var month = date.getMonth();
+    var day = self.parse('y-m-1 mon', date); // Monday in first week of month
 
-    table.caption.textContent = "".concat(self.months[month], ", ").concat(self.year);
+    table.caption.textContent = "".concat(self.months[month], ", ").concat(date.getFullYear());
     queryAll('th', table).forEach(function (th, day) {
@@ -606,3 +627,4 @@ return th.textContent = self.days[day];
     queryAll('button', table).forEach(function (button) {
-      var isSelected = !self.diff(day);
+      var isToday = day.getDate() === today.getDate() && day.getMonth() === today.getMonth() && day.getFullYear() === today.getFullYear();
+      var isSelected = self._date === null ? isToday : !self.diff(day);
       var dayInMonth = day.getDate();
@@ -614,6 +636,6 @@ var dayMonth = day.getMonth();
       button.disabled = self.disabled(day);
-      button.tabIndex = isSelected - 1;
+      button.setAttribute('tabindex', Number(isSelected) - 1);
       button.setAttribute('data-adjacent', month !== dayMonth);
       button.setAttribute('aria-label', "".concat(dayInMonth, ". ").concat(self.months[dayMonth]));
-      button.setAttribute('aria-current', day.getDate() === today.getDate() && day.getMonth() === today.getMonth() && day.getFullYear() === today.getFullYear() && 'date');
+      button.setAttribute('aria-current', isToday && 'date');
       toggleAttribute(button, 'autofocus', isSelected);
@@ -624,3 +646,3 @@ day.setDate(dayInMonth + 1);
 
-  function select(self, select) {
+  function setupSelect(self, select) {
     if (!select.firstElementChild) {
@@ -640,3 +662,3 @@ select._autofill = true;
 
-  var version = "3.1.0";
+  var version = "4.0.0";
 
@@ -696,3 +718,3 @@ /**
     var tagName = (dashCase + "-" + (options.suffix || 'react')).replace(/\W+/g, '-').toLowerCase();
-    return function (superclass) {
+    return /*@__PURE__*/function (superclass) {
       function anonymous(props) {
@@ -768,3 +790,3 @@ var this$1$1 = this;
 
-        return React__default['default'].createElement(tagName, Object.keys(this.props).reduce(function (thisProps, propName) {
+        return React__default["default"].createElement(tagName, Object.keys(this.props).reduce(function (thisProps, propName) {
           if (skipProps.indexOf(propName) === -1) {
@@ -791,3 +813,3 @@ // Do not render customEvents and custom props as attributes
       return anonymous;
-    }(React__default['default'].Component);
+    }(React__default["default"].Component);
   }
@@ -803,3 +825,3 @@
 
-})));
+}));
 //# sourceMappingURL=core-datepicker.jsx.js.map

core-datepicker.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-datepicker v3.1.0 - Copyright (c) 2017-2021 NRK */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).coreDatepicker=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function n(t){return(n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function i(t,e){return(i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function r(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}function o(t,e,n){return(o=r()?Reflect.construct:function(t,e,n){var r=[null];r.push.apply(r,e);var o=new(Function.bind.apply(t,r));return n&&i(o,n.prototype),o}).apply(null,arguments)}function a(t){var e="function"==typeof Map?new Map:void 0;return(a=function(t){if(null===t||(r=t,-1===Function.toString.call(r).indexOf("[native code]")))return t;var r;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,a)}function a(){return o(t,arguments,n(this).constructor)}return a.prototype=Object.create(t.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),i(a,t)})(t)}function u(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}var c="undefined"!=typeof window;c&&/(android)/i.test(navigator.userAgent),c&&/iPad|iPhone|iPod/.test(String(navigator.platform)),c||global.HTMLElement||(global.HTMLElement=function(){return function e(){t(this,e)}}());var s,l,d=(s="undefined"==typeof window?{}:window.Element.prototype,l=s.matches||s.msMatchesSelector||s.webkitMatchesSelector,s.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(l.call(t,e))return t;return null});function f(t,e){var n,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[r])return!0;t[r]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:i}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i);var o=t.dispatchEvent(n);return t[r]=null,o}function h(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;if(t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var y={exports:{}};!function(t,e){var n,i,r,o;t.exports=(n={year:"FullYear",month:"Month",week:"Date",day:"Date",hour:"Hours",minute:"Minutes",second:"Seconds"},i=/([+-]\s*\d+)\s*(second|minute|hour|day|week|month|year)|(mon)|(tue)|(wed)|(thu)|(fri)|(sat)|(sun)/g,r=/([-\dy]+)[-/.]([\dm]+)[-/.]([\dd]+)/,o=/([\dh]+):([\dm]+):?([\ds]+)?/,function(t,e){if(isFinite(t))return new Date(Number(t));var a=String(t).toLowerCase(),u=new Date(isFinite(e)&&-1===a.indexOf("now")?Number(e):Date.now()),c=a.match(r)||[],s=c[1];void 0===s&&(s="y");var l=c[2];void 0===l&&(l="m");var d=c[3];void 0===d&&(d="d");var f=a.match(o)||[],h=f[1];void 0===h&&(h="h");var y=f[2];void 0===y&&(y="m");var m=f[3];void 0===m&&(m="s");var p={year:s,month:l,day:d,hour:h,minute:y,second:m};Object.keys(p).forEach((function(t){var e="month"===t?1:0,i=String(u["get"+n[t]]()+e);p[t]=p[t].replace(/[^-\d]+/g,(function(t,e,n){return e?i.substr(i.length-n.length+e,t.length):i.substr(0,Math.max(0,i.length-n.length+t.length))}))-e}));var b=new Date(p.year,Math.min(12,p.month+1),0).getDate();for(u.setFullYear(p.year,Math.min(11,p.month),Math.max(1,Math.min(b,p.day))),u.setHours(Math.min(24,p.hour),Math.min(59,p.minute),Math.min(59,p.second));null!==(p=i.exec(a));){var g=p[2],v=String(p[1]).replace(/\s/g,"")*("week"===g?7:1),k=p.slice(2).indexOf(p[0]),w=u.getDate();g?u["set"+n[g]](u["get"+n[g]]()+v):u.setDate(u.getDate()-(u.getDay()||7)+k),"month"!==g&&"year"!==g||w===u.getDate()||u.setDate(0)}return u})}(y);var m=y.exports,p={year:"*-m-d",month:"y-*-d",day:"y-m-*",hour:"*:m",minute:"h:*",second:"h:m:*",timestamp:"*",null:"*"},b={33:"-1month",34:"+1month",35:"y-m-99",36:"y-m-1",37:"-1day",38:"-1week",39:"+1day",40:"+1week"},g=function(o){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&i(t,e)}(g,o);var a,c,s,l,h,y=(a=g,c=r(),function(){var t,e=n(a);if(c){var i=n(this).constructor;t=Reflect.construct(e,arguments,i)}else t=e.apply(this,arguments);return u(this,t)});function g(){return t(this,g),y.apply(this,arguments)}return s=g,h=[{key:"observedAttributes",get:function(){return["timestamp","months","days"]}}],(l=[{key:"connectedCallback",value:function(){var t,e,n,i,r=this;this._date=this.date,document.addEventListener("click",this),document.addEventListener("change",this),document.addEventListener("keydown",this),setTimeout((function(){return r.attributeChangedCallback()})),t=this.nodeName,e="".concat(this.nodeName,"{display:block}"),n="style-".concat(t.toLowerCase()),i=e.replace(/\/\*[^!][^*]*\*\//g,"").replace(/\s*(^|[:;,{}]|$)\s*/g,"$1"),document.getElementById(n)||document.head.insertAdjacentHTML("afterbegin",'<style id="'.concat(n,'">').concat(i,"</style>"))}},{key:"disconnectedCallback",value:function(){this._date=this._disabled=null,document.removeEventListener("click",this),document.removeEventListener("change",this),document.removeEventListener("keydown",this)}},{key:"attributeChangedCallback",value:function(){if(this._date){if(this.disabled(this.date)&&!this.disabled(this._date))return this.date=this._date;this.diff(this.date)&&f(this,"datepicker.change",this._date=this.date),k("button",this,w),k("select",this,A),k("input",this,E),k("table",this,_)}}},{key:"handleEvent",value:function(t){if(!(t.defaultPrevented||t.ctrlKey||t.metaKey||t.shiftKey||t.altKey||"keydown"===t.type&&!b[t.keyCode])&&(this.contains(t.target)||d(t.target,'[for="'.concat(this.id,'"],[data-for="').concat(this.id,'"]'))))if("change"===t.type)this.date=p[t.target.getAttribute("data-type")].replace("*",t.target.value);else if("click"===t.type){var e=d(t.target,"button[value]"),n=d(t.target,"table");e&&(this.date=e.value),e&&n&&f(this,"datepicker.click.day")}else"keydown"===t.type&&d(t.target,"table")&&(this.date=b[t.keyCode],this.querySelector("[autofocus]").focus(),t.preventDefault())}},{key:"diff",value:function(t){return this.parse(t).getTime()-this.timestamp}},{key:"parse",value:function(t,e){return m(t,e||this._date)}},{key:"disabled",get:function(){return this._disabled||Function.prototype},set:function(t){var e=this;this._disabled="function"==typeof t?function(n){return t(e.parse(n),e)}:function(){return t},this.attributeChangedCallback()}},{key:"timestamp",get:function(){return String(this._date.getTime())}},{key:"year",get:function(){return String(this._date.getFullYear())}},{key:"month",get:function(){return v(this._date.getMonth()+1)}},{key:"day",get:function(){return v(this._date.getDate())}},{key:"hour",get:function(){return v(this._date.getHours())}},{key:"minute",get:function(){return v(this._date.getMinutes())}},{key:"second",get:function(){return v(this._date.getSeconds())}},{key:"date",get:function(){return m(this.getAttribute("timestamp")||this._date||Date.now())},set:function(t){return this.setAttribute("timestamp",this.parse(t).getTime())}},{key:"months",get:function(){return(this.getAttribute("months")||"januar,februar,mars,april,mai,juni,juli,august,september,oktober,november,desember").split(/\s*,\s*/)},set:function(t){this.setAttribute("months",[].concat(t).join(","))}},{key:"days",get:function(){return(this.getAttribute("days")||"man,tirs,ons,tors,fre,lør,søn").split(/\s*,\s*/)},set:function(t){this.setAttribute("days",[].concat(t).join(","))}}])&&e(s.prototype,l),h&&e(s,h),g}(a(HTMLElement)),v=function(t){return"0".concat(t).slice(-2)},k=function(t,e,n){return[].forEach.call(document.getElementsByTagName(t),(function(t){(e.contains(t)||e.id===t.getAttribute(e.external))&&n(e,t)}))};function w(t,e){e.value&&(e.type="button",e.disabled=t.disabled(e.value))}function E(t,e){var n=e.getAttribute("data-type")||e.getAttribute("type");"radio"===n||"checkbox"===n?(e.disabled=t.disabled(e.value),e.checked=!t.diff(e.value)):p[n]&&(e.setAttribute("type","number"),e.setAttribute("data-type",n),e.value=t[n])}function _(t,e){e.firstElementChild||(e.innerHTML="\n    <caption></caption><thead><tr>".concat(Array(8).join("</th><th>"),"</tr></thead>\n    <tbody>").concat(Array(7).join("<tr>".concat(Array(8).join('<td><button type="button"></button></td>'),"</tr>")),"</tbody>"));var n=new Date,i=t.date.getMonth(),r=t.parse("y-m-1 mon");e.caption.textContent="".concat(t.months[i],", ").concat(t.year),h("th",e).forEach((function(e,n){return e.textContent=t.days[n]})),h("button",e).forEach((function(e){var o=!t.diff(r),a=r.getDate(),u=r.getMonth();e.textContent=a,e.value="".concat(r.getFullYear(),"-").concat(u+1,"-").concat(a),e.disabled=t.disabled(r),e.tabIndex=o-1,e.setAttribute("data-adjacent",i!==u),e.setAttribute("aria-label","".concat(a,". ").concat(t.months[u])),e.setAttribute("aria-current",r.getDate()===n.getDate()&&r.getMonth()===n.getMonth()&&r.getFullYear()===n.getFullYear()&&"date"),function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:!this.hasAttribute(e);!n===t.hasAttribute(e)&&t[n?"setAttribute":"removeAttribute"](e,"")}(e,"autofocus",o),r.setDate(a+1)}))}function A(t,e){e.firstElementChild||(e._autofill=!0,e.innerHTML=t.months.map((function(t,e){return'<option value="y-'.concat(e+1,'-d"></option>')})).join("")),h(e.children).forEach((function(n,i){e._autofill&&(n.textContent=t.months[i]),n.disabled=t.disabled(n.value),n.selected=!t.diff(n.value)}))}return g})),window.customElements.define("core-datepicker",coreDatepicker);
+/*! @nrk/core-datepicker v4.0.0 - Copyright (c) 2017-2021 NRK */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).coreDatepicker=e()}(this,(function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function n(t){return(n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function r(t,e){return(r=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function i(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}function o(t,e,n){return(o=i()?Reflect.construct:function(t,e,n){var i=[null];i.push.apply(i,e);var o=new(Function.bind.apply(t,i));return n&&r(o,n.prototype),o}).apply(null,arguments)}function a(t){var e="function"==typeof Map?new Map:void 0;return(a=function(t){if(null===t||(i=t,-1===Function.toString.call(i).indexOf("[native code]")))return t;var i;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,a)}function a(){return o(t,arguments,n(this).constructor)}return a.prototype=Object.create(t.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),r(a,t)})(t)}function u(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}var s="undefined"!=typeof window;s&&/(android)/i.test(navigator.userAgent),s&&/iPad|iPhone|iPod/.test(String(navigator.platform)),s||global.HTMLElement||(global.HTMLElement=function(){return function e(){t(this,e)}}());var c,l,d=(c="undefined"==typeof window?{}:window.Element.prototype,l=c.matches||c.msMatchesSelector||c.webkitMatchesSelector,c.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(l.call(t,e))return t;return null});function f(t,e){var n,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[i])return!0;t[i]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:r}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,r);var o=t.dispatchEvent(n);return t[i]=null,o}function h(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;if(t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var m={exports:{}};!function(t,e){var n,r,i,o;t.exports=(n={year:"FullYear",month:"Month",week:"Date",day:"Date",hour:"Hours",minute:"Minutes",second:"Seconds"},r=/([+-]\s*\d+)\s*(second|minute|hour|day|week|month|year)|(mon)|(tue)|(wed)|(thu)|(fri)|(sat)|(sun)/g,i=/([-\dy]+)[-/.]([\dm]+)[-/.]([\dd]+)/,o=/([\dh]+):([\dm]+):?([\ds]+)?/,function(t,e){if(isFinite(t))return new Date(Number(t));var a=String(t).toLowerCase(),u=new Date(isFinite(e)&&-1===a.indexOf("now")?Number(e):Date.now()),s=a.match(i)||[],c=s[1];void 0===c&&(c="y");var l=s[2];void 0===l&&(l="m");var d=s[3];void 0===d&&(d="d");var f=a.match(o)||[],h=f[1];void 0===h&&(h="h");var m=f[2];void 0===m&&(m="m");var y=f[3];void 0===y&&(y="s");var p={year:c,month:l,day:d,hour:h,minute:m,second:y};Object.keys(p).forEach((function(t){var e="month"===t?1:0,r=String(u["get"+n[t]]()+e);p[t]=p[t].replace(/[^-\d]+/g,(function(t,e,n){return e?r.substr(r.length-n.length+e,t.length):r.substr(0,Math.max(0,r.length-n.length+t.length))}))-e}));var b=new Date(p.year,Math.min(12,p.month+1),0).getDate();for(u.setFullYear(p.year,Math.min(11,p.month),Math.max(1,Math.min(b,p.day))),u.setHours(Math.min(24,p.hour),Math.min(59,p.minute),Math.min(59,p.second));null!==(p=r.exec(a));){var g=p[2],v=String(p[1]).replace(/\s/g,"")*("week"===g?7:1),w=p.slice(2).indexOf(p[0]),k=u.getDate();g?u["set"+n[g]](u["get"+n[g]]()+v):u.setDate(u.getDate()-(u.getDay()||7)+w),"month"!==g&&"year"!==g||k===u.getDate()||u.setDate(0)}return u})}(m);var y=m.exports,p={year:"*-m-d",month:"y-*-d",day:"y-m-*",hour:"*:m",minute:"h:*",second:"h:m:*",timestamp:"*",null:"*"},b={33:"-1month",34:"+1month",35:"y-m-99",36:"y-m-1",37:"-1day",38:"-1week",39:"+1day",40:"+1week"},g=function(o){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&r(t,e)}(g,o);var a,s,c,l,h,m=(a=g,s=i(),function(){var t,e=n(a);if(s){var r=n(this).constructor;t=Reflect.construct(e,arguments,r)}else t=e.apply(this,arguments);return u(this,t)});function g(){return t(this,g),m.apply(this,arguments)}return c=g,h=[{key:"observedAttributes",get:function(){return["date","months","days"]}}],(l=[{key:"connectedCallback",value:function(){var t,e,n,r,i=this;this._date=this.date,document.addEventListener("click",this),document.addEventListener("change",this),document.addEventListener("keydown",this),setTimeout((function(){return i.attributeChangedCallback()})),t=this.nodeName,e="".concat(this.nodeName,"{display:block}"),n="style-".concat(t.toLowerCase()),r=e.replace(/\/\*[^!][^*]*\*\//g,"").replace(/\s*(^|[:;,{}]|$)\s*/g,"$1"),document.getElementById(n)||document.head.insertAdjacentHTML("afterbegin",'<style id="'.concat(n,'">').concat(r,"</style>"))}},{key:"disconnectedCallback",value:function(){this._date=this._disabled=null,document.removeEventListener("click",this),document.removeEventListener("change",this),document.removeEventListener("keydown",this)}},{key:"attributeChangedCallback",value:function(t,e,n){if(this.parentNode){if(this.disabled(this.date)&&!this.disabled(this._date))return this.date=this._date;(this.diff(this.date)||null===e&&"0"===n||"0"===e&&null===n)&&f(this,"datepicker.change",this._date=this.date),w("button",this,k),w("select",this,A),w("input",this,_),w("table",this,E)}}},{key:"handleEvent",value:function(t){if(!(t.defaultPrevented||t.ctrlKey||t.metaKey||t.shiftKey||t.altKey||"keydown"===t.type&&!b[t.keyCode])&&(this.contains(t.target)||d(t.target,'[for="'.concat(this.id,'"],[data-for="').concat(this.id,'"]'))))if("change"===t.type)this.date=p[t.target.getAttribute("data-type")].replace("*",t.target.value);else if("click"===t.type){var e=d(t.target,"button[value]"),n=d(t.target,"table");e&&(this.date=e.value),e&&n&&f(this,"datepicker.click.day")}else if("keydown"===t.type){var r=d(t.target,"table");r&&(this.date=b[t.keyCode],r.querySelector("[autofocus]").focus(),t.preventDefault())}}},{key:"diff",value:function(t){return this.parse(t).getTime()-this.timestamp}},{key:"parse",value:function(t,e){return y(t,e||this._date||Date.now())}},{key:"disabled",get:function(){return this._disabled||Function.prototype},set:function(t){var e=this;this._disabled="function"!=typeof t?function(){return Boolean(t)}:function(n){return null!==n&&t(e.parse(n),e)},this.attributeChangedCallback()}},{key:"timestamp",get:function(){return this._date?this._date.getTime():null}},{key:"year",get:function(){return this._date?String(this._date.getFullYear()):null}},{key:"month",get:function(){return this._date?v(this._date.getMonth()+1):null}},{key:"day",get:function(){return this._date?v(this._date.getDate()):null}},{key:"hour",get:function(){return this._date?v(this._date.getHours()):null}},{key:"minute",get:function(){return this._date?v(this._date.getMinutes()):null}},{key:"second",get:function(){return this._date?v(this._date.getSeconds()):null}},{key:"date",get:function(){var t=this.getAttribute("date");if(!t){if(!(t=this.getAttribute("timestamp")))return null;this.removeAttribute("timestamp"),console.warn(this,"uses deprecated `timestamp` attribute. Please use `date` as specified in the docs (https://static.nrk.no/core-components/latest/index.html?core-datepicker/readme.md). Note that the attribute has been removed to avoid confusion with the `date` attribute")}return this.parse(t)},set:function(t){return null===t?this.removeAttribute("date"):this.setAttribute("date",this.parse(t).getTime())}},{key:"months",get:function(){return(this.getAttribute("months")||"januar,februar,mars,april,mai,juni,juli,august,september,oktober,november,desember").split(/\s*,\s*/)},set:function(t){this.setAttribute("months",[].concat(t).join(","))}},{key:"days",get:function(){return(this.getAttribute("days")||"man,tirs,ons,tors,fre,lør,søn").split(/\s*,\s*/)},set:function(t){this.setAttribute("days",[].concat(t).join(","))}}])&&e(c.prototype,l),h&&e(c,h),g}(a(HTMLElement)),v=function(t){return"0".concat(t).slice(-2)},w=function(t,e,n){return[].forEach.call(document.getElementsByTagName(t),(function(t){(e.contains(t)||e.id===(t.getAttribute("data-for")||t.getAttribute("for")))&&n(e,t)}))};function k(t,e){e.value&&(e.type="button",e.disabled=t.disabled(e.value))}function _(t,e){var n=e.getAttribute("data-type")||e.getAttribute("type");"radio"===n||"checkbox"===n?(e.disabled=t.disabled(e.value),e.checked=!t.diff(e.value)):p[n]&&(e.setAttribute("type","number"),e.setAttribute("data-type",n),e.value=t[n])}function E(t,e){e.firstElementChild||(e.innerHTML="\n    <caption></caption><thead><tr>".concat(Array(8).join("</th><th>"),"</tr></thead>\n    <tbody>").concat(Array(7).join("<tr>".concat(Array(8).join('<td><button type="button"></button></td>'),"</tr>")),"</tbody>"));var n=new Date,r=t._date||n,i=r.getMonth(),o=t.parse("y-m-1 mon",r);e.caption.textContent="".concat(t.months[i],", ").concat(r.getFullYear()),h("th",e).forEach((function(e,n){return e.textContent=t.days[n]})),h("button",e).forEach((function(e){var r=o.getDate()===n.getDate()&&o.getMonth()===n.getMonth()&&o.getFullYear()===n.getFullYear(),a=null===t._date?r:!t.diff(o),u=o.getDate(),s=o.getMonth();e.textContent=u,e.value="".concat(o.getFullYear(),"-").concat(s+1,"-").concat(u),e.disabled=t.disabled(o),e.setAttribute("tabindex",Number(a)-1),e.setAttribute("data-adjacent",i!==s),e.setAttribute("aria-label","".concat(u,". ").concat(t.months[s])),e.setAttribute("aria-current",r&&"date"),function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:!this.hasAttribute(e);!n===t.hasAttribute(e)&&t[n?"setAttribute":"removeAttribute"](e,"")}(e,"autofocus",a),o.setDate(u+1)}))}function A(t,e){e.firstElementChild||(e._autofill=!0,e.innerHTML=t.months.map((function(t,e){return'<option value="y-'.concat(e+1,'-d"></option>')})).join("")),h(e.children).forEach((function(n,r){e._autofill&&(n.textContent=t.months[r]),n.disabled=t.disabled(n.value),n.selected=!t.diff(n.value)}))}return g})),window.customElements.define("core-datepicker",coreDatepicker);
 //# sourceMappingURL=core-datepicker.min.js.map

core-datepicker.test.cjs.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-datepicker v3.1.0 - Copyright (c) 2017-2021 NRK */
+/*! @nrk/core-datepicker v4.0.0 - Copyright (c) 2017-2021 NRK */
 'use strict';
@@ -48,2 +48,73 @@
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+var index_min = {exports: {}};
+
+(function (module, exports) {
+  !function (e, t) {
+    module.exports = t() ;
+  }(commonjsGlobal, function () {
+
+    var D = {
+      year: "FullYear",
+      month: "Month",
+      week: "Date",
+      day: "Date",
+      hour: "Hours",
+      minute: "Minutes",
+      second: "Seconds"
+    },
+        w = /([+-]\s*\d+)\s*(second|minute|hour|day|week|month|year)|(mon)|(tue)|(wed)|(thu)|(fri)|(sat)|(sun)/g,
+        M = /([-\dy]+)[-/.]([\dm]+)[-/.]([\dd]+)/,
+        p = /([\dh]+):([\dm]+):?([\ds]+)?/;
+    return function (e, t) {
+      if (isFinite(e)) return new Date(Number(e));
+      var n = String(e).toLowerCase(),
+          r = new Date(isFinite(t) && -1 === n.indexOf("now") ? Number(t) : Date.now()),
+          a = n.match(M) || [],
+          o = a[1];
+      void 0 === o && (o = "y");
+      var i = a[2];
+      void 0 === i && (i = "m");
+      var s = a[3];
+      void 0 === s && (s = "d");
+      var d = n.match(p) || [],
+          u = d[1];
+      void 0 === u && (u = "h");
+      var h = d[2];
+      void 0 === h && (h = "m");
+      var m = d[3];
+      void 0 === m && (m = "s");
+      var c = {
+        year: o,
+        month: i,
+        day: s,
+        hour: u,
+        minute: h,
+        second: m
+      };
+      Object.keys(c).forEach(function (e) {
+        var t = "month" === e ? 1 : 0,
+            a = String(r["get" + D[e]]() + t);
+        c[e] = c[e].replace(/[^-\d]+/g, function (e, t, n) {
+          return t ? a.substr(a.length - n.length + t, e.length) : a.substr(0, Math.max(0, a.length - n.length + e.length));
+        }) - t;
+      });
+      var f = new Date(c.year, Math.min(12, c.month + 1), 0).getDate();
+
+      for (r.setFullYear(c.year, Math.min(11, c.month), Math.max(1, Math.min(f, c.day))), r.setHours(Math.min(24, c.hour), Math.min(59, c.minute), Math.min(59, c.second)); null !== (c = w.exec(n));) {
+        var g = c[2],
+            l = String(c[1]).replace(/\s/g, "") * ("week" === g ? 7 : 1),
+            v = c.slice(2).indexOf(c[0]),
+            y = r.getDate();
+        g ? r["set" + D[g]](r["get" + D[g]]() + l) : r.setDate(r.getDate() - (r.getDay() || 7) + v), "month" !== g && "year" !== g || y === r.getDate() || r.setDate(0);
+      }
+
+      return r;
+    };
+  });
+})(index_min);
+
+var parse = index_min.exports;
+
 function prop(selector, name) {
@@ -60,4 +131,4 @@ return browser.executeScript(function (selector, name) {
 
-var coreDatepicker = fs__default['default'].readFileSync(path__default['default'].resolve(__dirname, 'core-datepicker.min.js'), 'utf-8');
-var customElements = fs__default['default'].readFileSync(require.resolve('@webcomponents/custom-elements'), 'utf-8');
+var coreDatepicker = fs__default["default"].readFileSync(path__default["default"].resolve(__dirname, 'core-datepicker.min.js'), 'utf-8');
+var customElements = fs__default["default"].readFileSync(require.resolve('@webcomponents/custom-elements'), 'utf-8');
 
@@ -68,2 +139,9 @@ var pad = function pad(val) {
 
+var YEAR = '2019';
+var MONTH = '04';
+var DAY = '30';
+var HOUR = '12';
+var MINUTES = '44';
+var SECONDS = '56';
+var TIMESTAMP = "".concat(YEAR, "-").concat(MONTH, "-").concat(DAY, "T").concat(HOUR, ":").concat(MINUTES, ":").concat(SECONDS, "Z");
 describe('core-datepicker', function () {
@@ -93,3 +171,3 @@ beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
   })));
-  it('sets up properties', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+  it('sets up properties from date-attribute', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
     var hour;
@@ -101,23 +179,23 @@ return regeneratorRuntime.wrap(function _callee2$(_context2) {
             _context2.next = 2;
-            return browser.executeScript(function () {
-              document.body.innerHTML = "\n        <core-datepicker timestamp=\"".concat(new Date('2019-04-30T12:44:56Z').getTime(), "\">\n        </core-datepicker>\n      ");
-            });
+            return browser.executeScript(function (TIMESTAMP) {
+              document.body.innerHTML = "\n        <core-datepicker date=\"".concat(new Date(TIMESTAMP).getTime(), "\">\n        </core-datepicker>\n      ");
+            }, TIMESTAMP);
 
           case 2:
             _context2.next = 4;
-            return expect(prop('core-datepicker', 'year')).toEqual('2019');
+            return expect(prop('core-datepicker', 'year')).toEqual(YEAR);
 
           case 4:
             _context2.next = 6;
-            return expect(prop('core-datepicker', 'month')).toEqual('04');
+            return expect(prop('core-datepicker', 'month')).toEqual(MONTH);
 
           case 6:
             _context2.next = 8;
-            return expect(prop('core-datepicker', 'day')).toEqual('30');
+            return expect(prop('core-datepicker', 'day')).toEqual(DAY);
 
           case 8:
             _context2.next = 10;
-            return browser.executeScript(function () {
-              return new Date('2019-04-30T12:44:56Z').getHours();
-            });
+            return browser.executeScript(function (TIMESTAMP) {
+              return new Date(TIMESTAMP).getHours();
+            }, TIMESTAMP);
 
@@ -131,7 +209,7 @@ case 10:
             _context2.next = 15;
-            return expect(prop('core-datepicker', 'minute')).toEqual('44');
+            return expect(prop('core-datepicker', 'minute')).toEqual(MINUTES);
 
           case 15:
             _context2.next = 17;
-            return expect(prop('core-datepicker', 'second')).toEqual('56');
+            return expect(prop('core-datepicker', 'second')).toEqual(SECONDS);
 
@@ -153,4 +231,3 @@ case 17:
   })));
-  it('sets input values from timestamp', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-    var hours, timestamp;
+  it('does not have a value when set up without date-attribute', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
     return regeneratorRuntime.wrap(function _callee3$(_context3) {
@@ -162,3 +239,3 @@ while (1) {
             return browser.executeScript(function () {
-              document.body.innerHTML = "\n        <core-datepicker timestamp=\"".concat(new Date('2019-04-30T10:44:56Z').getTime(), "\">\n          <input type=\"year\">\n          <input type=\"month\">\n          <input type=\"day\">\n          <input type=\"hour\">\n          <input type=\"minute\">\n          <input type=\"second\">\n          <input type=\"timestamp\">\n        </core-datepicker>\n      ");
+              document.body.innerHTML = "\n        <core-datepicker>\n        </core-datepicker>\n      ";
             });
@@ -168,66 +245,224 @@
             _context3.next = 4;
-            return expect(prop('input[data-type="year"]', 'value')).toEqual('2019');
+            return expect(prop('core-datepicker', 'year')).toEqual('null');
 
           case 4:
             _context3.next = 6;
-            return expect(prop('input[data-type="year"]', 'type')).toEqual('number');
+            return expect(prop('core-datepicker', 'month')).toEqual('null');
 
           case 6:
             _context3.next = 8;
-            return expect(prop('input[data-type="month"]', 'value')).toEqual('04');
+            return expect(prop('core-datepicker', 'day')).toEqual('null');
 
           case 8:
             _context3.next = 10;
-            return expect(prop('input[data-type="month"]', 'type')).toEqual('number');
+            return expect(prop('core-datepicker', 'hour')).toEqual('null');
 
           case 10:
             _context3.next = 12;
-            return expect(prop('input[data-type="day"]', 'value')).toEqual('30');
+            return expect(prop('core-datepicker', 'minute')).toEqual('null');
 
           case 12:
             _context3.next = 14;
-            return expect(prop('input[data-type="day"]', 'type')).toEqual('number');
+            return expect(prop('core-datepicker', 'second')).toEqual('null');
 
           case 14:
             _context3.next = 16;
+            return expect(prop('core-datepicker', 'timestamp')).toEqual('null');
+
+          case 16:
+            _context3.next = 18;
+            return expect(prop('core-datepicker', 'date')).toEqual('null');
+
+          case 18:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('supports simple-date-parse literals in date-attribute', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    var inputVal, parsedNow;
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            inputVal = 'now';
+            parsedNow = parse(inputVal);
+            _context4.next = 4;
+            return browser.executeScript(function (inputVal) {
+              document.body.innerHTML = "\n        <core-datepicker date=\"".concat(inputVal, "\">\n        </core-datepicker>\n      ");
+            }, inputVal);
+
+          case 4:
+            _context4.next = 6;
+            return expect(prop('core-datepicker', 'year')).toEqual(String(parsedNow.getFullYear()));
+
+          case 6:
+            _context4.next = 8;
+            return expect(prop('core-datepicker', 'month')).toEqual(pad(parsedNow.getMonth() + 1));
+
+          case 8:
+            _context4.next = 10;
+            return expect(prop('core-datepicker', 'day')).toEqual(pad(parsedNow.getDate()));
+
+          case 10:
+            _context4.next = 12;
+            return expect(prop('core-datepicker', 'hour')).toEqual(pad(String(parsedNow.getHours())));
+
+          case 12:
+            _context4.next = 14;
+            return expect(prop('core-datepicker', 'minute')).toEqual(pad(parsedNow.getMinutes()));
+
+          case 14:
+            _context4.next = 16;
+            return expect(prop('core-datepicker', 'second')).toEqual(pad(parsedNow.getSeconds()));
+
+          case 16:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  }))); // handle removeAttribute('date') (set values to null), don't parse
+
+  it('resets value when date-attribute is removed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+    return regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _context5.next = 2;
             return browser.executeScript(function () {
-              return new Date('2019-04-30T10:44:56Z').getHours();
+              document.body.innerHTML = "\n        <core-datepicker date=\"now\">\n          <table></table>\n        </core-datepicker>\n      ";
             });
 
+          case 2:
+            _context5.next = 4;
+            return expect(prop('core-datepicker', 'year')).toEqual(String(parse('now').getFullYear()));
+
+          case 4:
+            _context5.next = 6;
+            return browser.wait(ExpectedConditions.presenceOf($('core-datepicker table button')));
+
+          case 6:
+            _context5.next = 8;
+            return browser.executeScript(function () {
+              document.querySelector('core-datepicker').removeAttribute('date');
+            });
+
+          case 8:
+            _context5.next = 10;
+            return expect(prop('core-datepicker', 'year')).toEqual('null');
+
+          case 10:
+            _context5.next = 12;
+            return expect(prop('core-datepicker', 'month')).toEqual('null');
+
+          case 12:
+            _context5.next = 14;
+            return expect(prop('core-datepicker', 'day')).toEqual('null');
+
+          case 14:
+            _context5.next = 16;
+            return expect(prop('core-datepicker', 'hour')).toEqual('null');
+
           case 16:
-            hours = _context3.sent;
-            _context3.next = 19;
-            return expect(prop('input[data-type="hour"]', 'value')).toEqual(pad(String(hours)));
+            _context5.next = 18;
+            return expect(prop('core-datepicker', 'minute')).toEqual('null');
 
+          case 18:
+            _context5.next = 20;
+            return expect(prop('core-datepicker', 'second')).toEqual('null');
+
+          case 20:
+            _context5.next = 22;
+            return expect(prop('core-datepicker', 'timestamp')).toEqual('null');
+
+          case 22:
+            _context5.next = 24;
+            return expect(prop('core-datepicker', 'date')).toEqual('null');
+
+          case 24:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('sets input values from date-attribute', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+    var hour, timestamp;
+    return regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _context6.next = 2;
+            return browser.executeScript(function (TIMESTAMP) {
+              document.body.innerHTML = "\n        <core-datepicker date=\"".concat(new Date(TIMESTAMP).getTime(), "\">\n          <input type=\"year\">\n          <input type=\"month\">\n          <input type=\"day\">\n          <input type=\"hour\">\n          <input type=\"minute\">\n          <input type=\"second\">\n          <input type=\"timestamp\">\n        </core-datepicker>\n      ");
+            }, TIMESTAMP);
+
+          case 2:
+            _context6.next = 4;
+            return expect(prop('input[data-type="year"]', 'value')).toEqual(YEAR);
+
+          case 4:
+            _context6.next = 6;
+            return expect(prop('input[data-type="year"]', 'type')).toEqual('number');
+
+          case 6:
+            _context6.next = 8;
+            return expect(prop('input[data-type="month"]', 'value')).toEqual(MONTH);
+
+          case 8:
+            _context6.next = 10;
+            return expect(prop('input[data-type="month"]', 'type')).toEqual('number');
+
+          case 10:
+            _context6.next = 12;
+            return expect(prop('input[data-type="day"]', 'value')).toEqual(DAY);
+
+          case 12:
+            _context6.next = 14;
+            return expect(prop('input[data-type="day"]', 'type')).toEqual('number');
+
+          case 14:
+            _context6.next = 16;
+            return browser.executeScript(function (TIMESTAMP) {
+              return new Date(TIMESTAMP).getHours();
+            }, TIMESTAMP);
+
+          case 16:
+            hour = _context6.sent;
+            _context6.next = 19;
+            return expect(prop('input[data-type="hour"]', 'value')).toEqual(pad(String(hour)));
+
           case 19:
-            _context3.next = 21;
+            _context6.next = 21;
             return expect(prop('input[data-type="hour"]', 'type')).toEqual('number');
 
           case 21:
-            _context3.next = 23;
-            return expect(prop('input[data-type="minute"]', 'value')).toEqual('44');
+            _context6.next = 23;
+            return expect(prop('input[data-type="minute"]', 'value')).toEqual(MINUTES);
 
           case 23:
-            _context3.next = 25;
+            _context6.next = 25;
             return expect(prop('input[data-type="minute"]', 'type')).toEqual('number');
 
           case 25:
-            _context3.next = 27;
-            return expect(prop('input[data-type="second"]', 'value')).toEqual('56');
+            _context6.next = 27;
+            return expect(prop('input[data-type="second"]', 'value')).toEqual(SECONDS);
 
           case 27:
-            _context3.next = 29;
+            _context6.next = 29;
             return expect(prop('input[data-type="second"]', 'type')).toEqual('number');
 
           case 29:
-            _context3.next = 31;
+            _context6.next = 31;
             return prop('core-datepicker', 'timestamp');
 
           case 31:
-            timestamp = _context3.sent;
-            _context3.next = 34;
+            timestamp = _context6.sent;
+            _context6.next = 34;
             return expect(prop('input[data-type="timestamp"]', 'value')).toEqual(timestamp);
 
           case 34:
-            _context3.next = 36;
+            _context6.next = 36;
             return expect(prop('input[data-type="timestamp"]', 'type')).toEqual('number');
@@ -237,14 +472,14 @@
           case "end":
-            return _context3.stop();
+            return _context6.stop();
         }
       }
-    }, _callee3);
+    }, _callee6);
   })));
-  it('populates empty select with months', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+  it('populates empty select with months', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
     var i;
-    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+    return regeneratorRuntime.wrap(function _callee7$(_context7) {
       while (1) {
-        switch (_context4.prev = _context4.next) {
+        switch (_context7.prev = _context7.next) {
           case 0:
-            _context4.next = 2;
+            _context7.next = 2;
             return browser.executeScript(function () {
@@ -255,7 +490,7 @@ document.body.innerHTML = "\n        <core-datepicker>\n          <select></select>\n        </core-datepicker>\n      ";
           case 2:
-            _context4.next = 4;
+            _context7.next = 4;
             return browser.wait(ExpectedConditions.presenceOf($('core-datepicker select option')));
 
           case 4:
-            _context4.next = 6;
+            _context7.next = 6;
             return expect(prop('core-datepicker select', 'childElementCount')).toEqual('12');
@@ -268,7 +503,7 @@
             if (!(i <= 12)) {
-              _context4.next = 13;
+              _context7.next = 13;
               break;
             }
 
-            _context4.next = 10;
+            _context7.next = 10;
             return expect(prop("option:nth-child(".concat(i, ")"), 'value')).toEqual("y-".concat(i, "-d"));
@@ -278,51 +513,51 @@
             i++;
-            _context4.next = 7;
+            _context7.next = 7;
             break;
 
           case 13:
-            _context4.next = 15;
+            _context7.next = 15;
             return expect(prop('option:nth-child(1)', 'textContent')).toEqual('januar');
 
           case 15:
-            _context4.next = 17;
+            _context7.next = 17;
             return expect(prop('option:nth-child(2)', 'textContent')).toEqual('februar');
 
           case 17:
-            _context4.next = 19;
+            _context7.next = 19;
             return expect(prop('option:nth-child(3)', 'textContent')).toEqual('mars');
 
           case 19:
-            _context4.next = 21;
+            _context7.next = 21;
             return expect(prop('option:nth-child(4)', 'textContent')).toEqual('april');
 
           case 21:
-            _context4.next = 23;
+            _context7.next = 23;
             return expect(prop('option:nth-child(5)', 'textContent')).toEqual('mai');
 
           case 23:
-            _context4.next = 25;
+            _context7.next = 25;
             return expect(prop('option:nth-child(6)', 'textContent')).toEqual('juni');
 
           case 25:
-            _context4.next = 27;
+            _context7.next = 27;
             return expect(prop('option:nth-child(7)', 'textContent')).toEqual('juli');
 
           case 27:
-            _context4.next = 29;
+            _context7.next = 29;
             return expect(prop('option:nth-child(8)', 'textContent')).toEqual('august');
 
           case 29:
-            _context4.next = 31;
+            _context7.next = 31;
             return expect(prop('option:nth-child(9)', 'textContent')).toEqual('september');
 
           case 31:
-            _context4.next = 33;
+            _context7.next = 33;
             return expect(prop('option:nth-child(10)', 'textContent')).toEqual('oktober');
 
           case 33:
-            _context4.next = 35;
+            _context7.next = 35;
             return expect(prop('option:nth-child(11)', 'textContent')).toEqual('november');
 
           case 35:
-            _context4.next = 37;
+            _context7.next = 37;
             return expect(prop('option:nth-child(12)', 'textContent')).toEqual('desember');
@@ -332,13 +567,13 @@
           case "end":
-            return _context4.stop();
+            return _context7.stop();
         }
       }
-    }, _callee4);
+    }, _callee7);
   })));
-  it('re-uses custom select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
-    return regeneratorRuntime.wrap(function _callee5$(_context5) {
+  it('re-uses custom select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+    return regeneratorRuntime.wrap(function _callee8$(_context8) {
       while (1) {
-        switch (_context5.prev = _context5.next) {
+        switch (_context8.prev = _context8.next) {
           case 0:
-            _context5.next = 2;
+            _context8.next = 2;
             return browser.executeScript(function () {
@@ -349,15 +584,15 @@ document.body.innerHTML = "\n        <core-datepicker>\n          <select>\n            <option>---</option>\n            <option value=\"2016-m-d\">Set year to 2016</option>\n            <option value=\"19yy-1-1\">Back 100 years and set to January 1st.</option>\n            <option value=\"1985-12-19\">December 19, 1985</option>\n          </select>\n        </core-datepicker>\n      ";
           case 2:
-            _context5.next = 4;
+            _context8.next = 4;
             return expect(prop('select', 'childElementCount')).toEqual('4');
 
           case 4:
-            _context5.next = 6;
+            _context8.next = 6;
             return expect(prop('option:nth-child(1)', 'value')).toEqual('---');
 
           case 6:
-            _context5.next = 8;
+            _context8.next = 8;
             return expect(prop('option:nth-child(2)', 'value')).toEqual('2016-m-d');
 
           case 8:
-            _context5.next = 10;
+            _context8.next = 10;
             return expect(prop('option:nth-child(3)', 'value')).toEqual('19yy-1-1');
@@ -367,29 +602,29 @@
           case "end":
-            return _context5.stop();
+            return _context8.stop();
         }
       }
-    }, _callee5);
+    }, _callee8);
   })));
-  it('populates empty table', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+  it('populates empty table', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
     var days, i;
-    return regeneratorRuntime.wrap(function _callee6$(_context6) {
+    return regeneratorRuntime.wrap(function _callee9$(_context9) {
       while (1) {
-        switch (_context6.prev = _context6.next) {
+        switch (_context9.prev = _context9.next) {
           case 0:
-            _context6.next = 2;
+            _context9.next = 2;
             return browser.executeScript(function () {
-              document.body.innerHTML = "\n        <core-datepicker timestamp=\"".concat(new Date('2019-01-01T12:00:00Z').getTime(), "\">\n          <table></table>\n        </core-datepicker>\n      ");
+              document.body.innerHTML = "\n        <core-datepicker date=\"".concat(new Date('2019-01-01T12:00:00Z').getTime(), "\">\n          <table></table>\n        </core-datepicker>\n      ");
             });
 
           case 2:
-            _context6.next = 4;
+            _context9.next = 4;
             return browser.wait(ExpectedConditions.presenceOf($('core-datepicker table button')));
 
           case 4:
-            _context6.next = 6;
+            _context9.next = 6;
             return prop('core-datepicker', 'days');
 
           case 6:
-            days = _context6.sent.split(',');
-            _context6.next = 9;
+            days = _context9.sent.split(',');
+            _context9.next = 9;
             return expect(days.length).toEqual(7);
@@ -402,7 +637,7 @@
             if (!(i <= 7)) {
-              _context6.next = 16;
+              _context9.next = 16;
               break;
             }
 
-            _context6.next = 13;
+            _context9.next = 13;
             return expect(prop("thead tr th:nth-child(".concat(i, ")"), 'textContent')).toEqual(days[i - 1]);
@@ -412,11 +647,11 @@
             i++;
-            _context6.next = 10;
+            _context9.next = 10;
             break;
 
           case 16:
-            _context6.next = 18;
+            _context9.next = 18;
             return expect($$('table td button[data-adjacent="false"]').count()).toEqual(31);
 
           case 18:
-            _context6.next = 20;
+            _context9.next = 20;
             return expect(prop('button[autofocus]', 'textContent')).toEqual('1');
@@ -426,28 +661,28 @@
           case "end":
-            return _context6.stop();
+            return _context9.stop();
         }
       }
-    }, _callee6);
+    }, _callee9);
   })));
-  it('marks today\'s date in table', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+  it('marks today\'s date in table', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
     var browserDate;
-    return regeneratorRuntime.wrap(function _callee7$(_context7) {
+    return regeneratorRuntime.wrap(function _callee10$(_context10) {
       while (1) {
-        switch (_context7.prev = _context7.next) {
+        switch (_context10.prev = _context10.next) {
           case 0:
-            _context7.next = 2;
+            _context10.next = 2;
             return browser.executeScript(function () {
-              document.body.innerHTML = "\n        <core-datepicker timestamp=\"".concat(new Date().getTime(), "\">\n          <table></table>\n        </core-datepicker>\n      ");
+              document.body.innerHTML = "\n        <core-datepicker date=\"".concat(new Date().getTime(), "\">\n          <table></table>\n        </core-datepicker>\n      ");
             });
 
           case 2:
-            _context7.next = 4;
+            _context10.next = 4;
             return browser.wait(ExpectedConditions.presenceOf($('core-datepicker table button')));
 
           case 4:
-            _context7.next = 6;
+            _context10.next = 6;
             return expect($('button[aria-current="date"]').isPresent()).toEqual(true);
 
           case 6:
-            _context7.next = 8;
+            _context10.next = 8;
             return browser.executeScript(function () {
@@ -458,4 +693,4 @@ return new Date().getDate();
           case 8:
-            browserDate = _context7.sent;
-            _context7.next = 11;
+            browserDate = _context10.sent;
+            _context10.next = 11;
             return expect(prop('button[aria-current="date"]', 'textContent')).toEqual(String(browserDate));
@@ -465,31 +700,31 @@
           case "end":
-            return _context7.stop();
+            return _context10.stop();
         }
       }
-    }, _callee7);
+    }, _callee10);
   })));
-  it('changes date on day clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
-    return regeneratorRuntime.wrap(function _callee8$(_context8) {
+  it('changes date on day clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11() {
+    return regeneratorRuntime.wrap(function _callee11$(_context11) {
       while (1) {
-        switch (_context8.prev = _context8.next) {
+        switch (_context11.prev = _context11.next) {
           case 0:
-            _context8.next = 2;
+            _context11.next = 2;
             return browser.executeScript(function () {
-              document.body.innerHTML = "\n        <core-datepicker timestamp=\"".concat(new Date('2019-01-01T12:00:00Z').getTime(), "\">\n          <table></table>\n        </core-datepicker>\n      ");
+              document.body.innerHTML = "\n        <core-datepicker date=\"".concat(new Date('2019-01-01T12:00:00Z').getTime(), "\">\n          <table></table>\n        </core-datepicker>\n      ");
             });
 
           case 2:
-            _context8.next = 4;
+            _context11.next = 4;
             return browser.wait(ExpectedConditions.presenceOf($('core-datepicker table button')));
 
           case 4:
-            _context8.next = 6;
+            _context11.next = 6;
             return expect(prop('button[autofocus]', 'textContent')).toEqual('1');
 
           case 6:
-            _context8.next = 8;
+            _context11.next = 8;
             return $('tbody tr:nth-child(2) td:nth-child(5) button').click();
 
           case 8:
-            _context8.next = 10;
+            _context11.next = 10;
             return expect(prop('button[autofocus]', 'textContent')).toEqual('11');
@@ -499,15 +734,71 @@
           case "end":
-            return _context8.stop();
+            return _context11.stop();
         }
       }
-    }, _callee8);
+    }, _callee11);
   })));
-  it('changes month names', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
+  it('changes date and focus on keyboard navigation as expected in adjacent table', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+    var activeElementVal;
+    return regeneratorRuntime.wrap(function _callee12$(_context12) {
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            _context12.next = 2;
+            return browser.executeScript(function () {
+              document.body.innerHTML = "\n        <core-datepicker id=\"focus-datepicker\" date=\"".concat(new Date('2019-01-01T12:00:00Z').getTime(), "\">\n        </core-datepicker>\n        <table data-for=\"focus-datepicker\"></table>\n      ");
+            });
+
+          case 2:
+            _context12.next = 4;
+            return browser.wait(ExpectedConditions.presenceOf($('core-datepicker + table button')));
+
+          case 4:
+            _context12.next = 6;
+            return $('button[autofocus]').click();
+
+          case 6:
+            _context12.next = 8;
+            return browser.wait(function () {
+              return browser.executeScript(function () {
+                return document.activeElement.value;
+              });
+            });
+
+          case 8:
+            activeElementVal = _context12.sent;
+            _context12.next = 11;
+            return expect(activeElementVal).toEqual('2019-1-1');
+
+          case 11:
+            _context12.next = 13;
+            return $('button[autofocus]').sendKeys(protractor.Key.ARROW_RIGHT);
+
+          case 13:
+            _context12.next = 15;
+            return browser.wait(function () {
+              return browser.executeScript(function () {
+                return document.activeElement.value;
+              });
+            });
+
+          case 15:
+            activeElementVal = _context12.sent;
+            _context12.next = 18;
+            return expect(activeElementVal).toEqual('2019-1-2');
+
+          case 18:
+          case "end":
+            return _context12.stop();
+        }
+      }
+    }, _callee12);
+  })));
+  it('changes month names', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
     var months, i;
-    return regeneratorRuntime.wrap(function _callee9$(_context9) {
+    return regeneratorRuntime.wrap(function _callee13$(_context13) {
       while (1) {
-        switch (_context9.prev = _context9.next) {
+        switch (_context13.prev = _context13.next) {
           case 0:
             months = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'oktober', 'november', 'december'];
-            _context9.next = 3;
+            _context13.next = 3;
             return browser.executeScript(function (months) {
@@ -518,7 +809,7 @@ document.body.innerHTML = "\n        <core-datepicker months=\"".concat(months.join(), "\">\n          <select></select>\n        </core-datepicker>\n      ");
           case 3:
-            _context9.next = 5;
+            _context13.next = 5;
             return browser.wait(ExpectedConditions.presenceOf($('core-datepicker select option')));
 
           case 5:
-            _context9.next = 7;
+            _context13.next = 7;
             return expect(prop('select', 'childElementCount')).toEqual('12');
@@ -531,7 +822,7 @@
             if (!(i <= 12)) {
-              _context9.next = 14;
+              _context13.next = 14;
               break;
             }
 
-            _context9.next = 11;
+            _context13.next = 11;
             return expect(prop("option:nth-child(".concat(i, ")"), 'textContent')).toEqual(months[i - 1]);
@@ -541,3 +832,3 @@
             i++;
-            _context9.next = 8;
+            _context13.next = 8;
             break;
@@ -547,15 +838,15 @@
           case "end":
-            return _context9.stop();
+            return _context13.stop();
         }
       }
-    }, _callee9);
+    }, _callee13);
   })));
-  it('changes day names', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
+  it('changes day names', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
     var days, i;
-    return regeneratorRuntime.wrap(function _callee10$(_context10) {
+    return regeneratorRuntime.wrap(function _callee14$(_context14) {
       while (1) {
-        switch (_context10.prev = _context10.next) {
+        switch (_context14.prev = _context14.next) {
           case 0:
             days = ['abc', 'def', 'ghi', 'jkl', 'mno', 'pqr', 'stu'];
-            _context10.next = 3;
+            _context14.next = 3;
             return browser.executeScript(function (days) {
@@ -566,7 +857,7 @@ document.body.innerHTML = "\n        <core-datepicker days=\"".concat(days.join(), "\">\n          <table></table>\n        </core-datepicker>\n      ");
           case 3:
-            _context10.next = 5;
+            _context14.next = 5;
             return browser.wait(ExpectedConditions.presenceOf($('core-datepicker table thead')));
 
           case 5:
-            _context10.next = 7;
+            _context14.next = 7;
             return expect(prop('table thead tr', 'childElementCount')).toEqual('7');
@@ -579,7 +870,7 @@
             if (!(i <= 7)) {
-              _context10.next = 14;
+              _context14.next = 14;
               break;
             }
 
-            _context10.next = 11;
+            _context14.next = 11;
             return expect(prop("thead tr th:nth-child(".concat(i, ")"), 'textContent')).toEqual(days[i - 1]);
@@ -589,3 +880,3 @@
             i++;
-            _context10.next = 8;
+            _context14.next = 8;
             break;
@@ -595,15 +886,15 @@
           case "end":
-            return _context10.stop();
+            return _context14.stop();
         }
       }
-    }, _callee10);
+    }, _callee14);
   })));
-  it('disables elements from function', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11() {
-    return regeneratorRuntime.wrap(function _callee11$(_context11) {
+  it('disables elements from function', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15() {
+    return regeneratorRuntime.wrap(function _callee15$(_context15) {
       while (1) {
-        switch (_context11.prev = _context11.next) {
+        switch (_context15.prev = _context15.next) {
           case 0:
-            _context11.next = 2;
+            _context15.next = 2;
             return browser.executeScript(function () {
-              document.body.innerHTML = "\n        <core-datepicker timestamp=\"".concat(new Date('2019-01-01T12:00:00Z').getTime(), "\">\n          <table></table>\n        </core-datepicker>\n      ");
+              document.body.innerHTML = "\n        <core-datepicker date=\"".concat(new Date('2019-01-01T12:00:00Z').getTime(), "\">\n          <table></table>\n        </core-datepicker>\n      ");
 
@@ -616,19 +907,19 @@ document.querySelector('core-datepicker').disabled = function (date) {
           case 2:
-            _context11.next = 4;
+            _context15.next = 4;
             return browser.wait(ExpectedConditions.presenceOf($('core-datepicker table button')));
 
           case 4:
-            _context11.next = 6;
+            _context15.next = 6;
             return expect(attr('tbody tr:nth-child(1) td:nth-child(1) button', 'disabled')).toMatch(/(null|false)/i);
 
           case 6:
-            _context11.next = 8;
+            _context15.next = 8;
             return expect($('button:not(disabled)[value="2018-12-31"]').isPresent()).toBeTruthy();
 
           case 8:
-            _context11.next = 10;
+            _context15.next = 10;
             return expect($('button:not(disabled)[value="2019-1-1"]').isPresent()).toBeTruthy();
 
           case 10:
-            _context11.next = 12;
+            _context15.next = 12;
             return expect($('button:disabled[value="2019-1-2"]').isPresent()).toBeTruthy();
@@ -638,16 +929,16 @@
           case "end":
-            return _context11.stop();
+            return _context15.stop();
         }
       }
-    }, _callee11);
+    }, _callee15);
   })));
-  it('triggers change event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+  it('triggers change event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16() {
     var time;
-    return regeneratorRuntime.wrap(function _callee12$(_context12) {
+    return regeneratorRuntime.wrap(function _callee16$(_context16) {
       while (1) {
-        switch (_context12.prev = _context12.next) {
+        switch (_context16.prev = _context16.next) {
           case 0:
-            _context12.next = 2;
+            _context16.next = 2;
             return browser.executeScript(function () {
-              document.body.innerHTML = "\n        <core-datepicker timestamp=\"".concat(new Date('2019-01-01T12:00:00Z').getTime(), "\">\n        </core-datepicker>\n      ");
+              document.body.innerHTML = "\n        <core-datepicker date=\"".concat(new Date('2019-01-01T12:00:00Z').getTime(), "\">\n        </core-datepicker>\n      ");
               document.addEventListener('datepicker.change', function (event) {
@@ -660,3 +951,3 @@ return window.time = event.detail.getTime();
           case 2:
-            _context12.next = 4;
+            _context16.next = 4;
             return browser.executeScript(function () {
@@ -667,4 +958,4 @@ return new Date('2019-01-02T12:00:00Z').getTime();
           case 4:
-            time = _context12.sent;
-            _context12.next = 7;
+            time = _context16.sent;
+            _context16.next = 7;
             return expect(browser.executeScript(function () {
@@ -676,23 +967,23 @@ return window.time;
           case "end":
-            return _context12.stop();
+            return _context16.stop();
         }
       }
-    }, _callee12);
+    }, _callee16);
   })));
-  it('triggers click day event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
-    return regeneratorRuntime.wrap(function _callee13$(_context13) {
+  it('triggers click day event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
+    return regeneratorRuntime.wrap(function _callee17$(_context17) {
       while (1) {
-        switch (_context13.prev = _context13.next) {
+        switch (_context17.prev = _context17.next) {
           case 0:
-            _context13.next = 2;
+            _context17.next = 2;
             return browser.executeScript(function () {
-              document.body.innerHTML = "\n        <core-datepicker timestamp=\"".concat(new Date().getTime(), "\">\n          <table></table>\n        </core-datepicker>\n      ");
+              document.body.innerHTML = "\n        <core-datepicker date=\"".concat(new Date().getTime(), "\">\n          <table></table>\n        </core-datepicker>\n      ");
             });
 
           case 2:
-            _context13.next = 4;
+            _context17.next = 4;
             return browser.wait(ExpectedConditions.presenceOf($('core-datepicker table button')));
 
           case 4:
-            _context13.next = 6;
+            _context17.next = 6;
             return browser.executeScript(function () {
@@ -706,3 +997,3 @@ document.addEventListener('datepicker.click.day', function () {
           case 6:
-            _context13.next = 8;
+            _context17.next = 8;
             return expect(browser.executeScript(function () {
@@ -714,7 +1005,67 @@ return window.triggered;
           case "end":
-            return _context13.stop();
+            return _context17.stop();
         }
       }
-    }, _callee13);
+    }, _callee17);
   })));
+  it('does not trigger change event when clicking selected date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
+    return regeneratorRuntime.wrap(function _callee18$(_context18) {
+      while (1) {
+        switch (_context18.prev = _context18.next) {
+          case 0:
+            _context18.next = 2;
+            return browser.executeScript(function () {
+              document.body.innerHTML = "\n        <core-datepicker date=\"".concat(new Date('2019-01-01T12:00:00Z').getTime(), "\">\n          <table></table>\n        </core-datepicker>\n      ");
+              document.addEventListener('datepicker.change', function () {
+                return window.datepickerChange = true;
+              });
+            });
+
+          case 2:
+            _context18.next = 4;
+            return $('button[autofocus]').click();
+
+          case 4:
+            _context18.next = 6;
+            return expect(browser.executeScript(function () {
+              return window.datepickerChange;
+            })).toEqual(null);
+
+          case 6:
+          case "end":
+            return _context18.stop();
+        }
+      }
+    }, _callee18);
+  })));
+  it('does trigger change event when clicking selected date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
+    return regeneratorRuntime.wrap(function _callee19$(_context19) {
+      while (1) {
+        switch (_context19.prev = _context19.next) {
+          case 0:
+            _context19.next = 2;
+            return browser.executeScript(function () {
+              document.body.innerHTML = "\n        <core-datepicker>\n          <table></table>\n        </core-datepicker>\n      ";
+              document.addEventListener('datepicker.change', function () {
+                return window.datepickerChange = true;
+              });
+            });
+
+          case 2:
+            _context19.next = 4;
+            return $('button[tabindex="0"]').click();
+
+          case 4:
+            _context19.next = 6;
+            return expect(browser.executeScript(function () {
+              return window.datepickerChange;
+            })).toEqual(true);
+
+          case 6:
+          case "end":
+            return _context19.stop();
+        }
+      }
+    }, _callee19);
+  })));
 });

core-datepicker.test.js

@@ -0,4 +1,5 @@
+import parse from '@nrk/simple-date-parse'
 import fs from 'fs'
 import path from 'path'
-import { prop, attr } from '../test-utils'
+import { attr, prop } from '../test-utils'
 
@@ -9,2 +10,10 @@ const coreDatepicker = fs.readFileSync(path.resolve(__dirname, 'core-datepicker.min.js'), 'utf-8')
 
+const YEAR = '2019'
+const MONTH = '04'
+const DAY = '30'
+const HOUR = '12'
+const MINUTES = '44'
+const SECONDS = '56'
+const TIMESTAMP = `${YEAR}-${MONTH}-${DAY}T${HOUR}:${MINUTES}:${SECONDS}Z`
+
 describe('core-datepicker', () => {
@@ -17,16 +26,16 @@ beforeEach(async () => {
 
-  it('sets up properties', async () => {
-    await browser.executeScript(() => {
+  it('sets up properties from date-attribute', async () => {
+    await browser.executeScript((TIMESTAMP) => {
       document.body.innerHTML = `
-        <core-datepicker timestamp="${new Date('2019-04-30T12:44:56Z').getTime()}">
+        <core-datepicker date="${new Date(TIMESTAMP).getTime()}">
         </core-datepicker>
       `
-    })
-    await expect(prop('core-datepicker', 'year')).toEqual('2019')
-    await expect(prop('core-datepicker', 'month')).toEqual('04')
-    await expect(prop('core-datepicker', 'day')).toEqual('30')
-    const hour = await browser.executeScript(() => new Date('2019-04-30T12:44:56Z').getHours())
+    }, TIMESTAMP)
+    await expect(prop('core-datepicker', 'year')).toEqual(YEAR)
+    await expect(prop('core-datepicker', 'month')).toEqual(MONTH)
+    await expect(prop('core-datepicker', 'day')).toEqual(DAY)
+    const hour = await browser.executeScript((TIMESTAMP) => new Date(TIMESTAMP).getHours(), TIMESTAMP)
     await expect(prop('core-datepicker', 'hour')).toEqual(pad(String(hour)))
-    await expect(prop('core-datepicker', 'minute')).toEqual('44')
-    await expect(prop('core-datepicker', 'second')).toEqual('56')
+    await expect(prop('core-datepicker', 'minute')).toEqual(MINUTES)
+    await expect(prop('core-datepicker', 'second')).toEqual(SECONDS)
     await expect(prop('core-datepicker', 'days')).toEqual('man,tirs,ons,tors,fre,lør,søn')
@@ -36,6 +45,70 @@ await expect(prop('core-datepicker', 'months')).toEqual('januar,februar,mars,april,mai,juni,juli,august,september,oktober,november,desember')
 
-  it('sets input values from timestamp', async () => {
+  it('does not have a value when set up without date-attribute', async () => {
     await browser.executeScript(() => {
       document.body.innerHTML = `
-        <core-datepicker timestamp="${new Date('2019-04-30T10:44:56Z').getTime()}">
+        <core-datepicker>
+        </core-datepicker>
+      `
+    })
+    // 'null' because prop casts to string. Actual value is just null
+    await expect(prop('core-datepicker', 'year')).toEqual('null')
+    await expect(prop('core-datepicker', 'month')).toEqual('null')
+    await expect(prop('core-datepicker', 'day')).toEqual('null')
+    await expect(prop('core-datepicker', 'hour')).toEqual('null')
+    await expect(prop('core-datepicker', 'minute')).toEqual('null')
+    await expect(prop('core-datepicker', 'second')).toEqual('null')
+    await expect(prop('core-datepicker', 'timestamp')).toEqual('null')
+    await expect(prop('core-datepicker', 'date')).toEqual('null')
+  })
+
+  it('supports simple-date-parse literals in date-attribute', async () => {
+    const inputVal = 'now'
+    const parsedNow = parse(inputVal)
+
+    await browser.executeScript((inputVal) => {
+      document.body.innerHTML = `
+        <core-datepicker date="${inputVal}">
+        </core-datepicker>
+      `
+    }, inputVal)
+
+    await expect(prop('core-datepicker', 'year')).toEqual(String(parsedNow.getFullYear())) // Year is stringified for consistency and truthy '0'
+    await expect(prop('core-datepicker', 'month')).toEqual(pad(parsedNow.getMonth() + 1)) // Month is 0-indexed
+    await expect(prop('core-datepicker', 'day')).toEqual(pad(parsedNow.getDate()))
+    await expect(prop('core-datepicker', 'hour')).toEqual(pad(String(parsedNow.getHours())))
+    await expect(prop('core-datepicker', 'minute')).toEqual(pad(parsedNow.getMinutes()))
+    await expect(prop('core-datepicker', 'second')).toEqual(pad(parsedNow.getSeconds()))
+  })
+
+  // handle removeAttribute('date') (set values to null), don't parse
+
+  it('resets value when date-attribute is removed', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <core-datepicker date="now">
+          <table></table>
+        </core-datepicker>
+      `
+    })
+    await expect(prop('core-datepicker', 'year')).toEqual(String(parse('now').getFullYear()))
+    await browser.wait(ExpectedConditions.presenceOf($('core-datepicker table button')))
+    await browser.executeScript(() => {
+      document.querySelector('core-datepicker').removeAttribute('date')
+    })
+
+    // 'null' because prop casts to string. Actual value is just null
+    await expect(prop('core-datepicker', 'year')).toEqual('null')
+    await expect(prop('core-datepicker', 'month')).toEqual('null')
+    await expect(prop('core-datepicker', 'day')).toEqual('null')
+    await expect(prop('core-datepicker', 'hour')).toEqual('null')
+    await expect(prop('core-datepicker', 'minute')).toEqual('null')
+    await expect(prop('core-datepicker', 'second')).toEqual('null')
+    await expect(prop('core-datepicker', 'timestamp')).toEqual('null')
+    await expect(prop('core-datepicker', 'date')).toEqual('null')
+  })
+
+  it('sets input values from date-attribute', async () => {
+    await browser.executeScript((TIMESTAMP) => {
+      document.body.innerHTML = `
+        <core-datepicker date="${new Date(TIMESTAMP).getTime()}">
           <input type="year">
@@ -50,15 +123,15 @@ <input type="month">
       `
-    })
-    await expect(prop('input[data-type="year"]', 'value')).toEqual('2019')
+    }, TIMESTAMP)
+    await expect(prop('input[data-type="year"]', 'value')).toEqual(YEAR)
     await expect(prop('input[data-type="year"]', 'type')).toEqual('number')
-    await expect(prop('input[data-type="month"]', 'value')).toEqual('04')
+    await expect(prop('input[data-type="month"]', 'value')).toEqual(MONTH)
     await expect(prop('input[data-type="month"]', 'type')).toEqual('number')
-    await expect(prop('input[data-type="day"]', 'value')).toEqual('30')
+    await expect(prop('input[data-type="day"]', 'value')).toEqual(DAY)
     await expect(prop('input[data-type="day"]', 'type')).toEqual('number')
-    const hours = await browser.executeScript(() => new Date('2019-04-30T10:44:56Z').getHours())
-    await expect(prop('input[data-type="hour"]', 'value')).toEqual(pad(String(hours)))
+    const hour = await browser.executeScript((TIMESTAMP) => new Date(TIMESTAMP).getHours(), TIMESTAMP)
+    await expect(prop('input[data-type="hour"]', 'value')).toEqual(pad(String(hour)))
     await expect(prop('input[data-type="hour"]', 'type')).toEqual('number')
-    await expect(prop('input[data-type="minute"]', 'value')).toEqual('44')
+    await expect(prop('input[data-type="minute"]', 'value')).toEqual(MINUTES)
     await expect(prop('input[data-type="minute"]', 'type')).toEqual('number')
-    await expect(prop('input[data-type="second"]', 'value')).toEqual('56')
+    await expect(prop('input[data-type="second"]', 'value')).toEqual(SECONDS)
     await expect(prop('input[data-type="second"]', 'type')).toEqual('number')
@@ -119,3 +192,3 @@ const timestamp = await prop('core-datepicker', 'timestamp')
       document.body.innerHTML = `
-        <core-datepicker timestamp="${new Date('2019-01-01T12:00:00Z').getTime()}">
+        <core-datepicker date="${new Date('2019-01-01T12:00:00Z').getTime()}">
           <table></table>
@@ -138,3 +211,3 @@ </core-datepicker>
       document.body.innerHTML = `
-        <core-datepicker timestamp="${new Date().getTime()}">
+        <core-datepicker date="${new Date().getTime()}">
           <table></table>
@@ -154,3 +227,3 @@ </core-datepicker>
       document.body.innerHTML = `
-        <core-datepicker timestamp="${new Date('2019-01-01T12:00:00Z').getTime()}">
+        <core-datepicker date="${new Date('2019-01-01T12:00:00Z').getTime()}">
           <table></table>
@@ -166,2 +239,19 @@ </core-datepicker>
 
+  it('changes date and focus on keyboard navigation as expected in adjacent table', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <core-datepicker id="focus-datepicker" date="${new Date('2019-01-01T12:00:00Z').getTime()}">
+        </core-datepicker>
+        <table data-for="focus-datepicker"></table>
+      `
+    })
+    await browser.wait(ExpectedConditions.presenceOf($('core-datepicker + table button')))
+    await $('button[autofocus]').click()
+    let activeElementVal = await browser.wait(() => browser.executeScript(() => document.activeElement.value))
+    await expect(activeElementVal).toEqual('2019-1-1')
+    await $('button[autofocus]').sendKeys(protractor.Key.ARROW_RIGHT)
+    activeElementVal = await browser.wait(() => browser.executeScript(() => document.activeElement.value))
+    await expect(activeElementVal).toEqual('2019-1-2')
+  })
+
   it('changes month names', async () => {
@@ -202,3 +292,3 @@ const months = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'oktober', 'november', 'december']
       document.body.innerHTML = `
-        <core-datepicker timestamp="${new Date('2019-01-01T12:00:00Z').getTime()}">
+        <core-datepicker date="${new Date('2019-01-01T12:00:00Z').getTime()}">
           <table></table>
@@ -223,3 +313,3 @@ </core-datepicker>
       document.body.innerHTML = `
-        <core-datepicker timestamp="${new Date('2019-01-01T12:00:00Z').getTime()}">
+        <core-datepicker date="${new Date('2019-01-01T12:00:00Z').getTime()}">
         </core-datepicker>
@@ -237,3 +327,3 @@ `
       document.body.innerHTML = `
-        <core-datepicker timestamp="${new Date().getTime()}">
+        <core-datepicker date="${new Date().getTime()}">
           <table></table>
@@ -250,2 +340,28 @@ </core-datepicker>
   })
+
+  it('does not trigger change event when clicking selected date', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <core-datepicker date="${new Date('2019-01-01T12:00:00Z').getTime()}">
+          <table></table>
+        </core-datepicker>
+      `
+      document.addEventListener('datepicker.change', () => (window.datepickerChange = true))
+    })
+    await $('button[autofocus]').click()
+    await expect(browser.executeScript(() => window.datepickerChange)).toEqual(null)
+  })
+
+  it('does trigger change event when clicking selected date', async () => {
+    await browser.executeScript(() => {
+      document.body.innerHTML = `
+        <core-datepicker>
+          <table></table>
+        </core-datepicker>
+      `
+      document.addEventListener('datepicker.change', () => (window.datepickerChange = true))
+    })
+    await $('button[tabindex="0"]').click()
+    await expect(browser.executeScript(() => window.datepickerChange)).toEqual(true)
+  })
 })

jsx.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-datepicker v3.1.0 - Copyright (c) 2017-2021 NRK */
+/*! @nrk/core-datepicker v4.0.0 - Copyright (c) 2017-2021 NRK */
 'use strict';
@@ -142,2 +142,4 @@
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
@@ -414,12 +416,13 @@
     key: "attributeChangedCallback",
-    value: function attributeChangedCallback() {
-      if (!this._date) return; // Only render after connectedCallback and before disconnectedCallback
+    value: function attributeChangedCallback(attr, prev, next) {
+      if (!this.parentNode) return; // Only render after connectedCallback
 
       if (this.disabled(this.date) && !this.disabled(this._date)) return this.date = this._date; // Jump back
+      // Treat change between null and 0, either way, as a valid change for dispatching event
 
-      if (this.diff(this.date)) dispatchEvent(this, 'datepicker.change', this._date = this.date);
-      forEach('button', this, button);
-      forEach('select', this, select);
-      forEach('input', this, input);
-      forEach('table', this, table);
+      if (this.diff(this.date) || prev === null && next === '0' || prev === '0' && next === null) dispatchEvent(this, 'datepicker.change', this._date = this.date);
+      forEachController('button', this, setupButton);
+      forEachController('select', this, setupSelect);
+      forEachController('input', this, setupInput);
+      forEachController('table', this, setupTable);
     }
@@ -429,15 +432,23 @@ }, {
     value: function handleEvent(event) {
+      // Filter event and target
       if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey || event.type === 'keydown' && !KEYS[event.keyCode]) return;
       if (!this.contains(event.target) && !closest$1(event.target, "[for=\"".concat(this.id, "\"],[data-for=\"").concat(this.id, "\"]"))) return;
-      if (event.type === 'change') this.date = MASK[event.target.getAttribute('data-type')].replace('*', event.target.value);else if (event.type === 'click') {
-        var _button = closest$1(event.target, 'button[value]');
 
+      if (event.type === 'change') {
+        this.date = MASK[event.target.getAttribute('data-type')].replace('*', event.target.value);
+      } else if (event.type === 'click') {
+        var button = closest$1(event.target, 'button[value]');
+        var table = closest$1(event.target, 'table');
+        if (button) this.date = button.value;
+        if (button && table) dispatchEvent(this, 'datepicker.click.day');
+      } else if (event.type === 'keydown') {
         var _table = closest$1(event.target, 'table');
 
-        if (_button) this.date = _button.value;
-        if (_button && _table) dispatchEvent(this, 'datepicker.click.day');
-      } else if (event.type === 'keydown' && closest$1(event.target, 'table')) {
-        this.date = KEYS[event.keyCode];
-        this.querySelector('[autofocus]').focus();
-        event.preventDefault(); // Prevent scrolling
+        if (_table) {
+          this.date = KEYS[event.keyCode];
+
+          _table.querySelector('[autofocus]').focus();
+
+          event.preventDefault(); // Prevent scrolling
+        }
       }
@@ -453,3 +464,3 @@ }
     value: function parse(val, from) {
-      return _parse(val, from || this._date);
+      return _parse(val, from || this._date || Date.now());
     }
@@ -464,7 +475,7 @@ }, {
 
-      this._disabled = typeof fn === 'function' ? function (val) {
-        return fn(_this2.parse(val), _this2);
-      } : function () {
-        return fn;
-      }; // Auto parse dates
+      if (typeof fn !== 'function') this._disabled = function () {
+        return Boolean(fn);
+      };else this._disabled = function (val) {
+        return val !== null && fn(_this2.parse(val), _this2);
+      }; // null is always false / never disabled
 
@@ -476,4 +487,4 @@ this.attributeChangedCallback(); // Re-render
     get: function get() {
-      return String(this._date.getTime());
-    } // Stringify for consistency and for truthy '0'
+      return this._date ? this._date.getTime() : null;
+    } // Stringify for consistency with pad and for truthy '0'
 
@@ -483,3 +494,3 @@ }, {
     get: function get() {
-      return String(this._date.getFullYear());
+      return this._date ? String(this._date.getFullYear()) : null;
     }
@@ -489,3 +500,3 @@ }, {
     get: function get() {
-      return pad(this._date.getMonth() + 1);
+      return this._date ? pad(this._date.getMonth() + 1) : null;
     }
@@ -495,3 +506,3 @@ }, {
     get: function get() {
-      return pad(this._date.getDate());
+      return this._date ? pad(this._date.getDate()) : null;
     }
@@ -501,3 +512,3 @@ }, {
     get: function get() {
-      return pad(this._date.getHours());
+      return this._date ? pad(this._date.getHours()) : null;
     }
@@ -507,3 +518,3 @@ }, {
     get: function get() {
-      return pad(this._date.getMinutes());
+      return this._date ? pad(this._date.getMinutes()) : null;
     }
@@ -513,3 +524,3 @@ }, {
     get: function get() {
-      return pad(this._date.getSeconds());
+      return this._date ? pad(this._date.getSeconds()) : null;
     }
@@ -519,6 +530,15 @@ }, {
     get: function get() {
-      return _parse(this.getAttribute('timestamp') || this._date || Date.now());
+      var dateAttr = this.getAttribute('date');
+
+      if (!dateAttr) {
+        dateAttr = this.getAttribute('timestamp');
+        if (!dateAttr) return null;
+        this.removeAttribute('timestamp');
+        console.warn(this, 'uses deprecated `timestamp` attribute. Please use `date` as specified in the docs (https://static.nrk.no/core-components/latest/index.html?core-datepicker/readme.md). Note that the attribute has been removed to avoid confusion with the `date` attribute');
+      }
+
+      return this.parse(dateAttr);
     },
     set: function set(val) {
-      return this.setAttribute('timestamp', this.parse(val).getTime());
+      return val === null ? this.removeAttribute('date') : this.setAttribute('date', this.parse(val).getTime());
     }
@@ -544,3 +564,3 @@ }, {
     get: function get() {
-      return ['timestamp', 'months', 'days'];
+      return ['date', 'months', 'days'];
     }
@@ -556,9 +576,9 @@ }]);
 
-var forEach = function forEach(css, self, fn) {
+var forEachController = function forEachController(css, self, fn) {
   return [].forEach.call(document.getElementsByTagName(css), function (el) {
-    if (self.contains(el) || self.id === el.getAttribute(self.external)) fn(self, el);
+    if (self.contains(el) || self.id === (el.getAttribute('data-for') || el.getAttribute('for'))) fn(self, el);
   });
 };
 
-function button(self, el) {
+function setupButton(self, el) {
   if (!el.value) return; // Skip buttons without a set value
@@ -571,3 +591,3 @@
 
-function input(self, el) {
+function setupInput(self, el) {
   var type = el.getAttribute('data-type') || el.getAttribute('type');
@@ -587,3 +607,3 @@
 
-function table(self, table) {
+function setupTable(self, table) {
   if (!table.firstElementChild) {
@@ -594,6 +614,7 @@ table.innerHTML = "\n    <caption></caption><thead><tr>".concat(Array(8).join('</th><th>'), "</tr></thead>\n    <tbody>").concat(Array(7).join("<tr>".concat(Array(8).join('<td><button type="button"></button></td>'), "</tr>")), "</tbody>");
   var today = new Date();
-  var month = self.date.getMonth();
-  var day = self.parse('y-m-1 mon'); // Monday in first week of month
+  var date = self._date || today;
+  var month = date.getMonth();
+  var day = self.parse('y-m-1 mon', date); // Monday in first week of month
 
-  table.caption.textContent = "".concat(self.months[month], ", ").concat(self.year);
+  table.caption.textContent = "".concat(self.months[month], ", ").concat(date.getFullYear());
   queryAll('th', table).forEach(function (th, day) {
@@ -603,3 +624,4 @@ return th.textContent = self.days[day];
   queryAll('button', table).forEach(function (button) {
-    var isSelected = !self.diff(day);
+    var isToday = day.getDate() === today.getDate() && day.getMonth() === today.getMonth() && day.getFullYear() === today.getFullYear();
+    var isSelected = self._date === null ? isToday : !self.diff(day);
     var dayInMonth = day.getDate();
@@ -611,6 +633,6 @@ var dayMonth = day.getMonth();
     button.disabled = self.disabled(day);
-    button.tabIndex = isSelected - 1;
+    button.setAttribute('tabindex', Number(isSelected) - 1);
     button.setAttribute('data-adjacent', month !== dayMonth);
     button.setAttribute('aria-label', "".concat(dayInMonth, ". ").concat(self.months[dayMonth]));
-    button.setAttribute('aria-current', day.getDate() === today.getDate() && day.getMonth() === today.getMonth() && day.getFullYear() === today.getFullYear() && 'date');
+    button.setAttribute('aria-current', isToday && 'date');
     toggleAttribute(button, 'autofocus', isSelected);
@@ -621,3 +643,3 @@ day.setDate(dayInMonth + 1);
 
-function select(self, select) {
+function setupSelect(self, select) {
   if (!select.firstElementChild) {
@@ -637,3 +659,3 @@ select._autofill = true;
 
-var version = "3.1.0";
+var version = "4.0.0";
 
@@ -693,3 +715,3 @@ /**
   var tagName = (dashCase + "-" + (options.suffix || 'react')).replace(/\W+/g, '-').toLowerCase();
-  return function (superclass) {
+  return /*@__PURE__*/function (superclass) {
     function anonymous(props) {
@@ -765,3 +787,3 @@ var this$1$1 = this;
 
-      return React__default['default'].createElement(tagName, Object.keys(this.props).reduce(function (thisProps, propName) {
+      return React__default["default"].createElement(tagName, Object.keys(this.props).reduce(function (thisProps, propName) {
         if (skipProps.indexOf(propName) === -1) {
@@ -788,3 +810,3 @@ // Do not render customEvents and custom props as attributes
     return anonymous;
-  }(React__default['default'].Component);
+  }(React__default["default"].Component);
 }
@@ -791,0 +813,0 @@

package.json

@@ -5,3 +5,3 @@ {
   "author": "NRK <[e-mail]> (https://www.nrk.no/)",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "license": "MIT",
@@ -8,0 +8,0 @@ "main": "core-datepicker.cjs.js",

readme.md

@@ -27,25 +27,88 @@ # Core Datepicker
 
-## Example
+## Examples (Plain JS)
 
+#### Toggled calendar
+Toggled datepicker ([using core-toggle](/?core-toggle/readme.md)) 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.
+
 ```html
 <!-- demo -->
-<button class="my-toggle">Velg dato</button>
+<input type="text" placeholder="No date selected" id="toggled-datepicker-output">
+<button type="button">Show calendar</button>
+<core-toggle id="calendar-toggle" popup hidden class="my-popup">
+  <core-datepicker
+    id="toggled-datepicker"
+    days="Mon,Tue,Wed,Thu,Fri,Sat,Sun"
+    months="January,Febuary,March,April,May,June,July,August,September,October,November,December"
+  >
+    <table></table>
+  </core-datepicker>
+</core-toggle>
+<script>
+  // Update output
+  document.addEventListener('datepicker.change', function (event) {
+    if (event.target.id !== 'toggled-datepicker') return
+    document.getElementById('toggled-datepicker-output').value = event.target.date ? event.target.date.toLocaleString() : null
+  })
+  // Close toggle on click
+  document.addEventListener('datepicker.click.day', function (event) {
+    if (event.target.id !== 'toggled-datepicker') return
+    document.getElementById('calendar-toggle').setAttribute('hidden', true)
+    document.getElementById('toggled-datepicker-output').value = event.target.date ? event.target.date.toLocaleString() : null
+  })
+</script>
+```
+
+#### Adjacent calendar
+Datepicker with inline calendar
+
+Note: Table and buttons are outside of core-datepicker element, using `data-for`.
+
+```html
+<!-- demo -->
+<core-datepicker
+  id="adjacent-datepicker"
+></core-datepicker>
+<button type="button" data-for="adjacent-datepicker" value="-1 month">Previous month</button>
+<input id="adjacent-datepicker-output" placeholder="No date selected" readonly/>
+<button type="button" data-for="adjacent-datepicker" value="now">Today</button>
+<button type="button" data-for="adjacent-datepicker" value="+1 month">Next month</button>
+
+<table data-for="adjacent-datepicker"></table>
+<script>
+  // Update output
+  document.addEventListener('datepicker.change', function (event) {
+    if (event.target.id !== 'adjacent-datepicker') return
+    document.getElementById('adjacent-datepicker-output').value = event.target.date ? event.target.date.toLocaleString() : null
+  })
+</script>
+```
+
+#### All the things
+Extravagantly featured implementation to showcase most of what you can do out of the box
+
+```html
+<!-- demo -->
+<button type="button" class="my-toggle">Choose date</button>
 <core-toggle popup hidden class="my-popup">
-  <core-datepicker id="my-datepicker"
+  <core-datepicker
+    id="my-datepicker"
     days="Mon,Tue,Wed,Thu,Fri,Sat,Sun"
-    months="January,Febuary,March,April,May,June,July,August,September,October,November,December">
+    months="January,Febuary,March,April,May,June,July,August,September,October,November,December"
+  >
     <input type="timestamp">
     <fieldset>
-      <legend>Navigasjon</legend>
-      <button value="now">I dag</button>
-      <button value="now - 1 day">I går</button>
-      <button value="now + 1 day">I morgen</button>
-      <button value="- 1 week">Tilbake en uke</button>
-      <button value="+ 1 week">Fremover en uke</button>
-      <button value="now tuesday - 1 week">Tirsdag sist uke</button>
-      <button value="now + 10 years">Om ti år</button>
-      <button value="yy00-01-01 - 100 years">Forrige århundre</button>
+      <legend>Navigation</legend>
+      <button type="button" value="now">Today</button>
+      <button type="button" value="now - 1 day">Yesterday</button>
+      <button type="button" value="now + 1 day">Tomorrow</button>
+      <button type="button" value="- 1 week">Previous week</button>
+      <button type="button" value="+ 1 week">Next week</button>
+      <button type="button" value="now tuesday - 1 week">Tuesday last week</button>
+      <button type="button" value="now + 10 years">Add ten years</button>
+      <button type="button" value="yy00-01-01 - 100 years">Last century</button>
     </fieldset>
     <label>
-      År
+      Year
       <select>
@@ -58,26 +121,26 @@ <option value="2016-m-d">2016</option>
     </label>
-    <label>Måned<select></select></label>
+    <label>Month<select></select></label>
     <fieldset>
-      <legend>Måned</legend>
-      <label><input type="radio" name="my-months" value="y-1-d">Jan</label>
-      <label><input type="radio" name="my-months" value="y-2-d">Feb</label>
-      <label><input type="radio" name="my-months" value="y-3-d">Mars</label>
+      <legend>Month</legend>
+      <label><input type="radio" name="my-months" value="y-1-d">January</label>
+      <label><input type="radio" name="my-months" value="y-2-d">February</label>
+      <label><input type="radio" name="my-months" value="y-3-d">March</label>
       <label><input type="radio" name="my-months" value="y-4-d">April</label>
-      <label><input type="radio" name="my-months" value="y-5-d">Mai</label>
-      <label><input type="radio" name="my-months" value="y-6-d">Juni</label>
-      <label><input type="radio" name="my-months" value="y-7-d">Juli</label>
-      <label><input type="radio" name="my-months" value="y-8-d">Aug</label>
-      <label><input type="radio" name="my-months" value="y-9-d">Sep</label>
-      <label><input type="radio" name="my-months" value="y-10-d">Okt</label>
-      <label><input type="radio" name="my-months" value="y-11-d">Nov</label>
-      <label><input type="radio" name="my-months" value="y-12-d">Des</label>
+      <label><input type="radio" name="my-months" value="y-5-d">May</label>
+      <label><input type="radio" name="my-months" value="y-6-d">June</label>
+      <label><input type="radio" name="my-months" value="y-7-d">July</label>
+      <label><input type="radio" name="my-months" value="y-8-d">August</label>
+      <label><input type="radio" name="my-months" value="y-9-d">September</label>
+      <label><input type="radio" name="my-months" value="y-10-d">October</label>
+      <label><input type="radio" name="my-months" value="y-11-d">November</label>
+      <label><input type="radio" name="my-months" value="y-12-d">December</label>
     </fieldset>
-    <label><span>År</span><input type="year"></label>
-    <label><span>Måned</span><input type="month"></label>
+    <label><span>Year</span><input type="year"></label>
+    <label><span>Month</span><input type="month"></label>
     <fieldset>
-      <legend>Klokke</legend>
-      <label>Time<input type="hour"></label>
-      <label>Minutt<input type="minute"></label>
+      <legend>Clock</legend>
+      <label>Hour<input type="hour"></label>
+      <label>Minute<input type="minute"></label>
       <label>
-        <span>Time</span>
+        <span>Hour</span>
         <select>
@@ -94,6 +157,7 @@ <option>--</option>
 </core-toggle>
-<button data-for="my-datepicker" value="now">Nå</button>
-<button data-for="my-datepicker" value="+1 week">Neste uke</button>
+<button type="button" data-for="my-datepicker" value="now">Now</button>
+<button type="button" data-for="my-datepicker" value="now + 1 week">Next week</button>
+<button type="button" data-for="my-datepicker" value="+ 1 week">Add one week</button>
 <select data-for="my-datepicker">
-  <option>Tid</option>
+  <option>Hour</option>
   <option value="11:m">11</option>
@@ -104,5 +168,5 @@ <option value="12:m">12</option>
 <table data-for="my-datepicker"></table>
-<input type="text" id="my-datepicker-output">
+<input type="text" id="my-datepicker-output" placeholder="No date selected">
 <script>
-  // Update GUI
+  // Disable dates past one week from now
   document.getElementById('my-datepicker').disabled = (date) => {
@@ -120,5 +184,53 @@ var oneWeekFromNow = (new Date()).setDate(new Date().getDate() + 7)
 ```
+## Examples (React)
+#### Toggled calendar
 
+Toggled datepicker ([using core-toggle](/?core-toggle/readme.md)) with calendar to update value of input
+
 ```html
 <!-- demo -->
+<div id="react-basic-datepicker"></div>
+
+<script>
+  const BasicPicker = () => {
+    const [hiddenVal, setHiddenVal] = React.useState(true)
+    const [dateVal, setDateVal] = React.useState(null)
+
+    const handleToggle = (event) => { setHiddenVal(event.target.hidden) }
+    const handleDateChange = (event) => { setDateVal(event.target.date) }
+    const handleDateClick = (event) => {
+      setDateVal(event.target.date)
+      setHiddenVal(true)
+    }
+    return (
+      <>
+        <input type="text" readOnly value={dateVal ? dateVal.toLocaleDateString() : ''} placeholder="No date selected"/>
+        <button type="button">Choose date</button>
+        <CoreToggle
+          className="my-popup"
+          hidden={hiddenVal}
+          onToggle={handleToggle}
+          popup
+        >
+          <CoreDatepicker
+            date={dateVal}
+            onDatepickerChange={handleDateChange}
+            onDatepickerClickDay={handleDateClick}
+          >
+              <label>Year<input type="year" /></label>
+              <label>Month<select></select></label>
+              <table></table>
+          </CoreDatepicker>
+        </CoreToggle>
+      </>
+    )
+  }
+  ReactDOM.render(<BasicPicker />, document.getElementById('react-basic-datepicker'))
+</script>
+
+
+```
+#### React class
+```html
+<!-- demo -->
 <div id="jsx-datepicker"></div>
@@ -130,24 +242,33 @@ <script type="text/jsx">
       this.today = Date.now() - Date.now() % 864e3
-      this.state = { date: new Date() }
+      this.state = { date: null }
       this.onNow = this.onNow.bind(this)
       this.onChange = this.onChange.bind(this)
+      this.resetDate = this.resetDate.bind(this)
+      this.myRef = React.createRef();
     }
     onNow () { this.setState({ date: new Date() }) }
     onChange (event) { this.setState({ date: event.target.date }) }
+    resetDate () {
+      this.setState({ date: null })
+    }
+    getForwardRef (node) { return node }
     render () {
-      return <div>
-        <button>Velg dato JSX</button>
+      return <>
+        <button type="button">Choose date</button>
         <CoreToggle hidden popup className="my-popup">
           <CoreDatepicker
-            timestamp={this.state.date.getTime()}
+            date={this.state.date}
             disabled={(date) => date <= this.today}
-            onDatepickerChange={this.onChange}>
-              <label>År<input type="year" /></label>
-              <label>Måned<select></select></label>
+            onDatepickerChange={this.onChange}
+            forwardRef={this.myRef}
+          >
+              <label>Year <input type="year" /></label>
+              <label>Month <select></select></label>
               <table></table>
           </CoreDatepicker>
         </CoreToggle>
-        <button onClick={this.onNow}>I dag JSX</button>
-        <input type="text" readOnly value={this.state.date.toLocaleDateString()} />
-      </div>
+        <button type="button" onClick={this.onNow}>Today</button>
+        <button type="button" onClick={this.resetDate}>Reset</button>
+        <input type="text" readOnly value={this.state.date ? this.state.date.toLocaleDateString() : ''} placeholder="No date selected" />
+      </>
     }
@@ -172,3 +293,3 @@ }
 ```html
-<script src="https://static.nrk.no/core-components/major/7/core-datepicker/core-datepicker.min.js"></script>  <!-- Using static -->
+<script src="https://static.nrk.no/core-components/major/8/core-datepicker/core-datepicker.min.js"></script>  <!-- Using static -->
 ```
@@ -187,3 +308,3 @@
 <core-datepicker
-  timestamp="{String}"    <!-- Optional. Sets date from UNIX timestamp -->
+  date="{String}"         <!-- Optional. Uses simple-date-parse to set date from parseable value or natural language -->
   months="{String}"       <!-- Optional. Comma separated list of custom month names to be used. ("Jan,Feb,...") -->
@@ -223,5 +344,5 @@ days="{String}">        <!-- Optional. Comma separated list of custom weekday names to be used ("Man,Tir,Ons,...") -->
     <!-- Dates relative to today/now by using the keyword 'now' -->
-    <button value="now">I dag</button>
-    <button value="now - 1 day|week|month|year">I går/forrige uke/måned/år</button>
-    <button value="now + 1 day|week|month|year">I morgen/neste uke/måned/år</button>
+    <button type="button" value="now">I dag</button>
+    <button type="button" value="now - 1 day|week|month|year">I går/forrige uke/måned/år</button>
+    <button type="button" value="now + 1 day|week|month|year">I morgen/neste uke/måned/år</button>
 
@@ -231,3 +352,3 @@ <!-- Semi-specific dates -->
     <!-- digits of the year 0. Will set the date to 1st of January -->
-    <button value="yy00-01-01">Start of current century</button>
+    <button type="button" value="yy00-01-01">Start of current century</button>
   </fieldset>
@@ -266,12 +387,14 @@ </core-datepicker>
 
-<CoreDatepicker timestamp={String}                // Optional. Sets date from timestamp
-                months={String}                   // Optional. Comma separated list of custom month names to be used ("Jan,Feb,...")
-                days={String}                     // Optional. Comma separated list of custom weekday names to be used ("Man,Tir,Ons,...")
-                ref={(comp) => {}}                // Optional. Get reference to React component
-                forwardRef={(el) => {}}           // Optional. Get reference to underlying DOM custom element
-                onDatepickerChange={Function}     // Optional. See 'datepicker.change'
-                onDatepickerClickDay={Function}>  // Optional. See 'datepicker.click.day'
-  <input type="radio|checkbox|year|month|day|hour|minute|second|timestamp"/> // Same as with vanilla js
-  <select></select>                    // Same as with vanilla js
-  <table></table>                      // Same as with vanilla js
+<CoreDatepicker
+  date={String}                     // Optional. Uses simple-date-parse to set date from parseable value or natural language
+  months={String}                   // Optional. Comma separated list of custom month names to be used ("Jan,Feb,...")
+  days={String}                     // Optional. Comma separated list of custom weekday names to be used ("Man,Tir,Ons,...")
+  ref={(comp) => {}}                // Optional. Get reference to React component
+  forwardRef={(el) => {}}           // Optional. Get reference to underlying DOM custom element
+  onDatepickerChange={Function}     // Optional. See event 'datepicker.change'
+  onDatepickerClickDay={Function}   // Optional. See event 'datepicker.click.day'
+>
+  <input type="radio|checkbox|year|month|day|hour|minute|second|timestamp"/> // Same as with plain js
+  <select></select>                    // Same as with plain js
+  <table></table>                      // Same as with plain js
 </CoreDatepicker>
@@ -307,3 +430,4 @@ ```
 
-`@nrk/core-datepicker` defaults to Norwegian Bookmå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`...).
+`@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`...).
 
@@ -310,0 +434,0 @@ ```js

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

236096

16.13%

Lines of code

3286

17.23%

Number of lines in readme file

444

38.75%

Number of medium supply chain risk alerts

0

-100%

No dependency changes