Skip to content

Multilingual version #144

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
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Multilingual version #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cb94bdb
Allow user set locale
malyfko Jun 8, 2017
4ff8fd9
Correct code style
malyfko Jun 8, 2017
53b0760
Update README.md
malyfko Jun 8, 2017
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
8 changes: 8 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,14 @@ All options are optional, including the `el`.
format: 'DD/MM/YY',
// the default value of the picker
default: moment(),
// language
locale: 'en', /* set any locale, available in moment.js. Default - english */
okLabel: 'OK', /* set custom name for 'OK' button. Default - 'OK' */
cancelLabel: 'Cancel', /* set custom name for 'Cancel' button. Default - 'Cancel' */
dayFormat: 'Do', /* set Day of Month format as for moment.js object. Default - 'Do'
'D' for 1 2 ... 30 31
'Do' for 1st 2nd ... 30th 31st
'DD' for 01 02 ... 30 31 */
// the container to append the picker. If you change this, you need to make
// sure your element has a z-index > 0 so that it displays in front of the scrim.
container: document.body,
Expand Down
22 changes: 15 additions & 7 deletions lib/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ const defaults = () => ({
},
// format to display in the input, or set on the element
format: 'DD/MM/YY',
// language
locale: 'en',
okLabel: 'OK',
cancelLabel: 'Cancel',
dayFormat: 'Do',
// the container to append the picker
container: document.body,
// allow any dates
Expand Down Expand Up @@ -67,20 +72,23 @@ class DateTimePicker extends Events {
// style options
initializeRome(container, validator) {
const onData = this.onChangeDate.bind(this);

const weekDays = moment.localeData(this.options.locale)._weekdaysMin;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey there!

In JS there is a convention that indicates variables starting with underscore are private (Futher reading here or here) They should not be read or written directly. It's just a convention but that's why I decided to update moment to 2.13.0.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Luisetelo this solution was used due to the version of moment.js this project uses.

const startWeek = moment.localeData(this.options.locale)._week.dow;
return rome(container, {
styles: this.options.styles,
time: false,
dateValidator: validator,
initialValue: this.value
initialValue: this.value,
weekdayFormat: weekDays,
weekStart: startWeek
}).on('data', onData);
}

// called to open the picker
open() {
const scrimEl = scrimTemplate(this.options);
_appendTemplate(document.body, scrimEl);
_appendTemplate(this.options.container, popupTemplate());
_appendTemplate(this.options.container, popupTemplate(this.options.okLabel, this.options.cancelLabel));
this.pickerEl = this.options.container.querySelector(`.${prefix}`);
this.scrimEl = document.body.querySelector(`.${this.options.styles.scrim}`);
this.amToggleEl = this.$('.c-datepicker__clock--am');
Expand All @@ -94,7 +102,7 @@ class DateTimePicker extends Events {
// For now this allows us to set the default time using the same quantize
// rules as setting the date explicitly. Setting this.value meets setTime|Date's
// expectation that we have a value, and `0` guarantees that we will detect
this.value = moment(0);
this.value = moment(0).locale(this.options.locale);
this.setDate(this.options.default);
this.setTime(this.options.default);
} else {
Expand Down Expand Up @@ -365,9 +373,9 @@ class DateTimePicker extends Events {
// the calendar will be updated automatically
// by rome when clicked
setDate(date) {
const m = moment(date);
const m = moment(date).locale(this.options.locale);
const month = m.format('MMM');
const day = m.format('Do');
const day = m.format(this.options.dayFormat);
const dayOfWeek = m.format('dddd');
const year = m.format('YYYY');

Expand All @@ -383,7 +391,7 @@ class DateTimePicker extends Events {
// set the value and header elements to `time`
// also update the hands of the clock
setTime(time) {
const m = moment(time);
const m = moment(time).locale(this.options.locale);
const minuteAsInt = Math.round(parseInt(m.format('mm'), 10) / 5) * 5;
m.minutes(minuteAsInt);

Expand Down
6 changes: 3 additions & 3 deletions lib/template/datepicker.template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default () => `
export default (okLabel, cancelLabel) => `
<div class="c-datepicker">
<a class="c-datepicker__toggle c-datepicker__toggle--right c-datepicker--show-time js-show-clock" title="show time picker">
</a>
Expand Down Expand Up @@ -69,8 +69,8 @@ export default () => `
</div>
</div>
<div class="modal-btns">
<a class="c-btn c-btn--flat js-cancel">Cancel</a>
<a class="c-btn c-btn--flat js-ok">OK</a>
<a class="c-btn c-btn--flat js-cancel">${cancelLabel}</a>
<a class="c-btn c-btn--flat js-ok">${okLabel}</a>
</div>
</div>
`;