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.

После исправления просто следуйте инструкциям, чтобы настроить календарь (отметьте Доступные реквизиты в в руководстве ).

И не забудьте открыть консоль браузера, чтобы проверить наличие ошибок.

Ниже приведено одно демо, которое позволяет настроить background, open date, bootstrap styling в <datepick>.

PS: на основе учебника, если непосредственно используется CDN, вместо <datepicker>

необходимо использовать <vuejs-datepicker>

PS: вероятно, реквизиты, предоставленные datepicker, не могут удовлетворить ваши требования, тогда вам нужно заглянуть в дерево 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.setDate(this.openDate.getDate() + 30)
    }
  }
})

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