8

I have nuxt.js app, which uses vuejs-datepicker:

<template>
<!-- ... -->

    <DatePicker :value="datePicker.value" />
 <!-- ... -->
 </template>

and bunch of date variables:

<script>
import DatePicker from 'vuejs-datepicker'
import { DateTime } from 'luxon'

const moment = require('moment')

const date = new Date(2016, 8, 16)
const date2 = moment('2016-09-16').toDate()
const date3 = DateTime.local(2016, 9, 16).toJSDate()

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      datePicker: {
        mondayFirst: true,
        format: 'dd.MM.yyyy',
        value: date
      }
    }
  }
}

When I bind its 'value' property to usual Date variable 'date', everything is ok, but when I choose date2 or date3, I get this annoying warning

[Vue warn]: Invalid prop: custom validator check failed for prop "value".

found in

---> <DatePicker>
       <StaticPositionsTab> at components/StaticPositions.vue
         <BTab>
           <BTabs>
             <Pages/index.vue> at pages/index.vue
               <Nuxt>
                 <Layouts/default.vue> at layouts/default.vue
                   <Root>

I found custom validator for value property and it is very straightforward and simple and return true in all three cases:

value: {
      validator: function (val) { return utils$1.validateDateInput(val); }
    }

...

validateDateInput (val) {
    return val === null || val instanceof Date || typeof val === 'string' || typeof val === 'number'
  }

but what makes the difference then? Could it be Vue.js bug itself?

Andrey Khataev
  • 1,303
  • 6
  • 20
  • 46

1 Answers1

3

date2 and date3 are object, while value requires null | Date | string | number

const date2 = moment('2016-09-16').toDate()
const date3 = DateTime.local(2016, 9, 16).toJSDate()

typeof date2 // object
typeof date3 // object

You should use .toString() to convert them to string

const date2 = moment('2016-09-16').toString()
const date2 = moment('2016-09-16').toISOString()
const date3 = DateTime.local(2016, 9, 16).toString()

or using unix timestamp

const date2 = moment('2016-09-16').unix()
const date3 = moment('2016-09-16').valueOf()
const date4 = moment('2016-09-16').getTime()
const date5 = DateTime.local(2016, 9, 16).valueOf()
ittus
  • 21,730
  • 5
  • 57
  • 57
  • 1
    this is very strange... all of them are objects, including Date itself, you can see it in my codesandbox snippet https://codesandbox.io/s/f96vz. Moreover, you can see that all of date, date2 and date3 are instances of Date. But.. in browser console. In server side console latter two are not Date instances! https://ibb.co/yg4hhxt – Andrey Khataev May 16 '19 at 05:38
  • Interesting. I saw that `typeof` and `instanceof` are very different. Might be you should convert to string or unix timestamp to make it works on both server and client. – ittus May 16 '19 at 05:43