的Vue 2日期選擇器組件

我試圖創建一個使用引導日期選擇一個Vue公司2組件，但我陷入試圖選擇日期後更新輸入，這裏是我的代碼：的Vue 2日期選擇器組件

Vue.component('datepicker', { 
template: '\ 
    <input class="form-control datepicker"\ 
     ref="input"\ 
     v-bind:value="value"\ 
     v-on:input="updateValue($event.target.value)"\ 
     v-on:blur="updateValue($event.target.value)"\ 
     v-on:focus="updateValue($event.target.value)"\ 
     data-date-format="dd-mm-yyyy"\ 
     data-date-end-date="0d"\ 
     placeholder="dd-mm-yyyy"\ 
     type="text" />\ 
', 
props: { 
    value: { 
     type: String, 
     default: moment().format('DD-MM-YYYY') 
    } 
}, 
mounted: function() { 

}, 
methods: { 
    updateValue: function (value) { 
     this.$emit('input', value); 
    }, 
} 
});

的值更新罰款如果通過鍵盤輸入，而不是在日曆中選擇。任何想法如何通過日曆獲取日期更新值？

** **更新

我已經得到了下面的代碼工作：

mounted: function() { 
    let self = this; 
    this.$nextTick(function() { 
     $('.datepicker').datepicker({ 
      startView: 1, 
      todayHighlight: true, 
      todayBtn: "linked", 
      autoclose: true, 
      format: "dd-mm-yyyy" 
     }) 
     .on('changeDate', function(e) { 
      var date = e.format('dd-mm-yyyy'); 
      self.updateValue(date); 
     }); 
    }); 
}

但現在更新日期選擇器的網頁上的所有實例的值。我怎樣才能設置它，所以它只會更新所選日期選擇器？

來源

2016-10-12 Pedro

不需要你初始化嗎？一旦組件被安裝，例如，也可以使其變得容易。通過$（'。datepicker'）。datepicker（options）？在vue 2.0中，請記住在this。$ nextTick方法調用中執行此操作，以確保在調用之前存在DOM元素。 – Nik

你有沒有試過v-on：改變事件？ –

這裏是最後的作業組件：

Vue.component('datepicker', { 
template: '\ 
    <input class="form-control datepicker"\ 
     ref="input"\ 
     v-bind:value="value"\ 
     v-on:input="updateValue($event.target.value)"\ 
     data-date-format="dd-mm-yyyy"\ 
     data-date-end-date="0d"\ 
     placeholder="dd-mm-yyyy"\ 
     type="text" />\ 
', 
props: { 
    value: { 
     type: String, 
     default: moment().format('DD-MM-YYYY') 
    } 
}, 
mounted: function() { 
    let self = this; 
    this.$nextTick(function() { 
     $(this.$el).datepicker({ 
      startView: 1, 
      todayHighlight: true, 
      todayBtn: "linked", 
      autoclose: true, 
      format: "dd-mm-yyyy" 
     }) 
     .on('changeDate', function(e) { 
      var date = e.format('dd-mm-yyyy'); 
      self.updateValue(date); 
     }); 
    }); 
}, 
methods: { 
    updateValue: function (value) { 
     this.$emit('input', value); 
    }, 
} 
});

來源

2016-10-12 06:05:05 Pedro

你好，你在哪加載bootstrap datepicker？它只是'require（'bootstrap-datepicker'）'？我不斷收到一個js錯誤，指出'$（...）。datepicker不是一個函數' –

我只是使用

當初始化日期選擇器，你可以在選擇的項目中選擇什麼方法應該叫註明：

mounted: function() { 
    let self = this; 
    let args = { 
     format: 'DD-MM-YYYY', 
     placeholder: 'dd-mm-yyyy', 
     onSelect: function(dateText) { 
     self.updateValue(dateText); 
     } 
    }; 
    this.$nextTick(function() { 
     $('.datepicker').datepicker(args) 
    }); 
}

來源

2016-10-12 04:52:37 Nik

感謝您指出我在正確的方向，我猜這個代碼是針對不同日期選擇器而不是Bootstrap Datepicker。看到我更新的問題。 – Pedro

這樣你沒有得到所選日期的覆蓋，你不會丟失你寫的文字

this.$nextTick(function() { 
      $(this.$el).datepicker(args).on('changeDate', function(e:any) { 
      var date = e.format(format); 
      var sval:string = e.currentTarget.__vue__.$refs.input._value; 
      //console.log(sval);    
      //so that value doesnt get erased everytime i put one character there, wait to have more 
      if(sval.length>2){ 
      self.updateValue(date); console.log('upate'+date+sval); 
      } 
     }).on('hide', function(e:any) { 
      var date = e.format(format); 
      var sval:string = e.currentTarget.__vue__.$refs.input._value;    
      self.updateValue(date); console.log('upate2'+date+sval);    
     }); 
     });

來源

2017-01-26 07:01:44 Jack

相關問題

的Vue 2日期選擇器組件

回答

相關問題