如何将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);
      }
    };
  });