Setting the Date in Angular.js: A Step-by-Step Guide

Question

Setting the Date in Angular.js: A Step-by-Step Guide

Make maxDate selectable as today at the latest (past days are clickable but not tomorrow). The range between minDay and maxDay should not exceed 365 days, allowing for fewer days to be selected.

$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 restriction is insufficient. I want to set maxDate as 1/03/2021, which should then allow selecting dates from 365 days ago up to 1/04/2020.

Additionally, a validation rule needs to be implemented where minDate cannot be later than maxDate.

Below is the relevant portion of HTML code:

<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>

https://i.sstatic.net/EX7du.png

javascript angularjs datepicker angularjs-validation

Answer 1

Answer №1

Make sure to pass references in your object. I updated the name of the mindate function for clarity

function calculateStartDateFromEndDate(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')); // arbitrary end date setting
let startDate = calculateStartDateFromEndDate(endDate)

$scope.logVariables = {
    startDate: startDate,
    endDate: endDate
}

$scope.dateOptions = {
    formatYear: "yyyy",
    minDate: startDate,
    maxDate: endDate,
    startingDay: 1
};

To account for UTC time usage, here's a snippet that demonstrates how to convert to UTC and set up min/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 calculateStartDateFromEndDate(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 = calculateStartDateFromEndDate(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>

Answer 2

Make sure to pass references in your object. I updated the name of the mindate function for clarity

function calculateStartDateFromEndDate(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')); // arbitrary end date setting
let startDate = calculateStartDateFromEndDate(endDate)

$scope.logVariables = {
    startDate: startDate,
    endDate: endDate
}

$scope.dateOptions = {
    formatYear: "yyyy",
    minDate: startDate,
    maxDate: endDate,
    startingDay: 1
};

To account for UTC time usage, here's a snippet that demonstrates how to convert to UTC and set up min/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 calculateStartDateFromEndDate(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 = calculateStartDateFromEndDate(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>

Setting the Date in Angular.js: A Step-by-Step Guide

Answer №1

Similar questions

Nested loops seem to override previous results with the final output

Error encountered in Angular10: XHR request for POST failed due to browser blocking HTTP Request to a domain with a similar name

Having trouble locating the namespace for angular in typescript version 1.5

Ways to limit date selection with JavaScript or jQuery

How can you display a set of components in React using TypeScript?

Transforming React drag and drop page builder state into a functional html, css, and js layout

A step-by-step guide on how to use the Google Closure Compiler: a

Retrieve an item from a MongoDB database using Mongoose

What do I need to add in order to connect a controller to a form submission?

External CSS File causing improper sizing of canvas image

Display information based on the radio button chosen

Sorting through various data inputs in one JSON file

Using jQuery and Flask-WTF to achieve live word count in a TextAreaField - a step-by-step guide!

Filling in the fields based on the data in the JSON

Encountering a Node Js post handling error with the message "Cannot GET /url

Tips for adjusting the dimensions of my chart using JavaScript or Jquery

Exploring JavaScript and accessing objects

Challenges with compiling Next.js with Tailwindcss and Sass

Is there a translation issue affecting Chrome version 44?

Managing the triggering of the automatic transition in view models