Question

我正在Vue.js项目中的DatePicker下面使用

。

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

我的代码如下所示

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

HTML代码如下所示

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

我正在获取日期Sat Aug 10 2019 11:08:57 GMT+0600。但是我想获取日期08/10/2019。

谢谢。

Answer 1

尝试

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

它在文档https://www.npmjs.com/package/vuejs-datepicker中虽然说

这根本不是很可靠-使用后果自负！需要更好的实现。

Answer 2

您可以使用功能格式化程序

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>

您可以使用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>

Vue.js中DatePicker的日期格式

4 个答案: