Question 228592 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to prevent selection of date values beyond today's date?

As shown below in the HTML code, I have a date-picker. I want to set the max and min values of the date programmatically from the typescript code. I want to set the min and the max values of the date so that the user cannot select any date beyond the max
value set, and cannot select any date below the min value set.

The desired value for the [max] should be today’s date.

I tried the following approach, but still, the user can select a date value greater than today’s date.

    this.maxDateLimit = formatDate(new Date(), 'yyyy-MM-dd ', 'en')

Please let me know how to correct this.

html:

    <div id="idDateOfSprayContainer">
        <clr-date-container class="clsDateContainer">
            <label id="idDateOfSprayLabel">
                {{ "SITE.INSECTICIDES.DATE_OF_SPRAY_LABEL" | translate }}:
            </label>
            <input id="idDateOfSprayValue" class="clr-control-container" clrDate type="date" placeholder="" [(ngModel)]="iDatePasser.dateOfSpray"  name="dateOfSpray" (ngModelChange)="onDateOfSpraySet($event)"
                value="2021-07-21" [min]="minDateLimit" [max]="maxDateLimit" [disabled] = "!siteSelectionState"/>
        </clr-date-container>
    </div>
Tags:

3

Answers


  1. 0

    Always we use a library, we need take account the "Inputs" of the component and the type of this Inputs.

    In the case of clarity date-picker you see the "Inputs" in "Summary of Options" of the docs (at the end of the document)

    See that the "min" and "max" inputs are strings in the way "yyyy-MM-dd"

    So checking the custom format option in Angular

    this.maxDateLimit = formatDate(new Date(), 'yyyy-MM-dd','en-US')

    NOTE: I use the local "en-US" because if the installed by defect in Angular -we needn’t add any local more-. In this case it’s indiferent use ‘en-US’ than, e.g. if we added locale-es for Spanish ‘es-ES’

    Login or Signup to reply.
  2. 0

    Withour prior knowledge of angular, I was able to come up with this by reading the documentation and some trial and error:

    angular.module("date", [])
  .controller("controller", ["$scope", function($scope) {
    $scope.today = function() {
      return new Date().toISOString().substring(0, 10);
    };
  }]);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="date" ng-controller="controller">
  <form>
    <input type="date" max="{{today()}}" />
    <input type="submit"/>
  </form>
</body>

    Dates beyond today cannot be selected:

    enter image description here

    You can enter a later date by typing in, for example, 12/31/2050, but you will then see an error message when you submit the form:

    enter image description here

    Note that I did not put max in square brackets.

    Login or Signup to reply.
  3. 0

    You should use min & max like this for your case.

    [min]="minDateLimit | date:'yyyy-MM-dd'" [max]="maxDateLimit | date:'yyyy-MM-dd'".

    This is the angualr Date Pipe.For more info on date pipe you can visit angualr documentation link https://angular.io/api/common/DatePipe

    Date pipe will convert to the value binded to our required format.
    As other member pointed out that it should be in string format only.

    In the case of clarity date-picker you see the "Inputs" in "Summary of
    Options" of the docs (at the end of the document)

        this.minDateLimit = (formatDate(new Date("2023-06-04"), 'yyyy-MM-dd ', 'en'));
    this.maxDateLimit = (formatDate(new Date(), 'yyyy-MM-dd ', 'en')) ;//new Date means it will get current date as per your requirment
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search