how to set date to datepicker ?

[mohammadfiroozi]

how to set date from data model to datepicker and show it in datepicker?

[alireza-ab]

Hi @mohammadfiroozi

In single mode use string and in range mode use array. (date must be gregorian)

<date-picker v-model="date" mode="single"></date-picker>

export default {
  data() {
    return {
      date: "2021/05/12"
    }
  }
}

---

<date-picker v-model="date" mode="range"></date-picker>

export default {
  data() {
    return {
      date: ["2021/05/12", "2021/05/15"]
    }
  }
}

[mohammadfiroozi]

this not working when i set it in created life cycle or other method,

<date-picker v-model="formValues.birthDate" mode="single"></date-picker>

` created() {

this.formValues= { nationalCode: this.nationalCode, birthDate: "2021/05/12" };

} `

[alireza-ab]

The data model must be filled before the component is mounted. I suggest using beforeMount to set the data model.

If you can not set the data model before mount, use this way:

<date-picker v-model="date" mode="single" ref="dp"></date-picker>

import { PersianDate } from "@alireza-ab/vue-persian-datepicker"
export default {
  data() {
    return {
      date: null
    }
  },
  created(){
    this.$refs.dp.selectDate(new PersianDate("2021/5/12"), "date");
  }
}

In the next version, I add a better way to set the data model.

[alireza-ab]

Hi @mohammadfiroozi the new version is published and I add the setDate method for your problem.

<date-picker v-model="date" mode="single" ref="dp"></date-picker>

export default {
  data() {
    return {
      date: null
    }
  },
  mounted(){
    this.$refs.dp.setDate("2021/5/12");
  }
}

I suggest setting the data model before the component is mounted. use this way, after the component is mounted.

[honarmanly]

$ref is not defined in created phase, but I used it in mounted and it works

[alireza-ab]

@honarmanly Yes. it's right. I fix it.

[honarmanly]

@honarmanly Yes. it's right. I fix it.

thanks