Locales supported?

[RanzQ]

I was able to change format using a function but I is possible to change other locales? I'd like to use locales from moment.js, updating local instance like this doesn't seem to do anything:

      let format = function (selectedDate) {
        return moment(selectedDate).format('L')
      }

      let localeData = moment.localeData()

      let weekDays = localeData.weekdays()
      let weekDaysShort = localeData.weekDaysShort()
      let weekDaysLetter = localeData.weekdaysMin()
      let months = localeData.months()
      let monthsShort = localeData.monthsShort()

      Object.assign(myElem.MaterialDatePicker.locales, {
        format,
        weekDays,
        weekDaysShort,
        weekDaysLetter,
        months,
        monthsShort
      })

Should custom locales already be supported?

UPDATE: Actually moment throws an error. I'll close this if it's only due to that.

[dgrubelic]

I think that this should work. You can set locales globally before window.onload() event and after that every date picker component instance will inherit changed locales. Also, you can change locales after date picker is initialized.

Global locales object: MaterialDatePicker.locales = { /* your custom locales*/ }; Local object: element.MaterialDatePicker.locales = { /* your custom locales */ };

[dgrubelic]

Let me know if you need any other help implementing component into your app.

BTW, just few days ago i implemented date picker into app i'm working on (angularjs, momentjs, etc.) and everything worked well, so i believe it's something due to your local implementation.

[RanzQ]

I had used moment API wrong, this worked:

      let weekDays = moment.weekdays()
      let weekDaysShort = moment.weekdaysShort()
      let weekDaysLetter = moment.weekdaysMin()
      let months = moment.months()
      let monthsShort = moment.monthsShort()

Otherwise it seems to work ok, expect for one problem:

This is the same problem I mentioned in the MDL issues but with the latest version it doesn't happen if I add mdl-datepicker--fixed:

I can setup a codepen to show how I use mdl with riot.js. It's somewhat similar to angular (more like react), basically I just create a wrapper like this:

import tagHtml from './mdl-datepicker.html'
import componentHandler from 'mdl-custom/material'

const tagAttrs =
`class="mdl-textfield mdl-js-textfield { opts.classExt } {
mdl-textfield--floating-label: opts.floatingLabel }
mdl-datepicker mdl-js-datepicker mdl-datepicker--fixed"`

riot.tag('mdl-datepicker', tagHtml, tagAttrs, function (opts) {
  this.upgraded = false
  this.on('updated', () => {
    // Upgrade the element
    if (!this.upgraded) {
      componentHandler.upgradeElement(this.root)
    }
  })
})

The event updated means DOM is ready so I call upgrade for the element. I'll debug it more when I have time, I can go with the fixed picker for now. :)

[dgrubelic]

Can you provide CodePen so i can see what the problem is with broken date picker?

[dgrubelic]

Also, please check out demos in src/pickers/demo.html and if everything is ok there, then it must be some issue with your code.

[RanzQ]

I will setup a codepen. I think it's more a riot compatibility issue rather than your code. :) One fix I'd add is this:

      this.cancelElement_.innerHTML = this.locales.cancelText || 'Cancel';
      this.okElement_.innerHTML = this.locales.okText || 'OK';

The other locales work nice with moment.

[dgrubelic]

Oh yeah, you're right... Thanks for noticing that :)

[dgrubelic]

Added cancel and ok action locales.