Visualize: customized input controls

customized input controls

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js" integrity="sha256-xI/qyl9vpwWFOXz7+x/9WkG5j/SVnSw21viy8fWwbeE=" crossorigin="anonymous"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js?_opt=true"></script>
<p>Start Date:
  <input type="text" id="start_date">
</p>
<div id="filters"></div>
<div id="container"></div>

CSS

input.jr[type="email"],
input.jr[type="number"],
input.jr[type="password"],
input.jr[type="text"] {
  color: red;
}

#filters .jr-mInput-check-label.jr,
#filters .jr-mInput-radio-label.jr,
#filters .jr-mInput-boolean-label.jr {
  color: #218c00;
}

#filters .jr-mInput-label.jr {
  color: #218c00;
}

#filters .jr-mInput-radio.jr,
#filters .jr-mInput-check.jr {
  padding: 0.4em;
}

#filters .jr-mInput-radio.jr:hover,
#filters .jr-mInput-check.jr:hover {
  background-color: #bbe8c0;
}

#filters .jr-isDisabled .jr-mInput-radio.jr:hover,
#filters .jr-isDisabled .jr-mInput-check.jr:hover {
  background-color: white;
}


#filters .jr-mMultiselect-toggle-label.jr {
  color: #000000;
  font-weight: 600;
}

#filters .jr-mSelectlist-item.jr {
  color: #218c00;
  background-color: inherit;
}

#filters .jr-mSelectlist-item.jr :hover,.jr-mSingleselect-dropdown .jr-mSelectlist-item.jr:hover, .jr-mSingleselect-dropdown .jr-mSelectlist-item.jr-isSelected.jr {
  color: #21610d;
  background-color: #bbe8c0;
}


#filters .jr-mSelectlist-item.jr.jr-isSelected{
  color: #21610d;
  background-color: #89e693;
}


#filters .jr-mSingleselect-input.jr, .jr-mSingleselect-dropdown .jr-mSelectlist-item .jr{
  color: #218c00;
  background-color: inherit;
}

JavaScript

$(function() {
   $("#start_date").datepicker();   
 });

reportUri = "/reports/NCSR_OP/OP_27___Inbound_items___Forms_and_Non_Forms";

 visualize({
   auth: {
     name: "jasperadmin",
     password: "jasperadmin"
   }
 }, function(v) {
   var inputControls = v.inputControls({
     container: "#filters",
     resource: reportUri
   });

   var report = v.report({
     resource: reportUri,
     params:{"start_date":["2018-01-01"],"end_date":["2018-09-03"]},
     container: "#container"
   });

 });