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

它没有加载插件，因为没有加载bootstrap datepicker JS库。

您的代码笔示例需要通过“设置”添加“bootstrap datepicker”库，您需要添加到外部Javascript：

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

这是'just datepicker'：

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>

查询构建器

1 个答案: