CODEWITHSUNDEEP
javascriptangularjsvalidationdate
Aanchal
Aanchal

Reputation: 173

unable to add min date and max date validation in angular ui-bootstrap datepicker when using ui-bootstrap version 1.3.3

I am trying to add validation in my datepicker so that the user can not choose any date 30 days prior to current date and also can not choose any date 30 days in future, I am using below code for date picker-

<div class="form-group" ng-class="{ 'has-error' : memberForm.dateOfBirth.$invalid && (memberForm.dateOfBirth.$touched || memberForm.$submitted) }">
  <label for="Date of Birth" class="" ng-hide="memberForm.dateOfBirth.$invalid && (memberForm.dateOfBirth.$touched || memberForm.$submitted)">Date of Birth(dd/mm/yyyy)*</label>
  <label class="error_message_text" ng-show="memberForm.dateOfBirth.$invalid && (memberForm.dateOfBirth.$touched || memberForm.$submitted)"> Date of birth is required </label>
  <p class="input-group" style="width:270px;">
    <input type="text" class="form-control" name="dateOfBirth" uib-datepicker-popup="dd/MM/yyyy" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
    <span class="input-group-btn">
      <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
  </p>
</div>

and I am using below scripts -

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>  
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

I have created a plunker here - https://plnkr.co/edit/RmDyhjKpEJvTMjNRp5LE?p=preview

Can any one tell me how can I achieve this validation in my code?

Upvotes: 2

Views: 1976

Answers (2)

Aman Gupta
Aman Gupta

Reputation: 3797

The problem is here :

$scope.minDate = date.setDate((new Date()).getDate() - 30);

When you call date.setDate(..) it doesnot return the date object, so do this

$scope.toggleMin = function() {
    var date = new Date();
    date.setDate((new Date()).getDate() - 30);
    $scope.minDate = date;
  };
  $scope.toggleMin();


var date1 = new Date();
date1.setDate((new Date()).getDate() + 30);
$scope.dateOptions.maxDate = date1;

Little correction- (added .dateOptions while assigning min date and max date)

 $scope.toggleMin = function() {
        var date = new Date();
        date.setDate((new Date()).getDate() - 30);
        $scope.minDate = date;
      };
      $scope.toggleMin();

    //  Add this for maxDate, no code was there in plunker
    var date1 = new Date();
    date1.setDate((new Date()).getDate() + 30);
    $scope.dateOptions.maxDate = date1;

Answer Plunker- https://plnkr.co/edit/RmDyhjKpEJvTMjNRp5LE?p=preview

Upvotes: 1

Raj K Pachauri
Raj K Pachauri

Reputation: 293

you can use this for validation

var today = new Date()
var priorDate = new Date().setDate(today.getDate()-30)

Upvotes: 1

Related Questions