queryBuilderを使用した日付ピッカー

Question

queryBuilderをカスタマイズし、date-pickerでカスタマイズしようとしています。入力フィールドにdatepickerを表示します。 参照： - http://querybuilder.js.org/。

私は以下のコードを使用しようとしています。参考までに、codePenでこれを試してみてください。codePenへのリンクは以下にあります。

$('#builder-widgets').on('afterCreateRuleInput.queryBuilder', function (e, rule) { 

    if (rule.filter.plugin === 'datetimepicker') { 
     var $input = rule.$el.find('.rule-value-container [name*=_value_]'); 
     $input.on('dp.change', function() { 
      $input.trigger('change'); 
     }); 
    } 
}); 


$('#builder-widgets').queryBuilder({ 
    plugins: ['bt-tooltip-errors'], 
    filters: [{ 
    id: 'date', 
    label: 'datetimepicker', 
    type: 'datetime', 
    plugin: 'datetimepicker', 
    plugin_config: { 
    } 
    }] 
}); 

https://codepen.io/mramart/pen/oLwrJN

Answer 1

ブートストラップ日付ピッカーJSライブラリがロードされていないので、プラグインをロードしていません。

あなたのコードペンの例では、「設定」を経由して追加する「ブートストラップ日付ピッカー」ライブラリを必要とし、あなたが外部のJavaScriptに追加する必要があります。

「https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js」

ここにちょうど日付ピッカーは「です：

https://codepen.io/anon/pen/WZJqjd?editors=1011

JSコード：

var rules_widgets = { 
    condition: 'OR', 
    rules: [{ 
    id: 'date', 
    operator: 'equal', 
    value: '1991/11/17' 
    }] 
}; 

$('#builder-widgets').queryBuilder({ 
    plugins: ['bt-tooltip-errors'], 

    filters: [{ 
    id: 'date', 
    label: 'Datepicker', 
    type: 'date', 
    validation: { 
     format: 'YYYY/MM/DD' 
    }, 
    plugin: 'datepicker', 
    plugin_config: { 
     format: 'yyyy/mm/dd', 
     todayBtn: 'linked', 
     todayHighlight: true, 
     autoclose: true 
    } 
    }], 

    rules: rules_widgets 
}); 

$('#btn-reset').on('click', function() { 
    $('#builder-widgets').queryBuilder('reset'); 
}); 

$('#btn-set').on('click', function() { 
    $('#builder-widgets').queryBuilder('setRules', rules_widgets); 
}); 

$('#btn-get').on('click', function() { 
    var result = $('#builder-widgets').queryBuilder('getRules'); 

    if (!$.isEmptyObject(result)) { 
    alert(JSON.stringify(result, null, 2)); 
    } 
}); 

HTML：

<div id="builder-widgets"></div> 
    <button class="btn btn-success" id="btn-set">Set Rules</button> 
    <button class="btn btn-primary" id="btn-get">Get Rules</button> 
    <button class="btn btn-warning" id="btn-reset">Reset</button>