ヴュー2日付ピッカーコンポーネント

私はブートストラップ日付ピッカーを使用してVueの2コンポーネントを作成しようとしていますが、日付が選択された後、入力を更新しようとして立ち往生していますが、ここに私のコードは次のとおりです。ヴュー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); 
     }); 
    }); 
}

をしかし、それは今のページに日付ピッカーのすべてのインスタンスの値を更新。選択したDatepickerのみを更新するように設定するにはどうすればよいですか？

出典

2016-10-12 Pedro

初心者にする必要はありませんか一度コンポーネントが取り付けられたら、同様にそれをライジングする。 $（ '。datepicker'）を介して。datepicker（options）？ vue 2.0では、これをこの内部で行うことを忘れないでください。呼び出しの前にDOM要素が存在することを確認する$ nextTickメソッド呼び出し。 – Nik

あなたはv-onを試しましたか：change event？ –

は、最終的な作業コンポーネントです：

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

こんにちは、どこにブートストラップの日付ピッカーをロードしますか？それは単に 'require（ 'bootstrap-datepicker'）'ですか？ '$（...）.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

私は正しい方向に私を指してくれてありがとう、私はこのコードは、ブートストラップ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

ヴュー2日付ピッカーコンポーネント

答えて

関連する問題