diff --git a/lib/js/index.js b/lib/js/index.js index 543988e..b9b2ee8 100644 --- a/lib/js/index.js +++ b/lib/js/index.js @@ -42,7 +42,10 @@ const defaults = () => ({ // the container to append the picker container: document.body, // allow any dates - dateValidator: undefined + dateValidator: undefined, + twentyFourHours: false, + cancelText: "Cancel", + okText: "OK" }); class DateTimePicker extends Events { @@ -86,6 +89,9 @@ class DateTimePicker extends Events { this.amToggleEl = this.$('.c-datepicker__clock--am'); this.pmToggleEl = this.$('.c-datepicker__clock--pm'); + //Set button texts from options + this.$(".modal-btns a.js-cancel").innerText = this.options.cancelText; + this.$(".modal-btns a.js-ok").innerText = this.options.okText; if (!this.value) { // TODO hack // set/setDate/setTime need refactoring to have single concerns @@ -289,7 +295,9 @@ class DateTimePicker extends Events { showHourClock() { this.clickShowClock(); - this.$('.js-clock-hours').classList.add('active'); + this.$('.c-datepicker__clock__hours.outer').classList.add('active'); + if (this.options.twentyFourHours) + this.$('.c-datepicker__clock__hours.inner').classList.add('active'); this.$('.js-clock-minutes').classList.remove('active'); this.$('.js-date-hours').classList.add('active'); this.$('.js-date-minutes').classList.remove('active'); @@ -297,7 +305,8 @@ class DateTimePicker extends Events { showMinuteClock() { this.clickShowClock(); - this.$('.js-clock-hours').classList.remove('active'); + this.$('.c-datepicker__clock__hours.outer').classList.remove('active'); + this.$('.c-datepicker__clock__hours.inner').classList.remove('active'); this.$('.js-clock-minutes').classList.add('active'); this.$('.js-date-hours').classList.remove('active'); this.$('.js-date-minutes').classList.add('active'); @@ -389,7 +398,7 @@ class DateTimePicker extends Events { const hour = m.format('HH'); const minutes = m.format('mm'); - const hourAsInt = parseInt(hour, 10) % 12; + const hourAsInt = this.options.twentyFourHours ? parseInt(hour,10) % 24 : parseInt(hour, 10) % 12; const oldActiveHours = this.$(`.js-clock-hours .${this.options.styles.clockNum}--active`); const oldActiveMinutes = this.$(`.js-clock-minutes .${this.options.styles.clockNum}--active`); @@ -406,14 +415,25 @@ class DateTimePicker extends Events { } this.$(`.js-clock-hours .${this.options.styles.clockNum}[data-number="${hourAsInt}"]`) - .classList.add(`${this.options.styles.clockNum}--active`); + .classList.add(`${this.options.styles.clockNum}--active`); this.$(`.js-clock-minutes .${this.options.styles.clockNum}[data-number="${minuteAsInt}"]`) .classList.add(`${this.options.styles.clockNum}--active`); + //If 24 hours, do not display toggle and change hour labels + if (this.options.twentyFourHours) { + this.$(".c-datepicker__clock__am-pm-toggle").style.display = 'none'; + SetTwentyFourHourLabels(this); + } + + //If NOT 24 hours, do not display inner hours + if (!this.options.twentyFourHours) { + this.$(".c-datepicker__clock__hours.inner").classList.remove('active'); +} this.value.hours(m.hours()); this.value.minutes(m.minutes()); this.meridiem = this.value.format('a'); - + if (this.options.twentyFourHours) + this.meridiem = 'am'; if (this.meridiem === 'pm') { this.amToggleEl.removeAttribute('checked'); this.pmToggleEl.setAttribute('checked', 'checked'); @@ -442,3 +462,16 @@ function _appendTemplate(parent, template) { parent.appendChild(tempEl.firstChild); return this; } + +function SetTwentyFourHourLabels(obj) { + obj.$(".c-datepicker__clock__hours.outer div[data-number='0']").innerText = "00" + obj.$(".c-datepicker__clock__hours.outer div[data-number='1']").innerText = "01" + obj.$(".c-datepicker__clock__hours.outer div[data-number='2']").innerText = "02" + obj.$(".c-datepicker__clock__hours.outer div[data-number='3']").innerText = "03" + obj.$(".c-datepicker__clock__hours.outer div[data-number='4']").innerText = "04" + obj.$(".c-datepicker__clock__hours.outer div[data-number='5']").innerText = "05" + obj.$(".c-datepicker__clock__hours.outer div[data-number='6']").innerText = "06" + obj.$(".c-datepicker__clock__hours.outer div[data-number='7']").innerText = "07" + obj.$(".c-datepicker__clock__hours.outer div[data-number='8']").innerText = "08" + obj.$(".c-datepicker__clock__hours.outer div[data-number='9']").innerText = "09" +} diff --git a/lib/scss/material-datetime-picker.scss b/lib/scss/material-datetime-picker.scss index 542da6b..fbdedca 100644 --- a/lib/scss/material-datetime-picker.scss +++ b/lib/scss/material-datetime-picker.scss @@ -318,7 +318,9 @@ $primary: #00bcd4 !default; @mixin putOnCircle( $nb-items, //Number of items $circle-size, //Parent size - $item-size //Item size + $item-size, //Item size + $selector, + $zIndex ) { $half-item: $item-size / 2; $half-parent: $circle-size / 2; @@ -330,7 +332,7 @@ $primary: #00bcd4 !default; border-radius: 50%; list-style: none; /* [2] */ - .c-datepicker__clock__num { + .#{$selector} { display: block; position: absolute; top: 50%; @@ -338,7 +340,7 @@ $primary: #00bcd4 !default; width: $item-size; height: $item-size; margin: -$half-item; - z-index: 98; + z-index: $zIndex; $angle: 360 / $nb-items; $rot: 0; @@ -377,11 +379,14 @@ $primary: #00bcd4 !default; .c-datepicker__clock { - @include putOnCircle(12, 200px, 50px); + @include putOnCircle(12, 200px, 50px,"c-datepicker__clock__num",98); + @include putOnCircle(12, 140px, 50px,"c-datepicker__clock__hours.inner .c-datepicker__clock__num",99); font-size: 14px; line-height: 50px; padding: 160px 0 20px 0; margin: 0 auto; + width: 190px; + height: 190px; &::before { content: ""; diff --git a/lib/template/datepicker.template.js b/lib/template/datepicker.template.js index ccfbca4..887170c 100644 --- a/lib/template/datepicker.template.js +++ b/lib/template/datepicker.template.js @@ -33,7 +33,8 @@ export default () => `
-
+
+
3
4
5
@@ -50,6 +51,24 @@ export default () => `
+
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
12
+
13
+
14
+
+
+
+
+
15
20