Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to add datepicker to jQueryBuilder in ReactJS
// important point is that the datepicker is not jQueryBuilder's plugin, but jquery-ui plugin being injected into jquery ($).
// order of imports matters -- the datepicker plugin is injected automatically into jquery and then automatically adopted by jQueryBuilder
import $ from 'jquery';
import datepicker from 'jquery-datepicker'; // https://www.npmjs.com/package/jquery-datepicker
import jQueryBuilder from 'jQuery-QueryBuilder'; // https://www.npmjs.com/package/jQuery-QueryBuilder
// this is how we initialize the query builder
$('#builder-widgets').queryBuilder({
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
}
}
)}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.