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中的可用道具）。

请记得打开浏览器控制台以查看错误。

以下是一个演示版，可让您自定义background中的open date，bootstrap styling，<datepick>。

PS：根据教程，如果直接使用CDN，则必须使用<vuejs-datepicker>代替<datepicker>

PS：可能datepicker提供的道具无法满足您的要求，那么您必须查看该日历的dom树，然后将您的css选择器添加到定制它，就像我改变背景所做的那样。

＆＃13;

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.setDate(this.openDate.getDate() + 30)
    }
  }
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

vuejs-datepicker以当前日期开头，添加样式

1 个答案: