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()，并且是methods，而不是method。

固定它后，只要按照教程来定制您的日历（查看可用的道具在本教程）。

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

下面是一个演示，让你自定义background，open date，bootstrap styling在<datepick>。

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>