vuejs-datepicker 从当前日期开始，添加样式

Question

我正在使用 vue-datepicker 组件来输入显示我在表单中的日期。我需要让日期从当天开始，不能选择前几天，还要更改语言，组件不让我添加样式

这是我正在使用的组件https://github.com/charliekassel/vuejs-datepicker

我留下部分摘要代码：

<template>
  <form>
     <datepicker :bootstrap-styling="true"
               class="form-control"
     </datepicker>
  </form>
</template>
<sctipt>
import Datepicker from 'vuejs-datepicker';
export default {  
  components: { 
    Datepicker,
  },
  data () {
    return {
          selectedDate: ''
    },
    method: {

    }
  }
</script>

有什么想法吗？我占用 Vuejs 2 和 vuejs-datepicker

Answer 1

你的代码有一个语法错误，你需要把method: {}移出data()，这是方法，不是method。

修复后，只需按照教程自定义您的日历（检查the tutorial中的可用道具）。

记得打开浏览器控制台检查任何错误。

下面是一个演示，它允许您在<datepick> 中自定义background、open date、bootstrap styling。

PS：根据教程，如果直接使用CDN，必须使用<vuejs-datepicker>而不是<datepicker>

PS：可能datepicker提供的props不能满足你的要求，那么你必须查看那个日历的dom树，然后添加你的css选择器来自定义它，比如我为改变背景做了什么。

更新：每次更改打开日期时克隆出一个新的日期对象，否则不会触发反应。

app = new Vue({
  el: "#app",
  components: {
  	vuejsDatepicker
  },
  data() {
    return {
      selectedDate: '',
      bootstrapStyling: true,
      openDate: new Date()
    }
  },
  methods: {
    changeBootstrapStyling: function () {
      this.bootstrapStyling = !this.bootstrapStyling
    },
    changeLanguage: function () {
      this.openDate = new Date(this.openDate.setDate(this.openDate.getDate() + 90))
    }
  }
})

.bg-red > div > div {
  background-color:red
}

.bg-white > div > div {
  background-color:white
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
<div id="app">
  <button @click="changeBootstrapStyling()">Change Bootstrap Styling</button>
  <button @click="changeLanguage()">Change Open Date</button>
  <form>
    <vuejs-datepicker :bootstrap-styling="true" :open-date="openDate"
               class="form-control" :class="{'bg-red':bootstrapStyling, 'bg-white':!bootstrapStyling}"></vuejs-datepicker>
  </form>
</div>