How to put a / in vaadin-date-picker

Question

I am using a vaadin-date-picker with polymer. I would like to put the right slash by default when the user types in a date in US format. So if the user types 01152019, it should auto format the date to 01/15/2019. Right now if I enter date without the / , it wont take recognize the value.

Answer 1

You should set the parseDate method of the i18n property of your date picker so that it does what you want, for example, if you only wanted to accept date strings in US format but without slashes or hyphens you could do something like this:

const datePicker = something; // you probably did something like this.querySelector() to get it
datePicker.i18n = {
  // you can also set methods to format the date or the title and a few other things
  parseDate: dateString => {
    let month = parseInt(dateString.subString(0,2));
    let day = parseInt(dateString.subString(2,4));
    let year = parseInt(dateString.subString(4,8));
    return {day, month, year};
  }
};