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イベントをトリガーします.
//     
$(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は コントロール の を ることができない』