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&theme=wantedTheme"></script>
<p>Date:
  <input type="text" id="datepicker">
</p>
<div id="filters"></div>
<div id="container"></div>

JavaScript

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

 var reportUri = "/public/Samples/Reports/Cascading_Report_2_Updated";

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

   var report = v.report({
     resource: reportUri,
     container: "#container"
   });

 });