vuejs-datepicker start with current date, add style

Question

I am occupying the vue-datepicker component for an input that shows the date that I have in the form. I need to make the date start on the current day and not be able to choose previous days, also change the language, the component dont let me add style

This is the component I am using https://github.com/charliekassel/vuejs-datepicker

I leave part of the summary code:

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

Any ideas? I occupy Vuejs 2 and vuejs-datepicker

Answer 1

There is one syntax error in your codes, you need to move method: {} out of data(), and it is methods, not method.

After fixed it, just follow the tutorial to customize your calendar (check Available Props in the tutorial).

And remember to open your browser console to check any errors.

Below is one demo which allow you customize background, open date, bootstrap styling in the <datepick>.

PS: based on the tutorial, if directly using CDN, have to use <vuejs-datepicker> instead <datepicker>

PS: probably the props provided by datepicker can't meet your requirements, then you have to look into the dom tree for that calendar, then add your css selector to customize it, like what I did for changing background.

Update: clone out one new Date object when every time change open Date, otherwise it will not trigger the reactivity.

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/[email protected]/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>