CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Felipe
Felipe

Reputation: 327

vuejs-datepicker start with current date, add style

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

Upvotes: 4

Views: 20157

Answers (2)

Hasibul Alam Rahi
Hasibul Alam Rahi

Reputation: 312

Your questions can be divided to three portions and they are 1.How to Apply styling on the vue.js date picker 2.How to make the date start on current date( Disable the previous dates) 3.How to change the language

NB: Your code have a syntax error that is you have used the method property inside the data method , please solve this issue at first

1.Applying styling on your date picker I had previously answered it on this link , do go through it https://stackoverflow.com/a/71546906/18083887 2.How to Make your date picker calender to start from current date : Answer: In the vue date picker package there are some available props which allows you to do so and it is :disabledDates props see the following example

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

in your data property do the followings

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

Then you will see the previous dates disabled in the calender

Upvotes: 0

Sphinx
Sphinx

Reputation: 10729

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>

Upvotes: 7

Related Questions