Vue.js --時間控件的問題

 

template:
<Col span="8">
    <FormItem :label="$t('l_NewServerstartdate')" prop="newserverstartdate">
      <DatePicker type="date" :value="getNowFormatDate(this.formItem.newserverstartdate,'start')" value-format="yyyy-MM- dd" :options="disabledDate"         :placeholder="$t('msg_enter_NewServerstartdate')" v-model="formItem.newserverstartdate" @on-change="formItem.newserverstartdate=$event" style="width:100%" >            </DatePicker>
   </FormItem>
</Col>

@on-change="formItem.newserverstartdate=$event"：當選擇時間變化時，賦值。

value=getNowFormatDate：將時間格式話（yyyy-mm-dd）以后獲取。

:options="disabledDate"  ：關於時間按鈕不可編輯的問題(大於365天不可編輯)

 

js:
data () {
  return {
     disabledDate: this.endDate(),
}
methods: {
endDate(){
let self = this
return {
disabledDate(date){
if(self.lastworkingdate)
return date && (date.valueOf() > new Date((new Date(self.lastworkingdate)).setDate((new Date(self.lastworkingdate)).getDate() + 365)));
}
}
},

  getNowFormatDate(valdate,val) {

               if(valdate=="")

               {return "";}

               else

               {

                    var date = new Date(valdate);

                    var seperator1 = "-";

                    var year = date.getFullYear();

                    var month = date.getMonth() + 1;

                    var strDate = date.getDate();

                    if (month >= 1 && month <= 9) {

                         month = "0" + month;

                    }

                    if (strDate >= 0 && strDate <= 9) {

                         strDate = "0" + strDate;

                    }

                    var currentdate = year + seperator1 + month + seperator1 + strDate;

                         switch (val) {                                 

                              case "start":

                              this.formItem.newserverstartdate = currentdate;

                              break;

                              case "end":

                              this.formItem.newserverenddate = currentdate;

                              break;

                              case 'extension':

                              this.formItem.extension_ntaccount_date = currentdate;

                              break;

                         }

                    return currentdate;

               }

          },

}