added header text config

Author: nj-coder

demo/index.html

@@ -68,7 +68,8 @@
         (function () {
             let format_12 = document.querySelector('#format_12');
             var format_12_picker = new NJTimePicker({
-                targetID: 'format_12'
+                targetID: 'format_12',
+                headerText: '12-Hour Picker',
             });
             format_12_picker.on('save', function (data) {
                 if (data.fullResult)
@@ -78,6 +79,7 @@
             let format_24 = document.querySelector('#format_24');
             var format_24_picker = new NJTimePicker({
                 targetEl: format_24,
+                headerText: '24-Hour Picker',
                 format: '24'
             });
             format_24_picker.on('save', function (data) {

dist/scripts.js

@@ -4,7 +4,10 @@
   --clear-button-bg: #ffa500;
   --clear-button-fc: #ffffff;
   --close-button-bg: #ff0000;
-  --close-button-fc: #ffffff; }
+  --close-button-fc: #ffffff;
+  --header-text-color: #ffffff;
+  --header-text-align: left;
+  --header-bg: #414141; }
 
 .nj-picker .nj-ampm-container {
   padding: 0 0.5em 0.5em 0.5em; }
@@ -84,6 +87,11 @@
     background: var(--close-button-bg);
     color: var(--close-button-fc); }
 
+.nj-picker .nj-header-container {
+  padding: 0.8em;
+  background: var(--header-bg);
+  color: var(--header-text-color);
+  text-align: var(--header-text-alig); }
 
 .nj-picker .nj-hours-container {
   padding: 0.5em; }

dist/scripts.min.js

@@ -1,5 +1,12 @@
 export class Header {
-    constructor() {
+    constructor(options) {
+        this.config = options;
+        this.build();
+    }
 
+    build() {
+        this.element = document.createElement('div');
+        this.element.className = 'nj-header-container';
+        this.element.textContent = this.config.headerText;
     }
 }

dist/style.css

@@ -0,0 +1,8 @@
+.nj-picker {
+    .nj-header-container {
+        padding: 0.8em;
+        background: var(--header-bg);
+        color: var(--header-text-color);
+        text-align: var(--header-text-alig);
+    }
+}

dist/style.min.css

@@ -3,6 +3,7 @@ import NanoEvents from 'nanoevents';
 import { PickerHour as hours } from './hour/hour';
 import { PickerMinute as minutes } from './minutes/minute';
 import { PickerAMPM as ampm } from './ampm/ampm';
+import { Header } from './header/header';
 import { ActionButton as buttons } from './button/buttons';
 
 export class NJTimePicker {
@@ -23,14 +24,15 @@ export class NJTimePicker {
     // plugin default config
     get defaultConfig() {
         return {
-            id: Math.random().toString(36).substring(7),
-            targetEl: null,
-            targetID: null,
             clickOutsideToClose: true,
+            disabledMinutes: [],
+            disabledHours: [],
             format: '12',
+            headerText: '',
+            id: Math.random().toString(36).substring(7),
             minutes: [0, 15, 30, 45],
-            disabledMinutes : [],
-            disabledHours : []
+            targetEl: null,
+            targetID: null
         };
     }
 
@@ -71,6 +73,12 @@ export class NJTimePicker {
         this.container = document.createElement('div');
         this.container.classList.add('nj-picker-container');
 
+        // create header
+        if (this.config.headerText) {
+            this.header = new Header(this.config);
+            this.container.append(this.header.element);
+        }
+
         this.buildHours();
         this.buildMinutes();
         this.buildAMPM(); // configure ampm container
@@ -192,5 +200,5 @@ export class NJTimePicker {
 
 if (typeof global === 'object' && !global.NJTimePicker) {
     global.NJTimePicker = NJTimePicker;
-    global.NJTimePicker.version = 'v1.1.101';
+    global.NJTimePicker.version = 'v1.2.100';
 }

src/header/header.js

@@ -10,4 +10,9 @@
     // close button
     --close-button-bg: #ff0000;
     --close-button-fc: #ffffff;
+
+    // header 
+    --header-text-color: #ffffff;  
+    --header-text-align: left;
+    --header-bg: #414141;
 }