Date formating of DatePicker in Vue.js

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.

you can also use moment.js for Date formating of DatePicker

Udal Pal
– Udal Pal

2019-08-10 05:37:28 +00:00
Commented Aug 10, 2019 at 5:37 — Udal Pal
– Udal Pal, Commented Aug 10, 2019 at 5:37

lub0v · Accepted Answer · 2019-08-10 05:30:20Z

4

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.

answered Aug 10, 2019 at 5:30

lub0v

1,00911 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SongZeng · Accepted Answer · 2019-08-10 06:20:11Z

1

you can use Function formatter

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

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

answered Aug 10, 2019 at 6:20

SongZeng

1611 silver badge4 bronze badges

Comments

Udal Pal · Accepted Answer · 2019-08-10 06:42:04Z

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

Andrew Vasylchuk · Accepted Answer · 2019-08-10 06:43:11Z

0

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>

answered Aug 10, 2019 at 6:43

Andrew Vasylchuk

4,7792 gold badges14 silver badges31 bronze badges

Collectives™ on Stack Overflow

Date formating of DatePicker in Vue.js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related