JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>jQuery QueryBuilder</title>



  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://querybuilder.js.org/assets/css/docs.min.css" rel="stylesheet">
  <link href="https://querybuilder.js.org/assets/css/style.css" rel="stylesheet">

  <style>
    #content {
      background:#0074d9;
      background:linear-gradient(135deg, #0074d9, #001f3f);
    }
  </style>

  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.3.0/bootbox.min.js"></script>
  <script src="https://querybuilder.js.org/assets/js/docs.min.js"></script>
  <script src="https://querybuilder.js.org/assets/js/script.js"></script>
</head>

<body>





<div class="container bs-docs-container">
  <div class="row">
<!-- Content
=========================================== -->
<div class="col-md-9" role="main">
  <section class="bs-docs-section clearfix">
  <h1 id="basic" class="page-header">
    Basic
  </h1>

  <p>This demo shows the basic features of the QueryBuilder. Click one of the blue buttons to trigger the validation and
    display the output.</p>

  <a href="https://querybuilder.js.org/assets/demo-basic.js" class="btn btn-default"><b>&lt;/&gt;</b> See source</a>

  <div class="col-md-12">
    <div id="builder-basic"></div>

    <div class="btn-group">
      <button class="btn btn-warning reset" data-target="basic">Reset</button>
      <button class="btn btn-success set-json" data-target="basic">Set...

JavaScript

const commonUIFunctions={}

commonUIFunctions.advancedFilterConditions={}
commonUIFunctions.advancedFilterConditions.languageForCustomFilter={

        with_in_past: 'with in past',
        with_in_next: 'with in next',
    }

commonUIFunctions.advancedFilterConditions.customOperatorist=[

        { type: 'before',  multiple:true , nb_inputs: 1,apply_to: ['datetime'] },
        { type: 'with_in_past',  multiple:true , nb_inputs: 1,apply_to: ['datetime'] },
        { type: 'with_in_next',  multiple:true , nb_inputs: 1,apply_to: ['datetime'] },
        { type: 'after',  multiple:true , nb_inputs: 1,apply_to: ['datetime'] },


]




var rules_basic = {
  condition: 'AND',
  rules: [{
    id: 'price',
    operator: 'less',
    value: 10.25
  }, {
    condition: 'OR',
    rules: [{
      id: 'category',
      operator: 'equal',
      value: 2
    }, {
      id: 'category',
      operator: 'equal',
      value: 1
    }]
  }]
};

$('#builder-basic').queryBuilder({

  filters: [
  {id:"date",
      lablel:'Date',
      type:'date',
      plugin: 'datepicker',
      data:{isDateTime:true,isDuration:false},
      getRuleValue:function(rule){
          console.log("hihi")

    }
  },{
    id: 'name',
    label: 'Name',
    type: 'string'
  }],
        operators:$.fn.queryBuilder.constructor.DEFAULTS.operators.concat(commonUIFunctions.advancedFilterConditions.customOperatorist),
        lang: {	operators: commonUIFunctions.advancedFilterConditions.languageForCustomFilter }
});

$('#btn-reset').on('click', function() {
  $('#builder-basic').queryBuilder('reset');
});

$('#btn-set').on('click', function() {
  $('#builder-basic').queryBuilder('setRules', rules_basic);
});

$('#btn-get').on('click', function() {
  var result = $('#builder-basic').queryBuilder('getRules');

  if (!$.isEmptyObject(result)) {
    alert(JSON.stringify(result, null, 2));
  }
});
$(`#builder-basic`).on('afterUpdateRuleOperator.queryBuilder', function (e, rule) {

            if (rule.filter.data &&...