Skip to content

Added support for 24 hour format and options for button texts #141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
snimelius wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added support for 24 hour format and options for button texts #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 39 additions & 6 deletions lib/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -289,15 +295,18 @@ 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');
}

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');
Expand Down Expand Up @@ -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`);
Expand All @@ -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');
Expand Down Expand Up @@ -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"
}
13 changes: 9 additions & 4 deletions lib/scss/material-datetime-picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -330,15 +332,15 @@ $primary: #00bcd4 !default;
border-radius: 50%;
list-style: none; /* [2] */

.c-datepicker__clock__num {
.#{$selector} {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: $item-size;
height: $item-size;
margin: -$half-item;
z-index: 98;
z-index: $zIndex;

$angle: 360 / $nb-items;
$rot: 0;
Expand Down Expand Up @@ -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: "";
Expand Down
21 changes: 20 additions & 1 deletion lib/template/datepicker.template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ export default () => `
</label>
</div>
<div class="c-datepicker__mask"></div>
<div class="c-datepicker__clock__hours js-clock-hours active">
<div class="js-clock-hours">
<div class="c-datepicker__clock__hours outer active">
<div class="c-datepicker__clock__num" data-number="3">3</div>
<div class="c-datepicker__clock__num" data-number="4">4</div>
<div class="c-datepicker__clock__num" data-number="5">5</div>
Expand All @@ -50,6 +51,24 @@ export default () => `
<div class="c-datepicker__hour-hand"></div>
</div>
</div>
<div class="c-datepicker__clock__hours inner active">
<div class="c-datepicker__clock__num" data-number="15">15</div>
<div class="c-datepicker__clock__num" data-number="16">16</div>
<div class="c-datepicker__clock__num" data-number="17">17</div>
<div class="c-datepicker__clock__num" data-number="18">18</div>
<div class="c-datepicker__clock__num" data-number="19">19</div>
<div class="c-datepicker__clock__num" data-number="20">20</div>
<div class="c-datepicker__clock__num" data-number="21">21</div>
<div class="c-datepicker__clock__num" data-number="22">22</div>
<div class="c-datepicker__clock__num" data-number="23">23</div>
<div class="c-datepicker__clock__num" data-number="12">12</div>
<div class="c-datepicker__clock__num" data-number="13">13</div>
<div class="c-datepicker__clock__num" data-number="14">14</div>
<div class="c-datepicker__clock-hands">
<div class="c-datepicker__hour-hand"></div>
</div>
</div>
</div>
<div class="c-datepicker__clock__minutes js-clock-minutes">
<div class="c-datepicker__clock__num" data-number="15">15</div>
<div class="c-datepicker__clock__num" data-number="20">20</div>
Expand Down