代码之家 › 专栏 › 技术社区 › abu abu

Vue.js中日期选择器的日期格式

datepicker vue.js javascript

abu abu · 技术社区 · 5 年前

我正在Vue.js项目中使用下面的日期选择器。

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 .

谢谢大家。

4 回复 | 直到 5 年前

lub0v 5 年前

尝试

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

在文件里 https://www.npmjs.com/package/vuejs-datepicker 尽管上面说

SongZeng 5 年前

可以使用函数格式化程序

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

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

Udal Pal 5 年前

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>

Andrew Vasylchuk 5 年前

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>

推荐文章

OccamsRazor · MUI v5日期选择器:有没有办法移除SwitchViewButton?

2 年前

Maria · 如何将DatePicker(@mui)值提升到父组件?

2 年前

Liana · React DayPicker样式占位符

6 年前

Mr world wide · 如何将Bootstrap 3 Datepicker自定义为只有日期而没有时间戳

6 年前

Malik Mahsam Awan · 角度4中显示的日期落后一个月

6 年前

Corey · 安装“element ui”:“^2.3.7”时,如何在“date picker”中禁用天数数组?

6 年前

Sinem · 如何打开自动日期选择器范围出发

6 年前

user3794667384 · 增加分钟工作,但不增加小时?

6 年前

kry · 单击标签上的JQuery datepicker

6 年前

Nuwan Withanage · Android日期选择器片段不能设置为自定义日期

6 年前