無法使用ng-model和ng-click從日期選擇器獲取日期

Question

我只是試圖創建一個小型web應用程序，用戶可以在其中在特定時間範圍內從數據庫下載值。我html代碼是這樣的：

<div class="container"> 
      <div class='col-md-5'> 
       Start Date: 
       <div class="form-group"> 
        <div class='input-group date' id='datetimepicker6'> 
         <input type='text' ng-model="queryDate.start" class="form-control" /> 
         <span class="input-group-addon"> 
          <span class="glyphicon glyphicon-calendar"></span> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class='col-md-5'> 
       End Date: 
       <div class="form-group"> 
        <div class='input-group date' id='datetimepicker7'> 
         <input type='text' ng-model="queryDate.end" class="form-control" /> 
         <span class="input-group-addon"> 
          <span class="glyphicon glyphicon-calendar"></span> 
         </span> 
        </div> 
       </div> 
      </div> 


      <div class='col-md-5'> 
       Service Name: 
      <select id="serviceName" style="font-size: 15px;padding: 5px;width: 300px" > 
       <option></option> 
       <option ng-repeat="webService in webServices">{{ webService.fields.service }}</option> 
      </select> 
      </div> 

      <div class='col-md-6'> 
       <button type="button" id="download" ng-click="download(queryDate)" class="btn btn-theme" style="float: right">Download</button> 
      </div> 
     </div> 

我想收集的開始日期和結束日期爲NG-模型

ng-model="queryDate.start"

ng-model="queryDate.end"

雖然它安靜容易收集數據來自ng-model，我們可以在http://docs.angularjs.org/guide/forms中看到。

我mainApp.js是如下

var mainApp = angular.module("mainApp",[]); 
mainApp.controller("serviceController",function($scope,$http){ 
$http.get("/fetchData/").success(function(response){ 
    $scope.webServices = response; 
}); 
//--------- I get alert "Hola" but the next alert says "undefined" --------- 
$scope.download = function(queryDate){ 
    alert('Hola'); 
    alert(queryDate); 
    }; 
}); 

我希望同時收集日期字段，並隨後將在數據庫獲取數據。

Answer 1

<div class='input-group date' > 
         <input type='text' ng-model="queryDate.start" id='datetimepicker6'class="form-control" /> 
         <span class="input-group-addon"> 
          <span class="glyphicon glyphicon-calendar"></span> 
         </span> 

在你的JS文件做 $（ '＃datetimepicker6'）日期選擇器（）。

你有用戶jQuery的UI庫的日期選擇器（）

例如看到這個https://jqueryui.com/datepicker/