diff --git a/README.md b/README.md index cc04139..145991d 100644 --- a/README.md +++ b/README.md @@ -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, diff --git a/lib/js/index.js b/lib/js/index.js index 543988e..04b3e96 100644 --- a/lib/js/index.js +++ b/lib/js/index.js @@ -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 @@ -67,12 +72,15 @@ class DateTimePicker extends Events { // style options initializeRome(container, validator) { const onData = this.onChangeDate.bind(this); - + const weekDays = moment.localeData(this.options.locale)._weekdaysMin; + 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); } @@ -80,7 +88,7 @@ class DateTimePicker extends Events { 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'); @@ -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 { @@ -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'); @@ -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); diff --git a/lib/template/datepicker.template.js b/lib/template/datepicker.template.js index ccfbca4..78a1ff0 100644 --- a/lib/template/datepicker.template.js +++ b/lib/template/datepicker.template.js @@ -1,4 +1,4 @@ -export default () => ` +export default (okLabel, cancelLabel) => `
@@ -69,8 +69,8 @@ export default () => `
`;