Translate the component using locales and translations

README.md

@@ -1,10 +1,10 @@
-# Material Datetime Picker 
+# Material Datetime Picker
 
 A Material Design date/time picker modal, built for the web. Works well with Materialize, or standalone.
 
 [https://ripjar.github.io/material-datetime-picker/](https://ripjar.github.io/material-datetime-picker/)
 
-[![Status][status]](https://travis-ci.org/ripjar/material-datetime-picker) 
+[![Status][status]](https://travis-ci.org/ripjar/material-datetime-picker)
 [![Package][npm]](https://www.npmjs.com/package/material-datetime-picker)
 
 ![Time][date] ![Time][time]
@@ -23,7 +23,7 @@ The picker depends on Google's Material Design icons (packaged with Materialize)
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 ```
 
---- 
+---
 
 For best results also include Google's Material Font `Roboto`;
 
@@ -47,7 +47,7 @@ If you want to use this project as a standalone `<script>`, you can use  `dist/m
 ### Manual (recommended)
 
 The picker can be instantiated and interacted with manally;
-    
+
 ```javascript
 import MaterialDateTimePicker from 'material-datetime-picker';
 
@@ -57,15 +57,15 @@ const picker = new MaterialDateTimePicker()
     .on('close', () => console.log('closed'));
 
 document.querySelector('.c-datepicker-btn')
-    .on('click', () => picker.open());        
+    .on('click', () => picker.open());
 ```
 
 ---
 
 ### As form input
 
 The picker is decoupled from any single form element for simplicity. However, it should be simple to link the picker to a form input or button. For instance, given the input element `<input class="c-datepicker-input" />`, the following could be written;
-    
+
 ```javascript
 import MaterialDateTimePicker from 'material-datetime-picker';
 
@@ -75,28 +75,28 @@ const picker = new MaterialDateTimePicker()
       input.value = val.format("DD/MM/YYYY");
     });
 
-input.addEventListener('focus', () => picker.open());      
+input.addEventListener('focus', () => picker.open());
 ```
 
 ## Options
-    
+
 All options are optional, including the `el`.
 
 ```javascript
 {
-    // DOM Element to attach the datepicker. This element will receive 
-    // events when the data changes. If an input element, will be 
+    // DOM Element to attach the datepicker. This element will receive
+    // events when the data changes. If an input element, will be
     // populated with formatted date and time chosen.
     // `el` must be a DOM Element object. Selectpr strings or wrappers
     // like a jQuery selection are not supported.
     el: document.querySelector('.c-datepicker-btn'),
-    // if `el` is set, the format used to display the datetime in the input, 
-    format: 'DD/MM/YY', 
+    // if `el` is set, the format used to display the datetime in the input,
+    format: 'DD/MM/YY',
     //  the default value of the picker
     default: moment(),
     // 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,    
+    container: document.body,
     // cosmetic classes that can be overriden
     // mostly used for styling the calendar
     styles: {
@@ -123,7 +123,12 @@ All options are optional, including the `el`.
         clockNum: 'c-datepicker__clock__num'
     },
     // date range to allow (see rome validator factories)
-    dateValidator: null       
+    dateValidator: null
+    // translations for buttons label
+    okLabel: 'OK',
+    cancelLabel: 'Cancel'
+    // format to display the day number.
+    dayFormat: 'Do',
 }
 ```
 

lib/js/index.js

@@ -42,7 +42,12 @@ const defaults = () => ({
   // the container to append the picker
   container: document.body,
   // allow any dates
-  dateValidator: undefined
+  dateValidator: undefined,
+  // translations for buttons label
+  okLabel: 'OK',
+  cancelLabel: 'Cancel',
+  // format to display the day number.
+  dayFormat: 'Do'
 });
 
 class DateTimePicker extends Events {
@@ -72,15 +77,17 @@ class DateTimePicker extends Events {
       styles: this.options.styles,
       time: false,
       dateValidator: validator,
-      initialValue: this.value
+      initialValue: this.options.default,
+      weekdayFormat: this.options.default.localeData().weekdaysMin(),
+      weekStart: this.options.default.clone().weekday(0).day()
     }).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');
@@ -91,10 +98,7 @@ class DateTimePicker extends Events {
       // set/setDate/setTime need refactoring to have single concerns
       // (set: set the value; setDate/setTime rename to renderDate/renderTime
       //  and deal with updating the view only).
-      // 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 = this.options.default.startOf('minute');
       this.setDate(this.options.default);
       this.setTime(this.options.default);
     } else {
@@ -367,7 +371,7 @@ class DateTimePicker extends Events {
   setDate(date) {
     const m = moment(date);
     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');
 

lib/template/datepicker.template.js

@@ -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>
@@ -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>
 `;

package.json

@@ -22,7 +22,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "moment": "2.10.6",
+    "moment": "2.18.1",
     "rome": "https://github.com/jwhitfieldseed/rome.git#19f5d3031a922c29c52b9038b2832a827e5e99d6"
   },
   "devDependencies": {