vuejs-datepicker는 현재 날짜로 시작하고 스타일 추가

vuejs-datepicker는 현재 날짜로 시작하고 스타일 추가

양식에 있는 날짜를 표시하는 입력을 위해 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를 점유하고 있다.

코드에 구문 오류가 하나 있습니다. 이동해야 합니다.method: {}밖으로data(), 그리고 이것은 메서드입니다.method.

수정 후 튜토리얼에 따라 캘린더를 커스터마이즈합니다(튜토리얼에서 사용 가능한 소품 선택).

브라우저 콘솔을 열어 오류를 확인해야 합니다.

아래는 커스터마이즈할 수 있는 데모입니다.background,open date,bootstrap styling에서<datepick>.

PS: 튜토리얼에 따르면 CDN을 직접 사용하는 경우<vuejs-datepicker>대신<datepicker>

PS: 아마도 다음 소품에서 제공하는datepicker요건을 충족할 수 없습니다.그러면 해당 달력의 돔 트리를 살펴보고 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>

당신의 질문은 세 부분으로 나뉘어져 있고, 그것들은 1개요.vue.js 달력 보기 2에 스타일을 적용하는 방법날짜를 현재 날짜로 시작하는 방법(이전 날짜 사용 안 함) 3.언어 변경 방법

NB: 코드에 데이터 메서드 내의 메서드 속성을 사용했다는 구문 오류가 있습니다. 먼저 이 문제를 해결하십시오.

1. 이전에 이 링크에서 답변한 달력 보기 스타일링을 적용합니다.https://stackoverflow.com/a/71546906/18083887 2.달력 보기 달력을 현재 날짜에서 시작하는 방법: 답변:vue 달력 선택 패키지에는 사용할 수 있는 소품이 몇 가지 있습니다.이러한 소품은 disabled Dates 소품입니다.다음 예를 참조해 주세요.

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

데이터 속성에서 다음을 수행합니다.

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

그러면 캘린더에 비활성화되어 있는 이전 날짜가 표시됩니다.

언급URL : https://stackoverflow.com/questions/50050861/vuejs-datepicker-start-with-current-date-add-style