Vue.jsとjQueryのdatepicker / timepicker双方向バインディング

debugcn 投稿 Dev

ブライアンゼリップ

<input>jQueryのdatepickerやtimepickerが<input>値を更新する場合、要素を使用したVue.jsとの双方向バインディングは機能しません。バインディングは、ユーザーが内に入力した場合にのみ発生します<input>。

が<input>datepickerまたはtimepickerを介して更新されたときに、双方向バインディングを実行する必要があります。

私は最も簡単な方法でVue.jsとjQueryを使用しています-<script src=""></script>タグを介してhtmlファイル内からそれらをインポートします。

この問題は既知であり、解決策がありますが、私の問題よりも複雑な状況に対応しています。見つけたソリューションを基本的なユースケースに適合させる方法を理解するのに問題があります（つまり、カスタムディレクティブ、コンポーネント、またはイベントテンプレートを使用していません）。

ここにある私の作業コードのcodepenが。

そして、これが私の静的コードの主要部分です：

<form>
  <input v-model="title" name="title" type="text">
  <input v-model="shortDesc" name="shortDesc" type="text">
  <input v-model="date" name="date" type="text">
  <input v-model="time" name="time" type="text">
</form>

<script>
  var elm = new Vue({
    el: '#preview',
    data: {
      title: '',
      shortDesc: '',
      date: '',
      time: ''
    }
  })

  $(function(){
    $("input[name=date]" ).datepicker({
      dateFormat: 'DD, MM dd'
    });
  });


  $('input[name=time]').timepicker({'scrollDefault': 'now'});
</script>

Saurabh

私はそれを行うための純粋な方法を見つけることができませんが、datapickerのonSelectコールバックを使用してこれを行うことができ、このコールバックで日付変数の値を設定できます。

ここで動作中のcodepenを参照してください。

私はあなたのvueインスタンスにマウントされたブロックを追加しました：

var elm = new Vue({
  ...
  ...
  mounted () {
    var vm = this
    $('#datedate').datepicker({
      onSelect: function(dateText) { 
        vm.date = dateText
      }
   })
})

日付入力のid属性に追加されます：

<input v-model="date" name="date" class="block col-12 mb1 field" type="text"  id="datedate">

編集

timepickerにはdatepickerのようなonSelectオプションがないため、解決策は、timepickerデモドキュメントの「イベントの例」に実際に示されているchangeTimeイベントを使用することです。

以下のコードは、jQueryのdatepickerとtimepickerの両方のソリューションを備えた更新されたVueスクリプトを提供します。

var elm = new Vue({
  ...
  ...
  mounted() {
    var vm = this
    $('input[name=date]').datepicker({
      dateFormat: 'DD, MM dd',
      onSelect: function(dateText) {
        vm.date = dateText
      }
    }),
    $('input[name=time]').timepicker({'scrollDefault': 'now'}).on('changeTime', function() {
      vm.time = $('input[name=time]').val();
    })
  }
})

そして、これが@saurabhのdatepickerソリューションと@BrianZのtimepickerソリューションの両方を検証する新しいcodepenです。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]