Update the date text when setting i18n.formatDate?

[Kurren Nischal]

If the user has selected a date and I then set the i18n.formatDate property of the datepicker to a different format, is there any way to refresh the displayed date to show the newly formatted value?

I could do something like datepicker.value = datepicker.value but that seems a bit hacky and emits an unnecessary change event even though the value hasn't changed.

Thanks in advanced for any help.

[Kurren Nischal]

Specifically I have the following element:

import { DatePickerElement } from '@vaadin/vaadin-date-picker/src/vaadin-date-picker.js';
import '@vaadin/vaadin-date-picker/theme/lumo/vaadin-date-picker.js';
const moment = require('moment');

class MyDatePicker extends DatePickerElement {
  constructor() {
    super();

    var me = this;
    me.formatString = "DD/MM/YY"

    this.i18n.parseDate = function (str) {
      var parsed = moment(str, me.formatString)
      return { year: parsed.year(), month: parsed.month(), day: parsed.date() }
    };

  }



  get formatString() {
    return this._formatString;
  }

  set formatString(str) {
    this._formatString = str;
    this.i18n.formatDate = d => moment(d).format(str);
  }


}

customElements.define('my-date-picker', MyDatePicker);

If the user picks a date, then I set myDatePicker.formatString = "DD/MM/YYYY";, the _selectedDateChanged(_selectedDate, i18n.formatDate) observer in the vaadin-date-picker-mixin is not firing.

[Serhii Kulykov]

In order to make sure the observer is fired, try to use this code:

this.set('i18n.parseDate', function (str) {
  var parsed = moment(str, me.formatString)
  return { year: parsed.year(), month: parsed.month(), day: parsed.date() }
});

[Kurren Nischal]

Thank you for your response, I'm still getting used to the polymer framework.
I've changed this line in the formatString setter:

this.i18n.formatDate = d => moment(d).format(str);

to this:

this.set('i18n.formatDate', d => moment(d).format(str));

And it works now 😄