CODEWITHSUNDEEP
vue.jsdatepicker
Decrux
Decrux

Reputation: 207

Datepicker VueJS, correct visualize but not sending in the same format

We are using datepicker plugin but we saw that it visualizes in the correct date format, but it is send to the server/DB in the default format of datepicker.

<datepicker
  v-model="model.date"
  placeholder="Choose date"
  :format="DatePickerFormat"
  id="date"
  name="date">
</datepicker>

<script>
import Datepicker from 'vuejs-datepicker'

export default {
  components: {
     Datepicker
  }
data() {
    return {
       DatePickerFormat: 'dd/MM/yyyy',
       model: {
        date: ''
      }
    }
  }
}
</script>

In the input field it visualizes correct, but when the data is send by clicking the button Save, format is date: "2018-06-27T10:34:09.502Z" How can I standardize the both formats to be in "DD/MM/YYYY"?

Upvotes: 1

Views: 2722

Answers (3)

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

You did not define DatePickerFormat inside data option, you defined it as a custom property.

To access it you should use $opptions.DatePickerFormat.

So change :format="DatePickerFormat" to

:format="$options.DatePickerFormat"

Or else define it in the data option as

data() {
    return {
       model: {
        date: ''
      },
      DatePickerFormat: 'dd/MM/yyyy'
    }
  }

Upvotes: 0

Hashan94
Hashan94

Reputation: 115

Please use :value instead of v-model. It works for me!!!!

Upvotes: 0

Tharindu Thisarasinghe
Tharindu Thisarasinghe

Reputation: 3998

Add this valueType="format" attribute to your <date-picker> component.

So, the entire component will be like

<date-picker v-model="delivery_date" lang="en" type="date" valueType="format" :format="'YYYY-MM-DD'"></date-picker>

Now the returning value will be like 2020-09-06. You can set other valueTypes as well.

Checkout this page: https://mengxiong10.github.io/vue2-datepicker/index.html

Upvotes: 2

Related Questions