Daterangepickerはvueと統合されており、vueは日付コントロール時間の変更解決方法を得ることができません.
2203 ワード
バックエンド管理プロジェクトではvueを使用してフロントエンドプロジェクトの開発を行いますが、Vueはサードパーティ製プラグインによるデータの変化を実際に傍受できないことを知っています.JQueryのようなjsフレームワークによる要素値の修正も得られません.日付コントロールdaterangepickerはJQueryに基づいて実現されます.
したがって、実際には日付コントロールで日付を変更したクリックが表示され、vueでは対応する値を取得できません.
次に、Eventイベントをアクティブにトリガーするソリューションの1つを説明します.以下は関連コンテンツの一部コードです.
まず、日付コントロールdaterangepicker関連依存jsおよびcssを導入します.
もちろん,jQuery のフレームワークを する がある.
ページの された に コントロールのinputを します.
ここで v-modelはvueのopenDateとバインドしたいのですが、 のjsでは な をしないと、vueでこのフィールドの を できません.
jsでは、 コントロールを し、DOMオブジェクト のオリジナルinputイベントをトリガーします.
に しなければならないのは のon の でhideに して.Daterangepickerイベントは を い, で を でトリガする.
このinputのopenDateプロパティについては、vueの コードは のとおりです.
これにより、 コントロールが しく し、vueも コントロールの の を できます.
リンク『daterangepickerとvueを し、vueは コントロール の を ることができない』
したがって、実際には日付コントロールで日付を変更したクリックが表示され、vueでは対応する値を取得できません.
次に、Eventイベントをアクティブにトリガーするソリューションの1つを説明します.以下は関連コンテンツの一部コードです.
まず、日付コントロールdaterangepicker関連依存jsおよびcssを導入します.
もちろん,jQuery のフレームワークを する がある.
ページの された に コントロールのinputを します.
ここで v-modelはvueのopenDateとバインドしたいのですが、 のjsでは な をしないと、vueでこのフィールドの を できません.
jsでは、 コントロールを し、DOMオブジェクト のオリジナルinputイベントをトリガーします.
//
$(function () {
$('#openDate').daterangepicker({
showWeekNumbers: false,
timePicker: false,
timePickerIncrement: 1,
singleDatePicker: true,
startDate: moment(),
maxDate: moment(),
locale: {
// cancelLabel: ' '
format: "YYYY-MM-DD", //
applyLabel: ' ', //
cancelLabel: ' ', //
customRangeLabel: ' ',
daysOfWeek: [' ', ' ', ' ', ' ', ' ', ' ', ' '],
monthNames: [' ', ' ', ' ', ' ', ' ', ' ',
' ', ' ', ' ', ' ', ' ', ' '
],
firstDay: 1
}
}).on("hide.daterangepicker",function (ev) {
// DOM input
this.dispatchEvent(new Event('input'))
});
});
に しなければならないのは のon の でhideに して.Daterangepickerイベントは を い, で を でトリガする.
このinputのopenDateプロパティについては、vueの コードは のとおりです.
var vm = new Vue({
//....
data: {
//....
openDate:"",
//....
},
//...
});
これにより、 コントロールが しく し、vueも コントロールの の を できます.
リンク『daterangepickerとvueを し、vueは コントロール の を ることができない』