[Bug] Cannot bind string and output as date

[shidcordero]

Vue2-datepicker version: 3.10.4 Vue version: 2.6.x Nuxt version: 2.15.8 Browser: Edge Version 99.0.1150.39

Steps to reproduce I am using graphql api and the api return the value for birthDate was in this string format YYYY-MM-DDTHH:mm:ss.sssZ. I want my v-model to have the value of Date type as our mutations only receive date type. Now I want it to bind that without any other hassle like setting birthDate to new Date(birthDate) everytime since we have this functionality when onblur we directly save the value so there's a constant changes on the value for that and manually setting it seems not be the best idea to fix this.

Reproduction Link or Source Code

<vue2-datepicker
                    id="birth-date"
                    v-model="candidate.birthDate"
                    :disabled="saving"
                    :default-panel="'year'"
                    :clearable="false"
                    :append-to-body="true"
                    class="form-control"
                    format="DD/MM/YYYY"
                    placeholder="dd/mm/yyyy"
                    :class="validated ? (valid ? 'is-valid' : 'is-invalid') : ''"
                    @change="onBlurForm"
                  />

where birthDate has the format of YYYY-MM-DDTHH:mm:ss.sssZ like 2025-02-28T16:00:00.000Z

Expected behavior Should bind v-model - as string and output it as date.

Actual behavior Does not show my value supplied on the date picker and when I choose a new date it will clear it since the birthdate will become string again (because of onBlurForm saving it to the backend and will return back to string with format of YYYY-MM-DDTHH:mm:ss.sssZ

This is the library that I used before (https://www.npmjs.com/package/vuejs-datepicker) and it functions similar to what I want. But it lacks features that was available on this library.

[mengxiong10]

You can set candidate.birthDate= new Date(candidate.birthDate) when you got it from api. Or You can set value-type="YYYY-MM-DDTHH:mm:ss.sssZ" then the value of v-model is a string.

[shidcordero]

@mengxiong10 this incorrectly formats my date into 2021-01-01T00:00:00.000+08:00 instead of 2021-01-01T00:00:00.000Z resulting to the server rejecting the saving as it requires no time offset

Current code:

<vue2-datepicker
                    id="birth-date"
                    v-model="candidate.birthDate"
                    :disabled="saving"
                    :default-panel="'year'"
                    :clearable="false"
                    :append-to-body="true"
                    class="form-control"
                    :disabled-date="(date) => date > new Date()"
                    value-type="YYYY-MM-DDTHH:mm:ss.sssZ"
                    placeholder="dd/mm/yyyy"
                    :class="validated ? (valid ? 'is-valid' : 'is-invalid') : ''"
                    @change="onBlurForm"
                  />

[mengxiong10]

Replace value-type to use a computed value.

<datepicker v-model="value"   />

computed: {
  value: {
    get() {
      return new Date(candidate.birthDate)
    },
    set(date) {
      if (date) {
        candidate.birthDate = date.toJSON()
      }
    }
  }
}

[shidcordero]

@mengxiong10 that fixed my issue. thanks.