Apache Zeppelin - Jquery angular 单元格中的日期选择器不工作

Question

第一次发帖，我会努力做好的。

我正在尝试在 Zeppelin 笔记本中添加日期选择器。我在以下网站上找到了代码，这些代码应该完全符合我的要求：

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

代码如下：

%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>

当我将它复制到我的笔记本时，运行单元格并尝试选择一个日期，当单元格在新笔记本上首次执行时，日历会按预期显示。但是，当我再次执行该单元格时，日历不再显示。我不知道它是从哪里来的。有关信息，Zeppelin 安装在我的电脑上，基本上运行使用命令 bin/zeppelin-daemon.sh start

如果需要更多信息，请告诉我。感谢您提供任何可能的帮助！

Answer 1

实际上我很久以前就找到了答案，所以我将其张贴在这里以供遇到相同问题的任何人使用。所以要修复它，我基本上只是将“$”更改为“angular.element”。我在 Apache Zeppelin 的文档中找到它，建议使用“angular.element”。

这是为我工作的自定义增强版代码。这是一个 angular 单元格，其中包含有效的 JQuery 日期选择器、文本输入、下拉列表和按钮。

%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>

Apache Zeppelin - Jquery angular 单元格中的日期选择器不工作

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

jquery

datepicker

apache-zeppelin

angular