Using : typeable="true" not expected behavior

[hildorjr]

If using : typeable="true" on the component, when selecting a date that is after today's date, it doesn't successfully select it. After trying to select a date the input clears.

An example: Today's date: 2018-11-11 Selected date: 2018-11-12 Component's date is blank

Here is whats my component looks like: <datepicker :typeable="true" v-model="page.due_at" id="due" input-class="op-custom-input" format="dd/MM/yy" :language="ptBR"></datepicker>

It would be awesome to get some help!

[axtg]

I ran into similar issues with typable set to true. With format set to dd-MM-yyyy, if I use the dialogue to select 1-1-1990 it shows the proper timestamp in Vue inspector (1 Jan). If I then type (not dialogue) to correct 1-1-1990 for 1-2-1990, the expected behavior is to switch from 1 Jan to 1 Feb (given format dd-MM-yyyy). But instead actual behavior is to set the timestamp to 2 Jan (so mm-dd instead of dd-mm).

Only solution I see is to disable typable.

[lexcode]

Anyone found a fix for this? I am facing the same issue. When you type the actually day you're typing the month instead even changing the format with format="dd/MM/yyyy"

[axtg]

No :( I disabled typable(=false) for the time being.

[korsarNek]

I don't have a solution either but some extra info to the problem. In the date picker is this function:

   /**
     * nullify the typed date to defer to regular formatting
     * called once the input is blurred
     */
    inputBlurred: function inputBlurred () {
      if (this.typeable && isNaN(Date.parse(this.input.value))) {
        this.clearDate();
        this.input.value = null;
        this.typedDate = null;
      }
      this.$emit('closeCalendar');
    },

I use a custom format function which can't be read by Date.parse, so when someone deselects the input field, the date disappears. The format function looks like this:

if (!date) {
    return '';
}

return date.toLocaleDateString('de-DE', {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric'
});

The problem also only seems to occur when the day part is higher than 12.

[williamweckl]

Same issue here :(

[regiszanandrea]

Same issue here too 👎

[sylann]

I have the same issue. I don't know if it's the case for everyone, but at least for you korsarNek, I can tell it's because there is somewhere in the logic of vuejs-datepicker something that doesn't take localisation into account when validating the date.

Such that when you have a date like 12/12/2019, the date is interpreted as MM/dd/yyyy instead of dd/MM/yyyy

With the example above it works, because 12 is a valid month, but if you try to enter 16/12/2019, the date will be invalid.

This is truly a common problem of dates for non american people. (damned us dates)

Edit: I have checked, and clearly Date.parse is responsible. So I suggest that we parse properly the date given the selected language.

EDIT 2: Also, this issue is a duplicate of #597 and a merge request is currently available