Angular date in ng-model value not pass to controller

Question

When I click the CheckAvailability button, the date value doesn't pass to the controller.

<div class='input-group date'>
         <input ng-model="BookedFromDate" type="text" [email protected]("dd/MM/yyyy") class="form-control BookedFDate" style="border-width: 0 0 2px 0;">
      <span class="input-group-addon">
          <i class="font-icon font-icon-calend"></i>
       </span>
                                       
   </div>

Angular:

$scope.CheckAvailability = function () {
    alert("Hello, " + $scope.BookedFromDate);
};

Aleksey Solovey · Accepted Answer · 2018-06-19 14:09:00Z

2

Forget ASP. In AngularJS input doesn't need a value. Simply populate the ng-model. You can do it in controller or with ng-init in HTML. To mask/filter the date, use $filter service. It's usually not used directly, so I suggest applying a filter in ng-init. AngularJS has a date filter for this purpose.

Here is an example:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.now = new Date();
  $scope.CheckAvailability = function() {
    console.log("Date:", $scope.BookedFromDate);
  };
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">

    <div class='input-group date'>
      <input ng-model="BookedFromDate" 
             type="text" 
             ng-init="BookedFromDate = (now | date : 'dd/MM/yyyy')" 
             class="form-control BookedFDate" 
             style="border-width: 0 0 2px 0;">

      <span class="input-group-addon">
      <i class="font-icon font-icon-calend"></i>
    </span>
      <button ng-click="CheckAvailability()">Click</button>
    </div>

  </div>
</body>
</html>

Alternatively change the type from text to date to completely ignore the filter and masking.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.BookedFromDate = new Date();
  $scope.CheckAvailability = function() {
    console.log("Date:", $scope.BookedFromDate);
  };
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">

    <div class='input-group date'>
      <input ng-model="BookedFromDate" 
             type="date" 
             class="form-control BookedFDate" 
             style="border-width: 0 0 2px 0;">

      <span class="input-group-addon">
      <i class="font-icon font-icon-calend"></i>
    </span>
      <button ng-click="CheckAvailability()">Click</button>

    </div>
    
  </div>
</body>
</html>

answered Jun 19, 2018 at 14:09

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

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

3 Comments

Ivin Raj Over a year ago

sir one more doubt <input type='text' class="form-control" name="FromTime" ng-model="FromTime" placeholder="From Time" /> time value how to pass

Aleksey Solovey Over a year ago

@IvinRaj it's bound to your model, so access it with $scope.FromTime = ...

Ivin Raj Over a year ago

stackoverflow.com/questions/50930827/…

Nakul Gawande · Accepted Answer · 2018-06-19 14:14:54Z

0

Hope this code helps, in angular, value tag is of less use as we are binding the values 2-way.

<body ng-app="app">
    <div ng-controller="EditCtrl">
      <input type="text" ng-model="item.title" />
      <input type="date" ng-model="item.date" />
      {{item.date}}
    </div>
  </body>

answered Jun 19, 2018 at 14:14

Nakul Gawande

5464 silver badges5 bronze badges

Comments

404y · Accepted Answer · 2024-01-17 08:48:51Z

It seems like there might be a couple of issues in your code. First, when initializing the ng-model with the current date using Razor syntax, you should use double curly braces for data binding in AngularJS. Second, ensure that the CheckAvailability function is properly bound to some event, such as a button click. Here's a modified version of your code:

<div class='input-group date'>
    <input ng-model="BookedFromDate" type="text" value="{{@DateTime.Now.ToString("dd/MM/yyyy")}}" class="form-control BookedFDate" style="border-width: 0 0 2px 0;">
    <span class="input-group-addon">
        <i class="font-icon font-icon-calend"></i>
    </span>
</div>

<button ng-click="CheckAvailability()">Check Availability</button>

And in your controller:

app.controller('YourController', function($scope) {
    $scope.CheckAvailability = function () {
        alert("Hello, " + $scope.BookedFromDate);
    };
});

Make sure that you have included AngularJS in your project and that the controller is associated with the relevant part of your HTML. Also, ensure that the ng-click directive or some other event binding is correctly set up to trigger the CheckAvailability function.

Collectives™ on Stack Overflow

Angular date in ng-model value not pass to controller

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related