How to bind Datepicker with angular ng-model

Question

I have a form with a few fields in HTML. Below is the related lines for the date fields where I use a datepicker.

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

Here is the javascript for the datepicker.

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

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

and Here is the Angular JS controller for the form. I'm sending a REST request to my backend and taking the response.

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

However when I submit the form, JSON header doesn't contain the date fields. It contain all other fields but not the date fields. In other words when I submit the form, non of the data goes to the database. After doing some research I feel like this has to do with the binding of the datepicker. I've referred the below post and tried suggested solutions but it doesn't contain a clear answer so therefore I might be doing something wrong.

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

Any help is much appreciated. Thanks.

Answer 1

For this better to create a directive, as the value you set doesn't reflect in ng-model because its outside of scope, so for this you can Inject the module in your app e.g. angular.module('App', ['cjqDatepickerModule']).

Then use it in HTML like:

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

Answer 2

The problem in your case is

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

the startDate is inside the data. so I suggest you to add these before the declaration of data in the controller

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

Instead, Angular UI Bootstrap can make your work simple at this LINK

Use this

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>

Add this to your controller

 $scope.dt = new Date();