Apache Zeppelin - Jquery datepicker in angular cell doesn't work

Question

First time posting a question, I'll try to do it right.

I'm trying to have a datepicker in a Zeppelin notebook. I have found code on the following website that is suppose to do exactly what I want :

https://datafans.medium.com/how-to-use-datepicker-to-implement-zeppelin-jdbc-dynamic-sql-statement-query-eeb729734ace

The code is the following :

%angular
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
      <script>
      $( function() {
        $( "#todatepicker" ).datepicker({ dateFormat: 'yymmdd',changeMonth: true,changeYear: true });
        $( "#fromdatepicker" ).datepicker({ dateFormat: 'yymmdd',changeMonth: true,changeYear: true });
      } );
      </script>
      
<form class="form-inline">
  <div class="form-group">
    <label for="fromDateId">From: </label>
         
        <input type="text"  id="fromdatepicker" ng-model="fromDate"></input>
         <label for="toDateId">to: </label>
        <input type="text" id="todatepicker" ng-model="toDate"></input>
        
  </div>
  </p>
  </p>
  
  <button type="submit" class="btn btn-primary" ng-click=
  "z.angularBind('toDate',toDate,'20200907-163420_1173838812');z.angularBind('fromDate',fromDate,'20200907-163420_1173838812');z.runParagraph('20200907-163420_1173838812')">search</button>
</form>

When I copy it to my notebook, run the cell and try to pick a date, the calendar show up as expected when the cell is executed for the first time on a new notebook. However when I execute the cell again, the calendar doesn't show up anymore. I don't know where it can come from. For information, Zeppelin is install on my computer, and just basically run with the command bin/zeppelin-daemon.sh start

Tell me if any more info is needed. Thanks for any possible help !

Answer 1

I actually found the answer some time ago now, so I'm posting it here for anyone who encounters the same issue. So to fix it, I just basically change the "$" to "angular.element". I've found it in the documentation of Apache Zeppelin, advising to use "angular.element".

Here is a custom, enhanced version of the code that is working for me. It's an angular cell containing the working JQuery Datepicker, a text input, a dropdown list, and buttons.

%angular
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<script>
    angular.element( function() {
        angular.element( "#todatepicker" ).datepicker({ dateFormat: 'yy-mm-dd',changeMonth: true,changeYear: true, minDate: new Date(1900, 1, 1), yearRange: '1900:+00' });
        angular.element( "#fromdatepicker" ).datepicker({ dateFormat: 'yy-mm-dd',changeMonth: true,changeYear: true,  minDate: new Date(1900, 1, 1), yearRange: '1900:+00' });
    } );
    
    function changeMaxDate(val){
         angular.element('#fromdatepicker').datepicker('option', 'maxDate', new Date(val));
    }
    
    function changeMinDate(val){
        angular.element('#todatepicker').datepicker('option', 'minDate', new Date(val));
    } 
        
</script>

<form class="form-inline">

    <div style="text-align:center; margin-bottom:20px">
    <button type="submit" class="btn btn-primary"  ng-click="z.runParagraph('20210728-173149_661735685')" > Load data </button>
    </div>

    <div style="text-align:center">

            <label for="fromDateId" >From: </label>
            <input type="text"  id="fromdatepicker" ng-model="fromDate" onChange="changeMinDate(this.value);" autocomplete="off"> </input>
            <label for="toDateId"style="margin-left:5px"> to: </label>
            <input type="text" id="todatepicker" ng-model="toDate" onChange="changeMaxDate(this.value);" autocomplete="off"> </input>

            <label style="margin-left:30px"> City: </label>
            <input type="text" ng-model="city"> </input>

            <label for="genders" style="margin-left:30px">Gender:</label>
            <select name="genders" id="genders" ng-model="gender">
                <option value="both">Both</option>
                <option value="F">Female</option>
                <option value="M">Male</option>
            </select>

    </div>
    <div style="text-align:center; margin-top:20px">
    <button type="submit" class="btn btn-primary" ng-click="z.angularBind('toDate',toDate,'20210727-110725_1586668489');z.angularBind('fromDate',fromDate,'20210727-110725_1586668489');z.angularBind('city',city,'20210727-110725_1586668489');z.angularBind('gender',gender,'20210727-110725_1586668489');z.runParagraph('20210727-110725_1586668489');z.runParagraph('20210727-111144_1584153174')">Search</button>
    </div>
</form>