Apache Zeppelin - 角度单元格中的 Jquery datepicker 不起作用

Posted 2023-03-23

【中文标题】Apache Zeppelin - 角度单元格中的 Jquery datepicker 不起作用

【英文标题】：Apache Zeppelin - Jquery datepicker in angular cell doesn't work

【发布时间】：2021-10-03 09:26:15

【问题描述】：

第一次发问题，我会尽量做对的。

我正在尝试在 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

运行

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

【参考方案1】：

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

这是一个适合我的自定义增强版代码。它是一个角单元格，包含有效的 JQuery Datepicker、一个文本输入、一个下拉列表和按钮。

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