I had a input field with datepicker..I need the user to select date only from the present date and past dates should not be clickable..Below is the code.
<div class="col-lg-4">
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-view="date" maxlength="10" format="dd/MM/yyyy" ng-model="$ctrl.DateInput"
placeholder="renewal date" required="true">
</div>
Quick help appreciated.. Thanks!
I had a input field with datepicker..I need the user to select date only from the present date and past dates should not be clickable..Below is the code.
<div class="col-lg-4">
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-view="date" maxlength="10" format="dd/MM/yyyy" ng-model="$ctrl.DateInput"
placeholder="renewal date" required="true">
</div>
Quick help appreciated.. Thanks!
Share Improve this question asked Nov 25, 2016 at 9:37 H VarmaH Varma 6405 gold badges14 silver badges29 bronze badges 6- I don't know what datepicker you're using, but is there a min-date option? – rrd Commented Nov 25, 2016 at 9:41
- looks like you are using HTML5 datetime use min="<date>" but see for browser support caniuse./#feat=input-datetime – Vinod Louis Commented Nov 25, 2016 at 9:41
- see this demo link plnkr.co/edit/W5pb1boMLOHZFnWkMU8o?p=preview – Ivin Raj Commented Nov 25, 2016 at 9:42
- try with setting min="your min date value" – Sa E Chowdary Commented Nov 25, 2016 at 9:42
- stackoverflow./questions/34693771/… – Goombah Commented Nov 25, 2016 at 9:43
5 Answers
Reset to default 6 <input class="form-control m-input pl-6" type="date"
[min]="todayDate"formControlName="dateValidity">
The min and max are the date properties which used to validate the input range and these properties will disable before and after dates on the calendar popup.
in your ts define min date
todayDate=this.datePipe.transform(new Date(), 'yyyy-MM-dd');
Code:
<html>
<head>
<link href="http://netdna.bootstrapcdn./bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script language="javascript" src="http://ajax.googleapis./ajax/libs/angularjs/1.4.7/angular.js"></script>
<script language="javascript" src="http://ajax.googleapis./ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
</head>
<body style="Padding:20px;">
<form>
<div ng-app="myApp" ng-controller="myCntrl">
Date:
<input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="dt" is-open="showdp" />
<span>
<button type="button" class="btn btn-default" ng-click="showcalendar($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<script language="javascript">
angular.module('myApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('myApp').controller('myCntrl', function ($scope) {
$scope.today = function () {
$scope.dt = new Date();
};
$scope.mindate = new Date();
$scope.dateformat="MM/dd/yyyy";
$scope.today();
$scope.showcalendar = function ($event) {
$scope.showdp = true;
};
$scope.showdp = false;
});
</script>
</form>
</body>
</html>Wokrs as:
If you want to narrow the range of possible dates add min-date or max-date just as in the example.
http://plnkr.co/edit/QiQDiPXhuO0eTPxxdGnd?p=preview
Here's the relevant part of documentation:
https://angular-ui.github.io/bootstrap/#/datepicker
max-date (Default: null) - Defines the maximum available date. min-date (Default: null) - Defines the minimum available date.
You can disable past dates in an HTML 5 input of type datetime-local in Angular by using a bination of HTML and TypeScript.
ponent.html
<input type="datetime-local" min="{{dateToday() | date:'yyyy-MM-ddTHH:mm:ss.sss'}}" />
We are using the min attribute to set the minimum allowed date to the current date and time. The minDate() function returns the current date and time in a format that is patible with the datetime-local input type. You can modify this to match your needs.
ponent.ts
dateToday(): Date {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const hour = now.getHours();
const minute = now.getMinutes();
return new Date(year, month, day, hour, minute);
}
This function returns a Date object representing the current date and time, but with the seconds and milliseconds set to zero. This ensures that the minimum date is the beginning of the current minute, rather than the exact moment the user loads the page.
The datetime-local input will only allow the user to select dates and times that are in the future, starting from the current day.
I hope this proves helpful for any new visitors to this post.
in your ts file just add:
minDate = new Date();
in Angular 16, import MatInputModule
in HTML, just add this in input:
[min]="minDate"
<div class="tagus-form-group without-icon">
<mat-form-field appearance="fill">
<mat-label>End date</mat-label>
<input [min]="minDate" matInput [matDatepicker]="endDatePicker" formControlName="endDate" />
<mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
<mat-datepicker #endDatePicker></mat-datepicker>
</mat-form-field>
</div>