Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using : typeable="true" not expected behavior #636

Open
hildorjr opened this issue Nov 21, 2018 · 7 comments
Open

Using : typeable="true" not expected behavior #636

hildorjr opened this issue Nov 21, 2018 · 7 comments

Comments

@hildorjr
Copy link

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
Copy link

axtg commented Nov 28, 2018

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
Copy link

lexcode commented Dec 4, 2018

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
Copy link

axtg commented Dec 4, 2018

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

@korsarNek
Copy link

korsarNek commented Dec 7, 2018

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
Copy link

Same issue here :(

@regiszanandrea
Copy link

Same issue here too 👎

@sylann
Copy link

sylann commented Jan 25, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants