Merge pull request #84 from xdev1/master

#83 - base support for web components

dist/css/datepicker-bs4.css

@@ -182,7 +182,7 @@
 }
 
 .datepicker-cell.focused:not(.selected) {
-    background-color: #f1f3f5;
+    background-color: #e2e6ea;
 }
 
 .datepicker-cell.selected, .datepicker-cell.selected:hover {
@@ -192,7 +192,7 @@
 }
 
 .datepicker-cell.disabled {
-    color: #6c757d;
+    color: #adb5bd;
 }
 
 .datepicker-cell.prev:not(.disabled), .datepicker-cell.next:not(.disabled) {
@@ -213,7 +213,7 @@
 }
 
 .datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
-    background-color: #f1f3f5;
+    background-color: #e2e6ea;
 }
 
 .datepicker-cell.today:not(.selected) {

dist/js/datepicker-full.js

@@ -2057,10 +2057,10 @@
 
   // for the `document` to delegate the events from outside the picker/input field
   function onClickOutside(datepicker, ev) {
-    const element = datepicker.element;
-    if (element !== document.activeElement) {
+    if (!datepicker.active) {
       return;
     }
+    const element = datepicker.element;
     const pickerElem = datepicker.picker.element;
     if (findElementInEventPath(ev, el => el === element || el === pickerElem)) {
       return;
@@ -2211,7 +2211,13 @@
         initialDates = stringToArray(element.dataset.date, config.dateDelimiter);
         delete element.dataset.date;
       } else {
-        const container = options.container ? document.querySelector(options.container) : null;
+        const container =
+          options.container instanceof window.HTMLElement
+            ? options.container
+            : typeof options.container === 'string'
+            ? document.querySelector(options.container)
+            : null;
+
         if (container) {
           config.container = container;
         }

dist/js/datepicker.js

@@ -2057,10 +2057,10 @@ var Datepicker = (function () {
 
   // for the `document` to delegate the events from outside the picker/input field
   function onClickOutside(datepicker, ev) {
-    const element = datepicker.element;
-    if (element !== document.activeElement) {
+    if (!datepicker.active) {
       return;
     }
+    const element = datepicker.element;
     const pickerElem = datepicker.picker.element;
     if (findElementInEventPath(ev, el => el === element || el === pickerElem)) {
       return;
@@ -2211,7 +2211,13 @@ var Datepicker = (function () {
         initialDates = stringToArray(element.dataset.date, config.dateDelimiter);
         delete element.dataset.date;
       } else {
-        const container = options.container ? document.querySelector(options.container) : null;
+        const container =
+          options.container instanceof window.HTMLElement
+            ? options.container
+            : typeof options.container === 'string'
+            ? document.querySelector(options.container)
+            : null;
+
         if (container) {
           config.container = container;
         }

docs/options.md

@@ -94,10 +94,10 @@ Whether to show the week number ([ISO week](https://en.wikipedia.org/wiki/ISO_we
 Whether to show the clear button.
 
 #### container
-- Type: `String`
+- Type: `String | HTMLElement`
 - Default: `body`
 
-CSS selector for the element to append the date picker.
+CSS selector for the container element or the container element itself to append the date picker.
 
 > For constructor only. Cannot be used with `setOptions()`.  
 > On inline picker, this option is ignored and overwritten to the associated element.

js/Datepicker.js

@@ -153,7 +153,13 @@ export default class Datepicker {
       initialDates = stringToArray(element.dataset.date, config.dateDelimiter);
       delete element.dataset.date;
     } else {
-      const container = options.container ? document.querySelector(options.container) : null;
+      const container =
+        options.container instanceof window.HTMLElement
+          ? options.container
+          : typeof options.container === 'string'
+          ? document.querySelector(options.container)
+          : null;
+
       if (container) {
         config.container = container;
       }

js/events/otherListeners.js

@@ -3,10 +3,10 @@ import {unfocus} from './functions.js';
 
 // for the `document` to delegate the events from outside the picker/input field
 export function onClickOutside(datepicker, ev) {
-  const element = datepicker.element;
-  if (element !== document.activeElement) {
+  if (!datepicker.active) {
     return;
   }
+  const element = datepicker.element;
   const pickerElem = datepicker.picker.element;
   if (findElementInEventPath(ev, el => el === element || el === pickerElem)) {
     return;

test/unit/Datepicker.js

@@ -96,13 +96,31 @@ describe('Datepicker', function () {
       expect(dp.config.weekEnd, 'to be', 6);
     });
 
-    it('append datepicker element to the container)', function () {
+    it('append datepicker element to the container', function () {
       new Datepicker(input);
 
       const dpElem = Array.from(document.body.children).find(el => el.matches('.datepicker'));
       expect(dpElem, 'not to be undefined');
     });
 
+    it('append datepicker element to the container configured by CSS selector', function () {
+      new Datepicker(input, {
+        container: '#test-container'
+      });
+
+      const dpElem = testContainer.querySelector('.datepicker');
+      expect(dpElem, 'not to be null');
+    });
+
+    it('append datepicker element to the container configured by HTML element', function () {
+      new Datepicker(input, {
+        container: testContainer
+      });
+
+      const dpElem = testContainer.querySelector('.datepicker');
+      expect(dpElem, 'not to be null');
+    });
+
     it('does not add the active class to the picker element', function () {
       new Datepicker(input);