如何將Datepicker與角度ng-model綁定

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"
        });
    });

這是表單的Angular 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標頭不包含日期字段。 它包含所有其他字段，但不包含日期字段。 換句話說，當我提交表單時，沒有數據進入數據庫。 經過一些研究后，我覺得這與日期選擇器的綁定有關。 我已經參考了下面的帖子並嘗試了建議的解決方案，但是它沒有明確的答案，因此我可能做錯了什么。

如何將Bootstrap-datepicker元素與angularjs ng-model綁定？

任何幫助深表感謝。 謝謝。

Answer 1

您的問題是

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

startDate在數據內部。 所以我建議您在控制器中聲明數據之前添加這些

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

相反，Angular UI Bootstrap可以通過此LINK使您的工作變得簡單

用這個

HTML

<p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>

將此添加到您的控制器

 $scope.dt = new Date();

Answer 2

為此，您可以更好地創建指令，因為您設置的值不會在ng-model中反映出來，因為它不在范圍內，因此，您可以/ *在您的應用中注入模塊，例如angular.module（'App'，[ 'cjqDatepickerModule']），然后在HTML中使用它，例如* /

  <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);
      }
    };
  });