Test vue+jquery plugin(datepicker)

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div id="app">
    <!--<date-picker v-model="date" :date-format="dateFormat"></date-picker>-->
    date1:{{date1}}<br/>
    date2:{{date2}}<br/>
    {{ischecked}}<br/>
    <date-picker v-model="date" :date-format="dateFormat"></date-picker>
    <date-picker v-model="date1" :date-format="dateFormat" ></date-picker>
    <date-picker v-model="date2" :date-format="dateFormat" :disabled="!ischecked" id="rtt"></date-picker>
  <!--<input type="date" v-model="date">-->
  <button @click="changeFormat">Change Format</button>  
  <input type="checkbox" v-on:change="chgstatus" >ChangeValue
  <!--<input type="button" value="chgdate" v-on:click="chgdate"/>-->
  <p>{{ date }}</p>
  </div>

JavaScript

function IsNullorEmpty(param) {
    if (param) {
        if (typeof (param) == "object")
            return false;
        if (typeof (param) == "string") {
            var trimpara = param.trim();
            if (trimpara)
                return false;
            else
                return true;
        }
    }
    else
        return true;    //為null/empty
}

Date.prototype.yyyymmdd = function (param) {
    var mm = this.getMonth() + 1; // getMonth() is zero-based
    var dd = this.getDate();
    var combing = IsNullorEmpty(param) ? '-' : param;

    return [this.getFullYear(),
    (mm > 9 ? '' : '0') + mm,
    (dd > 9 ? '' : '0') + dd
    ].join(combing);
};

var today = new Date().yyyymmdd();
//console.log(today);
/*
20201022:
問題1:由vue instance改值，jquery不吃
*/
Vue.component("date-picker", {
  template: "<input/>",
  props: ["dateFormat", "val"],
  /*data: function (){
  	return {
    	value: this.val   
    }   
  },*/  
  computed:{
  	value: function () {            
    	return this.val;
    }
  },
  watch: {
    value(val) {  
      $(this.$el).val(val);             
    },   
    dateFormat(dateFormat){
      $(this.$el).datepicker( "option", "dateFormat", dateFormat );
    }
  },  
  mounted: function() {
    var self = this;        
    
    $(this.$el).datepicker({
      changeMonth: true,	//相關設定
      changeYear: true,
      showMonthAfterYear: true,
      yearRange: "c-100:c+10",
      dateFormat: this.dateFormat,
      onSelect: function(date) {        
        self.$emit("input", date);
      }      
    });
    //for:inpute手動改值(全刪或手工改值)
    $(this.$el).datepicker().on("change", function (e) {
    	//DatePickerVue.$data.form.Date.value = $(this).val();            
      self.$emit("input", $(this).val());
    });
  },
  beforeDestroy: function() {
    $(this.$el)
      .datepicker("hide")
      .datepicker("destroy");
  }
});
var vapp = new Vue({
  el: "#app",
  data: {
  	ischecked: false,
    date: null,
    date1: today,
    date2: null,
   ...