标签: vuejs-datepicker

我有 nuxt.js 应用程序，它使用vuejs-datepicker：

<template>
<!-- ... -->

    <DatePicker :value="datePicker.value" />
 <!-- ... -->
 </template>

和一堆日期变量：

<script>
import DatePicker from 'vuejs-datepicker'
import { DateTime } from 'luxon'

const moment = require('moment')

const date = new Date(2016, 8, 16)
const date2 = moment('2016-09-16').toDate()
const date3 = DateTime.local(2016, 9, 16).toJSDate()

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      datePicker: {
        mondayFirst: true,
        format: 'dd.MM.yyyy',
        value: date
      }
    }
  }
}

当我将其“value”属性绑定到通常的日期变量“date”时，一切正常，但是当我选择 date2 或 date3 时，我收到这个恼人的警告

[Vue warn]: Invalid …

vuejs-datepicker 在输入字段上设置 html required 属性无法按预期工作，并且提交没有输入值的表单。

<form>
  <datepicker placeholder="Select Date" required></datepicker> 
  <button>Submit</button>
</form>

你可以使用上面的代码并在这里测试：https : //codesandbox.io/s/p92k8l717

这是 repo 和 doc 的链接：https : //github.com/charliekassel/vuejs-datepicker

更新：

这是一个错误，我已将其作为问题在 github 上提出。老实说，该组件还没有真正准备好供主流使用。

vuejs-datepicker如果日期是 13 或更长，我将不接受 dd/mm/yy 格式。据推测，这是因为它将前两位数字解释为月份，因此拒绝任何大于 12 的数字。

日历弹出。您可以选择一个日期，它会显示在输入字段中。然而，一旦视野失去焦点，它就会被清除。

我尝试过使用静态字符串作为 的值format和函数。以下是功能版本。

HTML：

<div id="respond_by">
    <date-picker name="respond_by"></date-picker>
</div>

页面底部的脚本：

<script>
    $(function () {
        new Vue({ el: "#respond_by" });
    });
</script>

我的单个文件组件：

<template>
    <vue-date-picker placeholder="dd/mm/yy"
                     input-class="form-control"
                     :name="name"
                     :format="customDateFormat"
                     monday-first
                     typeable></vue-date-picker>
</template>

<script>
    import moment from 'moment';
    import DatePicker from 'vuejs-datepicker';

    export default {
        props : [
            'name'
        ],
        components: {
            'vue-date-picker' : DatePicker
        },
        methods: {
            customDateFormat(date) {
                return moment(date).format('DD/MM/YY');
            }
        }
    }
</script>

全局注册组件：

import …

我查看了这个vuejs-datepicker以将datepicker添加到我的项目中。

<div class="startDate">
    <datepicker
     v-model="startDate"
     format="YYYY-MM-DD"
     name="startDate"
     ></datepicker>
</div>

从“vue-date-picker”导入日期选择器；

<style scoped>
  .startDate {
   width: 150px;
   }
<style>

但是startDate 的宽度仍然显示238px，这是datepicker的默认宽度。