How to set up a date field properly?

[jackysee]

I've tried to setup a date field, but the v-model seems to give me trouble. With following code, I simply cannot type anything to the text input.

<template>
  <div>
    <input type="text" v-model="user.startDate"/>
    <pre>{{ userData }}</pre>
  </div>
</template>

<script>
  import {ReactiveModel} from 'vue-rawmodel';
  
  class User extends ReactiveModel{
    constructor(data = {}){
      super(data);
      this.defineField('startDate', {
        type: 'Date'
      });
      this.populate(data);
    }
  }
  
  export default {
    data(){
      return {
        user : new User({
          vm: this,
          dataKey: 'user'
        })
      }
    },
    computed:{
      userData(){
        return this.user.serialize();
      }
    },
    watch:{
      user:{
        handler: user => user.$validate(),
        deep: true,
        immediate: true
      }
    }
  }
  
</script>

example link: https://www.webpackbin.com/bins/-KmkBG8Nku2cQp0DVO_m

[xpepermint]

Date is not a valid type when working with forms. In your case RawModel casts the received String value into Date and since everything you write represent an invalid date value, it always return null. Also note that a form will post your dataStart as String and you will use RawModel on the server to cast that value into a valid Date object.

[xpepermint]

Btw... you can paste (cmd+v) a valid date string (e.g. Fri Jun 16 2017 16:08:13 GMT+0200 (CEST)) into the field and it will work but you can not write it. You will need to use a special vue date component.

[jackysee]

So in this case I can only do validation on a valid date instance. If I want to validate the input string format, I have to use String and do the conversion somewhere else, right?

[xpepermint]

On the client side use the String type in that case.