javascriptangularjsdatepickerangularjs-validation

How to set Date in angular.js?


I want maxDate to be selectable as today at most, (old days should be clickable, but not tomorrow) the day between i select as maxDay and minDay should be 365 days at most, it cant be selected more than 365 days, but can be selected less,

$scope.dateOptions = {
                    formatYear: "yy",
                    minDate: getMinDate(),
                    maxDate: new Date(),
                    startingDay: 1
                };

                function getMinDate() {
                    var oldDay = new Date();
                    oldDay.setDate(oldDay.getDate() -  365);
                    return oldDay;
                };

This is not enough, i only can set days between today and 365 days back, but i want it to be selectable if i choose maxDate as 1/03/2021, then minDate should be selectable by 365 days ago, like 1/04/2020 ..

And i want to do a validation like minDate cant be later than maxDate.

here is the related part of html,

<div class="row">
                <div class="col-sm-3">
                    <label for="sel1">{{ 'LISTLOG_SEARCHSTARTDATE' | translate }}:
                        <!--             <a class="ion-information-circled" tooltip-animation="true" tooltip-placement="top"  -->
                        <!--                uib-tooltip="{{'TOOLTIP_DEVICELOG_SEARCHDATE' | translate}}"></a> -->
                    </label>
                    <p class="input-group">
                        <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="logVariables.startDate"
                            ng-change="formatDateModal()" ng-model-options="{timezone: 'UTC'}" is-open="popup1.opened"
                            datepicker-options="dateOptions" 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>
                <div class="col-sm-3">
                    <label for="sel1">{{ 'LISTLOG_SEARCHENDDATE' | translate }}:
                        <!--             <a class="ion-information-circled" tooltip-animation="true" tooltip-placement="top"  -->
                        <!--                uib-tooltip="{{'TOOLTIP_DEVICELOG_SEARCHDATE' | translate}}"></a> -->
                    </label>
                    <p class="input-group">
                        <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="logVariables.endDate"
                            ng-change="formatDateModal()" ng-model-options="{timezone: 'UTC'}" is-open="popup2.opened"
                            datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="open2()"><i
                                    class="glyphicon glyphicon-calendar"></i></button>
                        </span>
                    </p>
                </div>

            </div>

enter image description here


Solution

  • You need to pass references in your object. I changed the name of the mindate function to make it more explicit

    function getMinDateFromEndDate(date) { //pass in the relative end date reference
        var oldDay = new Date(date);
        oldDay.setDate(oldDay.getDate() - 365);
        return getUTCDate(oldDay);
    };
    
    let endDate = getUTCDate(new Date('2021-01-03')); // set the arbitrary end date
    let startDate = getMinDateFromEndDate(endDate)
    
    $scope.logVariables = {
        startDate: startDate,
        endDate: endDate
    }
    
    $scope.dateOptions = {
        formatYear: "yyyy",
        minDate: startDate,
        maxDate: endDate,
        startingDay: 1
    };
    

    Since you're using UTC time, I worked up this snippet showing a way to convert to UTC, how to set up your min and max dates using UTC

    function getUTCDate(date) {
       var now_utc = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
       return new Date(now_utc);
    }
    

    angular.module('dateExample', ['ngSanitize', 'ui.bootstrap'])
      .controller('ExampleController', ['$scope', function($scope) {
    
        function getUTCDate(date) {
          var now_utc = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),
            date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
          return new Date(now_utc);
        }
    
        function getMinDateFromEndDate(date) {
          var oldDay = new Date(date);
          oldDay.setDate(oldDay.getDate() - 365);
          return getUTCDate(oldDay);
        };
    
        $scope.popup1 = {
          opened: false
        };
        $scope.popup2 = {
          opened: false
        };
        $scope.open1 = function() {
          $scope.popup1.opened = true;
        };
    
        $scope.open2 = function() {
          $scope.popup2.opened = true;
        };
    
        let endDate = getUTCDate(new Date('2021-01-03'));
        let startDate = getMinDateFromEndDate(endDate)
        $scope.logVariables = {
          startDate: startDate,
          endDate: endDate
        }
        $scope.format = 'dd-MM-yyyy';
        $scope.altInputFormats = ['M!/d!/yyyy'];
    
    
        $scope.dateOptions = {
          formatYear: "yyyy",
          minDate: startDate,
          maxDate: endDate,
          startingDay: 1
        };
    
    
        $scope.formatDateModal = function() {
          console.log($scope.logVariables)
        }
    
    
      }]);
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <div ng-app="dateExample">
      <div ng-controller="ExampleController">
        <div class="row">
          <div class="col-sm-3 col-md-3">
            <label for="sel1">Label 1</label>
            <p class="input-group">
              <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="logVariables.startDate" ng-change="formatDateModal()" ng-model-options="{timezone: 'UTC'}" is-open="popup1.opened" datepicker-options="dateOptions" 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>
          <div class="col-sm-3 col-md-3">
            <label for="sel1">Label 2</label>
            <p class="input-group">
              <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="logVariables.endDate" ng-change="formatDateModal()" ng-model-options="{timezone: 'UTC'}" is-open="popup2.opened" datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats"
              />
              <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open2()">
     <i class="glyphicon glyphicon-calendar"></i>
    </button>
     </span>
            </p>
          </div>
        </div>
      </div>
    </div>