javascript - 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 中的 Available Props)。

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

下面是一个允许您自定义 background 的演示, open date , bootstrap styling在<datepick> .

PS:根据教程，如果直接使用CDN，必须使用<vuejs-datepicker>相反 <datepicker>

PS:可能是datepicker提供的 Prop 不能满足您的要求，那么您必须查看该日历的 dom 树，然后添加您的 css 选择器以对其进行自定义，就像我为更改背景所做的那样。

更新:每次改变open Date时克隆出一个新的Date对象，否则不会触发响应。

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>