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">
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/css/default/zebra_datepicker.min.css">
  <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...

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'] },


]


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

  filters: [
  {id:"date",
      lablel:'Date',
      type:'date',
      plugin: 'Zebra_DatePicker',
      data:{isDateTime:true}
},{
    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 && rule.filter.data.isDateTime) {
                var hybridOperators = ['before','with_in_past','with_in_next','after'];
                if (hybridOperators.indexOf(rule.operator.type) == -1) {
                    try{
                        rule.$el.find('.rule-value-container input').timeDurationPicker('destroy');
                    }catch(e){console.log(e.message)}
                  ...