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.

checkout this answer for jquery-ui datepicker binded via directive — Pankaj Parkar
– Pankaj Parkar, Commented Dec 10, 2016 at 9:32

Aravind · Accepted Answer · 2016-12-10 09:34:07Z

0

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

edited Dec 10, 2016 at 9:34

answered Dec 10, 2016 at 9:24

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arcane Over a year ago

Thank you for your answer. I tried your suggestion by adding those two lines before the declaration of data. Now request body contains both dates but they are empty. For example it'd look something like this.

Arcane Over a year ago

"description":"test","name":"test","location":"test","startDate":"","endDate":""

lejlun · Accepted Answer · 2021-08-14 14:47:25Z

0

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

edited Aug 14, 2021 at 14:47

lejlun

4,4312 gold badges18 silver badges31 bronze badges

answered Dec 10, 2016 at 12:13

Sushil Gupta

11 silver badge

2 Comments

Arcane Over a year ago

So in the two HTML lines in my question, cjq-datepicker dateformat="dd-mm-yy" is needed to be added?

Arcane Over a year ago

and rest of the code in your answer should be added to the controller right?

Collectives™ on Stack Overflow

How to bind Datepicker with angular ng-model

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related