CODEWITHSUNDEEP
datepickervue.jsbootstrap-datepicker
andyjinkim
andyjinkim

Reputation: 21

Dynamic start date for vue.js + bootstrap datepicker

I am trying to implement a dynamic start date for a bootstrap datepicker while using vuejs. Below is an example of what I have in my code currently. Using -30d or a date formatted as 01-01-2016, but not 2016-01-01 works. 

<input type="text" name="cancelDate" id="cancelDate" autocomplete="off" class="form-control form-control-small"
  v-model="sale.cancelDate"
  v-bind:class="{ 'has-error': !validation.cancelDate }"
  v-datepicker start-date="{{sale.saleDate}}" />
<p>{{sale.saleDate}}</p>

The {{sale.saleDate}} in the p tags is accessible, and displays a date like '1/27/2016'. Changing 'start-date' to 'data-start-date' does not work. In the datepicker directive, I have...

var self = this;
$(self.el).datepicker({
  startDate: self.params.startDate,
  endDate: self.params.endDate,
  todayBtn: "linked",
  autoclose: true
});

How can I get the start-date to appear dynamically?

Upvotes: 2

Views: 4392

Answers (1)

Stefano Nepa
Stefano Nepa

Reputation: 500

I post an example here:

//script.js 
new Vue({
  el:"#app",
  data:function(){
    return { 
      startDate: moment().subtract(7, 'days').format('MM/DD/YYYY'),
      cancelDate: moment().format('MM/DD/YYYY')
    }
  },
  ready:function(){
    $('.datepicker').datepicker({ startDate: this.startDate });
  }
})


// index.html
<div id="app">
  <input class="datepicker" type="text" v-model="{{cancelDate}}" value="{{cancelDate}}" >
</div>

https://jsfiddle.net/nosferatu79/jfk97gp9/4/

Hope this help...

Upvotes: 1

Related Questions