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

Solution 1:

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

functiongetMinDateFromEndDate(date) { //pass in the relative end date referencevar oldDay = newDate(date);
    oldDay.setDate(oldDay.getDate() - 365);
    returngetUTCDate(oldDay);
};

let endDate = getUTCDate(newDate('2021-01-03')); // set the arbitrary end datelet 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

functiongetUTCDate(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) {

    functiongetUTCDate(date) {
      var now_utc = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),
        date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
      returnnewDate(now_utc);
    }

    functiongetMinDateFromEndDate(date) {
      var oldDay = newDate(date);
      oldDay.setDate(oldDay.getDate() - 365);
      returngetUTCDate(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(newDate('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)
    }


  }]);

<scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script><scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script><scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script><scriptsrc="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script><linkhref="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"><divng-app="dateExample"><divng-controller="ExampleController"><divclass="row"><divclass="col-sm-3 col-md-3"><labelfor="sel1">Label 1</label><pclass="input-group"><inputtype="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" /><spanclass="input-group-btn"><buttontype="button"class="btn btn-default"ng-click="open1()"><iclass="glyphicon glyphicon-calendar"></i></button></span></p></div><divclass="col-sm-3 col-md-3"><labelfor="sel1">Label 2</label><pclass="input-group"><inputtype="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"
          /><spanclass="input-group-btn"><buttontype="button"class="btn btn-default"ng-click="open2()"><iclass="glyphicon glyphicon-calendar"></i></button></span></p></div></div></div></div>