CODEWITHSUNDEEP
javascriptjquerydatepickerjquery-query-builder
sahil
sahil

Reputation: 109

Date-picker with queryBuilder

I am trying to customize the queryBuilder and trying to customize it with date-picker.I want to show datepicker in input field For reference:- http://querybuilder.js.org/.

I am trying to use below code. For your reference you can try this at codePen and link to codePen is given below.

$('#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

Upvotes: 2

Views: 6363

Answers (1)

jeremy04
jeremy04

Reputation: 314

It's not loading the plugin, because the bootstrap datepicker JS library isn't loaded.

Your code pen example requires the 'bootstrap datepicker' library to be added via "Settings", you need to add to external Javascript:

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

Here's 'just datepicker':

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

JS Code:

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>

Upvotes: 5

Related Questions