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 。

對其進行修復后，只需按照本教程自定義日歷即可（請檢查本教程中的 Available Props ）。

並記得打開瀏覽器控制台以檢查任何錯誤。

以下是一個演示，可讓您自定義<datepick>中的background ， open date和bootstrap styling 。

PS：根據教程，如果直接使用CDN，則必須使用<vuejs-datepicker>代替<datepicker>

PS： datepicker提供的道具可能無法滿足您的要求，然后您必須查看日歷的dom樹，然后添加css選擇器對其進行自定義，就像我為更改背景所做的那樣。

更新：每次更改打開日期時，克隆出一個新的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> 

Answer 2

您的問題可以分為三個部分，它們是 1.如何在 vue.js 日期選擇器上應用樣式 2.如何使日期從當前日期開始（禁用之前的日期） 3.如何更改語言

注意：您的代碼有一個語法錯誤，您在數據方法中使用了 method 屬性，請首先解決這個問題

1.在你的日期選擇器上應用樣式我之前已經在這個鏈接上回答過，通過它做 go https://stackoverflow.com/a/71546906/18083887 2.如何讓你的日期選擇器日歷從當前日期開始：回答: 在 vue 日期選擇器 package 中有一些可用的道具允許你這樣做，它是：disabledDates 道具見下面的例子

<datepicker
  v-model="startDate"
  placeholder="Ends On"
  :open-date="new Date()"
  :disabledDates="disabledDates">
 </datepicker>    

在您的數據屬性中執行以下操作

data (){
  return{
      disabledDates:{
       to: new Date(Date.now() - 8640000)
      }
    }
  }

然后你會看到以前的日期在日歷中被禁用