CODEWITHSUNDEEP
javascriptangularjs
Sreekar Sree
Sreekar Sree

Reputation: 414

Angularjs min max date

How to Set min-max of dates dynamically in angularjs. I mean if I set the min date in angularjs it should be binded automatically to frontend. this is what i wrote in my controller $scope.from1date='2016-12-31'; $scope.to1date='2016-12-31'; Whenver I change my min date in my controller it should be reflected in my frontendpage and how to do that...

Upvotes: 0

Views: 3935

Answers (2)

user3773048
user3773048

Reputation: 6219

It seems to work for me. Have you taken a look at this tutorial on angularjs controllers from W3Schools? I'm guessing your overall logic might somehow be wrong/buggy. Particularly, this code snippet from the tutorial is exactly what you need for the formatting (you could even copy-paste it to your source code) and put your exact code you provided in the comment of your post in it. Then you might notice where you've gone wrong.

I hope this helps – let me know how it goes!

EDIT: I see, here's where you went wrong. You need to use a Date object (see Date in the MDN Docs).

Simply, something like this should do it:

$scope.from1date= new Date(2015, 12, 20); //'2016-12-20';
$scope.to1date= new Date(2015, 12, 31); //'2016-12-31';

Upvotes: 1

Sankar Krishnamoorthy
Sankar Krishnamoorthy

Reputation: 1335

I am trying to give you simple example. Hope this helps. If this doesn't work, do let me know the specifics to check it further. I have fixed one date and the other using system day for a better example.

Controller code 

 var app = angular.module('myApp', []);

    app.controller('myCtrl', function ($scope) {
        $scope.minDate = new Date("July 21, 1983 01:15:00");
        $scope.maxDate = new Date();
    });

HTML code

I have added date filter in one of the text box. You can add date filters as required.

 <head>
        <title></title>    
        <script src="../Scripts/angular.js"></script>
        <script src="../js/DateTest.js"></script>    
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            Min Date: <input type="text" ng-model="minDate | date: medium"><br>
            Max Date: <input type="text" ng-model="maxDate"><br>
            <br>        

        </div>

    </body>

The result appears as follows

Upvotes: 0

Related Questions