带查询生成器的日期选择器

问题描述：

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

答

这不加载插件，因为引导日期选择器未加载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>

带查询生成器的日期选择器

相关推荐