Vue.js - How to show value in vue multi date picker when edit

1
votes

I am using https://www.npmjs.com/package/vue-multi-date-picker in my vuejs code

I want to know when I edit the form How to show selected dates in datepicker text.

for example I am using

<m-date-picker
    v-model="date"
    :lang="lang"
    :multi="multi"
    :always-display="false"
    :format="formatDate"
    data-parsley-required="true"
    :class="{
        'is-invalid':
            submitted &&
            $v.date.$error
    }"
>
</m-date-picker>

export default {
    name: "newspaper-result",
    components: {
        editor: Editor // <- Important part
    },
    data() {
        return {
            multi: true,
            lang: "en",
            date: [],
            notClassified: true,
            submitted: false
        };
    },
methods: {
        formatDate(date) {
            return date.toLocaleDateString();
        },
}

Now when I insert the date in this.date = date come from db gives error that date.toLocaleDateString(); is not a function

1
vue.jsvuejs2
what do you mean by when I edit? Did you add this data () { return { multi: true, date: [] } } code to the component? – Sowmyadhar Gourishetty
what do you mean by when I edit?² – Darlan D.
please read this https://stackoverflow.com/help/how-to-ask or down vote – Darlan D.
@DarlanDieterich please check the question now – manjinder
your import in main.js or use local with directive? – Darlan D.

1 Answers

0
votes

You are calling toLocaleDateString() function on a string, but strings don't have such function, this is why you are getting the error.

This function needs a properly constructed date object, not a string, so convert it using new Date():

formatDate(date) {
  return new Date(date).toLocaleDateString()
}