CODEWITHSUNDEEP
javascriptvue.jsdatepicker
abu abu
abu abu

Reputation: 7022

Date formating of DatePicker in Vue.js

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.

Upvotes: 3

Views: 18386

Answers (4)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

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>

Upvotes: 0

Udal Pal
Udal Pal

Reputation: 232

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

Upvotes: 0

SongZeng
SongZeng

Reputation: 161

you can use Function formatter

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

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

Upvotes: 1

lub0v
lub0v

Reputation: 949

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.

Upvotes: 4

Related Questions