Added feature of Meridiem Time. Should work on both modes.

.gitignore

@@ -1,2 +1,3 @@
 .idea/
-node_modules/
+node_modules/
+package-lock.json

README.md

@@ -30,7 +30,12 @@ defaultConfig = {
     clockBackground: "#CFD8DC",
     clockItemColor: "#212121",
     clockItemInnerColor: "#212121",
-    handColor: "#1976D2"
+    handColor: "#1976D2",
+    meridiem: false,
+    labels: {
+        cancel:"Cancel",
+        ok:"Ok",
+    }
 };
 ````
 
@@ -89,3 +94,18 @@ import Timepicker from "path/to/grudus-timepicker/dist/grudus-timepicker.js";
 ````
 
 You can set initial time by passing `time` field in argument. `time` may be a `Date` object, an object `{hours: 12, minutes: 44}` or a string in format `HH:mm`. If you want to learn more, visit [customization section](https://grudus.github.io/Timepicker/#customization)
+
+## Additional options
+
+You can use `24h/12h` mode using the `meridiem` config. Set to true to use AM/PM or leave it as false to use 24hrs.
+
+You can override buttons text using `label` config. As example I want labels on spanish so I can set:
+
+```
+{
+    labels: {
+        cancel:"Cancelar",
+        ok:"Aceptar",
+    }
+}
+```

dist/index.css

@@ -229,4 +229,21 @@
 
 .g-pointer:hover {
     cursor: pointer;
+}
+
+.content-meridiem {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    margin-left: 16px;
+}
+.item-meridiem {
+    font-size: 24px;
 }

src/js/clock.js

@@ -17,7 +17,7 @@ export default class Clock {
         this.submitButton = document.getElementById(DOM.submitId);
         this.submitButton.onclick = () => {
             const time = this.time;
-            time.formatted = () => formatTime(time);
+            time.formatted = () => formatTime(time, this.options.meridiem);
             this.options.onSubmit(time);
             Clock.dispose();
         };

src/js/clockHeader.js

@@ -23,6 +23,21 @@ export default class ClockHeader {
             this.toggleActiveToMinutes();
             this.onMinutesClicked();
         };
+        if (this.options.meridiem) {
+            this.headerAm = document.getElementById(DOM.gTimeAmId);
+            this.headerPm = document.getElementById(DOM.gTimePmId);
+            this.headerAm.onclick = () => {
+                this.toogleActiveMeridiemAm();
+                this.time.meridiem = "am";
+            };
+            this.headerPm.onclick = () => {
+                this.toogleActiveMeridiemPm();
+                this.time.meridiem = "pm";
+            };
+            if (this.time.meridiem === "am") this.toogleActiveMeridiemAm();
+            else if (this.time.meridiem === "pm") this.toogleActiveMeridiemPm();
+            else this.defaultToggleActiveMeridiem();
+        }
 
         this.updateDisplayedTime();
         this.toggleActiveToHours();
@@ -36,17 +51,33 @@ export default class ClockHeader {
         this.toggleActive(this.headerMinutes, this.headerHours);
     }
 
+    toogleActiveMeridiemAm() {
+        this.toggleActive(this.headerPm, this.headerAm);
+
+    }
+
+    toogleActiveMeridiemPm() {
+        this.toggleActive(this.headerAm, this.headerPm);
+    }
+
+    defaultToggleActiveMeridiem() {
+        const { hours } = this.time;
+        if (hours < 13) this.toogleActiveMeridiemAm();
+        else this.toogleActiveMeridiemPm();
+    }
+
     toggleActive(objectToRemoveClass, objectToAddClass) {
         objectToRemoveClass.style.color = this.options.headerColor;
         objectToAddClass.style.color = this.options.headerSelected;
     }
 
     updateDisplayedTime() {
-        ClockHeader.doUpdateDisplayedTime(this.headerHours, this.time.hours);
+        ClockHeader.doUpdateDisplayedTime(this.headerHours, this.time.hours, this.options.meridiem);
         ClockHeader.doUpdateDisplayedTime(this.headerMinutes, this.time.minutes);
     }
 
-    static doUpdateDisplayedTime(node, value) {
+    static doUpdateDisplayedTime(node, value, meridiem) {
+        if (meridiem && value !== 12) value = value % 12;
         if (value < 10)
             node.innerText = "0" + value;
         else node.innerText = value;

src/js/face/clockFace.js

@@ -19,7 +19,7 @@ export default class ClockFace {
 
         this.initViews();
         this.initTimeFaces(initialTime);
-        this.createFace();
+        this.createFace(options);
 
         this.hoursFace.items.radius = this.itemsRadius;
 
@@ -29,7 +29,7 @@ export default class ClockFace {
 
     initViews() {
         this.clockElem = document.getElementById(DOM.clockId);
-        this.innerClockElem = document.getElementById(DOM.innerId);
+        this.innerClockElem = (this.options.meridiem) ? null : document.getElementById(DOM.innerId);
         this.handOfAClock = document.getElementById(DOM.handId);
 
         this.clockElem.onmousedown = () => this.isMouseDown = true;
@@ -44,8 +44,10 @@ export default class ClockFace {
         this.clockElem.onmousemove = (e) => this.selectTime(e, false, this.clockElem);
         this.clockElem.onclick = (e) => this.selectTime(e, true, this.clockElem);
 
-        this.innerClockElem.onmousemove = (e) => this.selectTime(e, false, this.innerClockElem);
-        this.innerClockElem.onclick = (e) => this.selectTime(e, true, this.innerClockElem);
+        if (!this.options.meridiem) {
+            this.innerClockElem.onmousemove = (e) => this.selectTime(e, false, this.innerClockElem);
+            this.innerClockElem.onclick = (e) => this.selectTime(e, true, this.innerClockElem);
+        }
     }
 
     initTimeFaces(initialTime) {
@@ -68,7 +70,7 @@ export default class ClockFace {
     }
 
     createFace() {
-        const clockFaceCreator = new ClockFaceCreator(this.clockElem, this.innerClockElem);
+        const clockFaceCreator = new ClockFaceCreator(this.clockElem, this.innerClockElem, this.options);
         clockFaceCreator.create(this.clockItems, this.innerClockItems, this.outerClockItems, this.hoursFace);
         clockFaceCreator.calculateSize(this.clockItems, this.innerClockItems, this.outerClockItems);
 

src/js/face/clockFaceCreator.js

@@ -3,19 +3,22 @@ import {css} from "../meta/config";
 
 export default class ClockFaceCreator {
 
-    constructor(clockElem, innerClockElem) {
+    constructor(clockElem, innerClockElem, options) {
         this.clockElem = clockElem;
         this.innerClockElem = innerClockElem;
         this.size = {};
         this.middle = {};
+        this.options = options;
     }
 
     create(clockItems, innerClockItems, outerClockItems, face) {
         ClockFaceCreator.doCreate(clockItems, this.clockElem, span => span.classList.add(css.item));
-        ClockFaceCreator.doCreate(innerClockItems, this.innerClockElem, (span, i) => {
-            span.classList.add(css.item, css.inner);
-            span.innerText = face.displayedInner[i];
-        });
+        if (!this.options.meridiem) {
+            ClockFaceCreator.doCreate(innerClockItems, this.innerClockElem, (span, i) => {
+                span.classList.add(css.item, css.inner);
+                span.innerText = face.displayedInner[i];
+            });
+        }
 
         for (let i = 0; i < 60; i++) {
             const span = document.createElement("span");
@@ -41,13 +44,14 @@ export default class ClockFaceCreator {
         this.middle.y = this.size.height / 2;
         this.itemsRadius = this.size.width / 2 - 20;
 
-        const innerWidth = this.innerClockElem.offsetWidth;
-        const innerHeight = this.innerClockElem.offsetHeight;
-        const middleX = innerWidth / 2;
-        const middleY = innerHeight / 2;
-
         ClockFaceCreator.doCalculateSize(this.middle.x, this.middle.y, this.itemsRadius, clockItems);
-        ClockFaceCreator.doCalculateSize(middleX, middleY, this.itemsRadius - 40, innerClockItems);
+        if (!this.options.meridiem) {
+            const innerWidth = this.innerClockElem.offsetWidth;
+            const innerHeight = this.innerClockElem.offsetHeight;
+            const middleX = innerWidth / 2;
+            const middleY = innerHeight / 2;
+            ClockFaceCreator.doCalculateSize(middleX, middleY, this.itemsRadius - 40, innerClockItems);
+        }
         ClockFaceCreator.doCalculateSize(this.middle.x, this.middle.y, this.itemsRadius, outerClockItems);
     }
 

src/js/face/hoursFace.js

@@ -15,17 +15,27 @@ export default class HoursFace {
     }
 
     onEnter() {
-        this.items.innerClockElem.style.display = "block";
+
+        if (this.items.innerClockElem !== null)
+            this.items.innerClockElem.style.display = "block";
         const isInnerClock = this.hours < 13 && this.hours !== 0;
         const hoursIndex = this.hours % 12;
-        this.selected = isInnerClock ? this.items.clockItems[hoursIndex] : this.items.innerClockItems[hoursIndex];
+        let radius = this.items.radius;
+        if (this.options.meridiem && !isInnerClock) this.selected = this.items.clockItems[hoursIndex];
+        else {
+            this.selected = isInnerClock ? 
+                this.items.clockItems[hoursIndex] : 
+                this.items.innerClockItems[hoursIndex];
+            radius = isInnerClock ?  radius : radius - 50;
+        }
         this.colorSelected();
 
-        this.updateHours(this.hours, hoursIndex * 30, isInnerClock ? this.items.radius : this.items.radius - 50);
+        this.updateHours(this.hours, hoursIndex * 30, radius);
     }
 
     onLeave() {
-        this.items.innerClockElem.style.display = "none";
+        if (this.items.innerClockElem !== null)
+            this.items.innerClockElem.style.display = "none";
         if (this.selected) {
             this.removeSelected();
             this.selected = undefined;
@@ -37,7 +47,8 @@ export default class HoursFace {
             this.removeSelected();
 
         const index = Math.round(angle / 30) % 12;
-        this.selected = (elem === this.items.innerClockElem
+        this.selected = (elem === this.items.innerClockElem 
+            && this.items.innerClockElem!== undefined
             ? this.items.innerClockItems
             : this.items.clockItems)[index];
 
@@ -46,7 +57,7 @@ export default class HoursFace {
         const selectedAngle = Math.round(angle / 30) * 30;
 
         this.updateHours(this.hours, selectedAngle,
-            elem === this.items.innerClockElem ? this.items.radius - 50 : this.items.radius);
+            elem === this.items.innerClockElem && this.items.innerClockElem!== undefined ? this.items.radius - 50 : this.items.radius);
     }
 
     colorSelected() {

src/js/meta/clockHtml.js

@@ -1,25 +1,37 @@
-export default "<section class='g-time-wrapper'>\n" +
-"    <header class='g-head g-flex' id='g-head'>\n" +
-"        <section class='g-head-content'>\n" +
-"            <span class='g-current g-hour g-active g-pointer' id='g-hours'>21</span>\n" +
-"            <span class='g-current'>:</span>\n" +
-"            <span class='g-current g-minute g-pointer' id='g-minutes'>37</span>\n" +
-"        </section>\n" +
-"    </header>\n" +
-"\n" +
-"\n" +
-"    <section class='g-clock-wrapper g-flex' id='g-clock-wrapper'>\n" +
-"        <div class='g-clock' id='g-clock'>" +
-"            <span class='g-middle-dot' id='g-middle-dot'></span>\n" +
-"            <div class='g-hand-of-a-clock' id='g-hand-of-a-clock'></div>\n" +
-"            <div class='g-clock g-clock-inner' id='g-clock-inner'></div>\n" +
-"        </div>\n" +
-"    </section>\n" +
-"\n" +
-"\n" +
-"    <footer class='g-buttons g-flex' id='g-buttons'>\n" +
-"        <button id='g-time-cancel' class='g-button g-cancel g-pointer'>CANCEL</button>\n" +
-"        <button id='g-time-submit' class='g-button g-submit g-pointer'>OK</button>\n" +
-"    </footer>\n" +
-"\n" +
-"</section>";
+
+export default (options) => {
+    const arrayTemplate = ["<section class='g-time-wrapper'>" ,
+        "    <header class='g-head g-flex' id='g-head'>" ,
+        "        <section class='g-head-content'>" ,
+        "            <span class='g-current g-hour g-active g-pointer' id='g-hours'>21</span>" ,
+        "            <span class='g-current'>:</span>" ,
+        "            <span class='g-current g-minute g-pointer' id='g-minutes'>37</span>"];
+    if (options.meridiem){
+        arrayTemplate.push(["<div class='content-meridiem'>" ,
+            "<span id='g-time-am' class='item-meridiem g-am g-pointer'>AM</span>" ,
+            "<span id='g-time-pm' class='item-meridiem g-pm g-pointer'>PM</span>",
+            "</div>"].join("\n"));
+
+    }
+    const nextTemplate = ["        </section>" ,
+        "    </header>" ,
+        "" ,
+        "" ,
+        "    <section class='g-clock-wrapper g-flex' id='g-clock-wrapper'>" ,
+        "        <div class='g-clock' id='g-clock'>" ,
+        "            <span class='g-middle-dot' id='g-middle-dot'></span>" ,
+        "            <div class='g-hand-of-a-clock' id='g-hand-of-a-clock'></div>" ,
+        "            <div class='g-clock g-clock-inner' id='g-clock-inner'></div>" ,
+        "        </div>" ,
+        "    </section>" ,
+        "" ,
+        "" ,
+        "    <footer class='g-buttons g-flex' id='g-buttons'>"];
+
+    nextTemplate.push(`
+        <button id='g-time-cancel' class='g-button g-cancel g-pointer'>${options.labels.cancel || ""}</button>
+        <button id='g-time-submit' class='g-button g-submit g-pointer'>${options.labels.ok || ""}</button>
+    `);
+    nextTemplate.push("</footer> </section>");
+    return arrayTemplate.concat(nextTemplate).join("\n");
+};

src/js/meta/config.js

@@ -15,7 +15,12 @@ const defaultConfig = {
     clockBackground: "#CFD8DC",
     clockItemColor: "#212121",
     clockItemInnerColor: "#212121",
-    handColor: "#1976D2"
+    handColor: "#1976D2",
+    meridiem: false,
+    labels: {
+        cancel:"Cancel",
+        ok:"Ok",
+    }
 };
 
 const FaceType = {HOURS: "hours", MINUTES: "minutes"};
@@ -47,7 +52,9 @@ const DOM = {
     handId: "g-hand-of-a-clock",
     buttonsId: "g-buttons",
     submitId: "g-time-submit",
-    cancelId: "g-time-cancel"
+    cancelId: "g-time-cancel",
+    gTimeAmId: "g-time-am",
+    gTimePmId: "g-time-pm"
 };
 
 export default {clockId, clockConfig: defaultConfig, FaceType};