CODEWITHSUNDEEP
datevue.js
Eem Jee
Eem Jee

Reputation: 1309

How to assign a blank date field as default value to a ui-datepicker in Vue.js

I have a ui-datepicker in vue.js and I want the field to be empty or blank as its default value.

<ui-datepicker
     label="Date"
     v-model="searchDate"
     :custom-formatter="picker9Formatter"
     :lang="picker12Lang">
</ui-datepicker>

export default {
    data(){
        searchDate : new Date(),
    }
}

With my code above, it returns the current date value. I have tried to do:

searchDate: '',
searchDate: moment('0000-00-00'),

but both of them throws an error saying:

Invalid prop: type check failed for prop "value". Expected Date, got String.

Now, how can I make a blank datepicker field?

Upvotes: 2

Views: 6013

Answers (2)

Phil
Phil

Reputation: 164832

Assuming you actually are using this component, it sounds to me like you just want to set "0000-00-00" as the placeholder.

For example

Vue.use(DatePicker.default); // don't worry about this, it's just for the demo

new Vue({
  el: "#app",
  data: {
    picker12Lang: 'en',
    searchDate: ''
  }
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <date-picker
       v-model="searchDate"
       :lang="picker12Lang"
       placeholder="0000-00-00">
  </date-picker>
  <pre>searchDate = {{ searchDate }}</pre>
</div>

FYI, the current version of that component no longer supports the custom-formatter prop.

As for the error message...

Invalid prop: type check failed for prop "value". Expected Date, got String.

I can't see that in anything I've tried so it must be coming from somewhere else.

Upvotes: 2

Atul Bansode
Atul Bansode

Reputation: 229

You can assign default date as new Date(0);

Upvotes: 0

Related Questions