Vue.js中DatePicker的日期格式

Question

I am using below DatePicker in my Vue.js project.

https://www.npmjs.com/package/vuejs-datepicker

My code is like below

<script>
  import Datepicker from 'vuejs-datepicker';
  export default {
    components: { Datepicker },
        data() {
          return  {
            dateVal : new Date(),
          }
       }
  }
</script>

HTML code is like below

<tr>
  <td class="ui header">Applied Date</td>
    <td>
       <Datepicker placeholder="Applied Date" v-model="this.dateVal"></Datepicker>
    </td>
</tr>

I am getting Date Sat Aug 10 2019 11:08:57 GMT+0600 . But I would like to get Date 08/10/2019 .

Thanks All.

Answer 1

Try

<Datepicker placeholder="Applied Date" v-model="this.dateVal" format="MM/DD/yyyy"></Datepicker>

it is in the documentation https://www.npmjs.com/package/vuejs-datepicker although it says

This is not very robust at all - use at your own risk! Needs a better implementation.

Answer 2

you can use Function formatter

https://www.npmjs.com/package/vuejs-datepicker#function-formatter

https://github.com/charliekassel/vuejs-datepicker/issues/692

Answer 3

 new Vue({ el: '#app', data() { return { dateVal : moment(this.dateVal).format('MM/DD/YYYY') } }, components: { vuejsDatepicker }, mounted(){ console.log(this.dateVal); } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vuejs-datepicker"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <div id="app"> <td class="ui header">Applied Date</td> <td> <vuejs-datepicker placeholder="Applied Date" v-model="this.dateVal"></vuejs-datepicker> </td> </div> 

you can try like this using moment.js

Answer 4

 const app = new Vue({ el: '#app', components: { vuejsDatepicker } }) 

 <div id="app"> <vuejs-datepicker format="MM/dd/yyyy"></vuejs-datepicker> </div> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vuejs-datepicker"></script>