Dynamisches Startdatum für vue.js + bootstrap datepicker

Question

Ich versuche, ein dynamisches Startdatum für einen Bootstrap-Datumsauswahl bei der Verwendung von Vuejs zu implementieren. Im Folgenden finden Sie ein Beispiel für das, was ich derzeit in meinem Code habe. Die Verwendung von -30d oder eines Datums, das als 01-01-2016, aber nicht 2016-01-01 formatiert ist, funktioniert.

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

Der {{sale.saleDate}} in den p-Tags zugegriffen werden kann, und zeigt ein Datum wie '2016.01.27'. Die Änderung von 'Start-Datum' auf 'Datum-Start-Datum' funktioniert nicht. In der Datepicker-Anweisung habe ich ...

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

Wie kann ich das Startdatum dynamisch angezeigt bekommen?

Answer 1

ich ein Beispiel hier posten:

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