角度ng-modelでDatepickerをバインドする方法

Question

私はHTMLにいくつかのフィールドを持つフォームを持っています。以下は、日付ピッカーを使用する日付フィールドの関連行です。

<input tabindex="3" class="date-picker" name = "startDate" type="text" id="startDate" ng-model = "startDate" ng-required="true"> 
<input tabindex="4" class="date-picker" name = "endDate" type="text" id="endDate" ng-model = "endDate" ng-required="true"> 

ここに、datepickerのjavascriptがあります。

<script> 
    $(function() { 
     $("#startDate").datepicker({ 
      dateFormat: "dd-mm-yy" 
     }); 
    }); 

    $(function() { 
     $("#endDate").datepicker({ 
      dateFormat: "dd-mm-yy" 
     }); 
    }); 

ここでフォームの角度JSコントローラです。私はバックエンドにRESTリクエストを送信し、応答を取っています。

tournamentAddApp.controller('tournamentAddController', function ($scope, $window, $http) { 

$scope.controller = "tournamentAddController";  

$scope.add = function() { 
    var data = { 
       name: $scope.tournamentName, 
       location: $scope.location, 
       status: $scope.status, 
       description: $scope.description, 
       startDate: $scope.startDate, 
       endDate: $scope.endDate    

      }; 
    var url = "http://localhost:8080/crickmaster-app-userapp/controller/tournament/create"; 

    $http.post(url, data).success(function (data, status, headers, config) { 
    //console.log(data); 
    $window.location.href = 'index.html'; 
    }).error(function (err) { 
     console.log(err); 
    }); 
}; 
}); 

私がフォームを送信するときしかし、JSONヘッダが日付フィールドが含まれていません。これには他のすべてのフィールドが含まれますが、日付フィールドは含まれません。言い換えれば、フォームを送信すると、データのうちのどれもがデータベースに送られません。いくつかの研究をした後、私はこれがdatepickerの束縛と関係があるように感じます。私は以下の投稿を参照し、提案された解決策を試しましたが、明確な答えが含まれていないので、何か間違ったことをしている可能性があります。

how to bind Bootstrap-datepicker element with angularjs ng-model?

すべてのヘルプははるかに高く評価されます。ありがとう。あなたのケースで

Answer 1

問題は、たstartDateがデータ内にある

var data = { 
       name: $scope.tournamentName, 
       location: $scope.location, 
       status: $scope.status, 
       description: $scope.description, 
       startDate: $scope.startDate, 
       endDate: $scope.endDate    
      }; 

です。 は、私はあなたが角度UIブートストラップは、このLINK

使用この

HTMLであなたの仕事を簡単に作ることができ、

$scope.startDate=""; 
$scope.endDate =""; 

代わりにコントローラにデータのこれら前に宣言を追加することをお勧め

あなたはNG-モデルに反映していない設定値として、ディレクティブを作成するには、このために、あなたのコントローラ

$scope.dt = new Date(); 

Answer 2

に、より良いこれを追加ためのスコープのその外、このためにそうすることができます /* を注入あなたのアプリのモジュールangular.moduleは（ 'アプリケーション'、[ 'cjqDatepickerModule']） その後、 */

<div cjq-datepicker dateformat="dd-mm-yy"></div> 
    angular.module('cjqDatepickerModule', []).directive('cjqDatepicker', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
     var config = {}; 
     if(angular.isDefined(attrs.dateformat)){ config.dateFormat = attrs.dateformat;} 
     if(angular.isDefined(attrs.mindate)){ config.minDate = attrs.mindate;} 
     if(angular.isDefined(attrs.maxdate)){ config.maxDate = attrs.maxdate;} 
     if(angular.isDefined(attrs.changemonth)) {config.changeMonth = true;} 
     if(angular.isDefined(attrs.changeyear)) {config.changeYear=true;} 


     config.onClose = function(selected,jqueryDateInstance){ 
      var expression = attrs.ngModel + " = " + "'" + selected + "'"; 
      scope.$apply(expression); 
     }; 
     $(element).datepicker(config); 
     } 
    }; 
    });