Vue2-datepicker: [Bug] Datepicker "corrects" invalid date to new date

Created on 29 Sep 2020  路  4Comments  路  Source: mengxiong10/vue2-datepicker

Vue2-datepicker version:3.6.2
Vue version:2.6.12
Browser: Chrome

Steps to reproduce
Type in date: 32.10.2020
Tab away from input field
This can also be tested at https://mengxiong10.github.io/vue2-datepicker/index.html when using valueType (all 4 alternatives)
Reproduction Link or Source Code

Expected behavior
Expected date to be invalid

Actual behavior
Datepicker changes input date to be 01.11.2020,
that is surplus days or months (that don't exist in the calendar)
are added to create a new date object.
The bug is really in JavaScripts date object, that automatically transfers days or months when created.

Most helpful comment

It's the feature of the date parse lib, you can replace it with moment.

<template>
  <div id="app">
    <date-picker
      v-model="date"
      :formatter="momentFormat"
      value-type="format"
    ></date-picker>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      date: null,
      momentFormat: {
        // Date to String
        stringify: (date) => {
          return date ? moment(date).format("YYYY-MM-DD") : "";
        },
        // String to Date
        parse: (value) => {
          return value ? moment(value, "YYYY-MM-DD").toDate() : null;
        },
      },
    };
  },
};
</script>

All 4 comments

I麓m having the samme issue.
This could be viewed as a cool feature, but I think the vast majority of users won麓t positively type an invalid date, knowing that it will corrected.
Would be nice of this could be turned off, so that if I type in a pattern that doesen麓t match with the defined format, an error is thrown and the value is reset.

How did you get around it @marcusgsta ?

Did not get around this, still waiting for feedback :)

It's the feature of the date parse lib, you can replace it with moment.

<template>
  <div id="app">
    <date-picker
      v-model="date"
      :formatter="momentFormat"
      value-type="format"
    ></date-picker>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      date: null,
      momentFormat: {
        // Date to String
        stringify: (date) => {
          return date ? moment(date).format("YYYY-MM-DD") : "";
        },
        // String to Date
        parse: (value) => {
          return value ? moment(value, "YYYY-MM-DD").toDate() : null;
        },
      },
    };
  },
};
</script>

Sorry, I must have misunderstood the documentation!
Thanks alot! 馃憤

Was this page helpful?
0 / 5 - 0 ratings

Related issues

4spen picture 4spen  路  4Comments

shawjak3 picture shawjak3  路  5Comments

BuiHuyCuong picture BuiHuyCuong  路  5Comments

DragosPeta picture DragosPeta  路  3Comments

srv91 picture srv91  路  6Comments