2

我正在尝试自定义 queryBuilder 并尝试使用日期选择器对其进行自定义。我想在输入字段中显示日期选择器供参考：- 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

4

1 回答 1

5

它没有加载插件，因为没有加载引导日期选择器 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>
于 2017-10-10T19:30:48.140 回答