I have something like this
<input type="datetime"
data-ng-model="vm.dtPicker"
data-ng-init="(#Model.Expiration.HasValue ? vm.setDate(#Model.Expiration.Value.Year,#Model.Expiration.Value.Month,#Model.Expiration.Value.Day) : vm.setDate('','','')) "
class="form-control form-control-md date-align"
uib-datepicker-popup="MM/dd/yyyy"
is-open="vm.popup1.opened"
popup-placement="bottom-right"
ng-required="true"
name="Expiration"
datepicker-options="vm.dateOptions"
close-text="Close"
show-button-bar="true"
close-on-date-selection="true" readonly />
Here is the angular function
function setDate(year, month, day) {
vm.dtPicker = new Date(year, month - 1, day);
};
I need to call the setDate function based on the condition if the Expiration has value or not.
But the problem is #Model.Expiration.HasValue returns true or false but the corresponding SetDate() doesn't calls.
Suppose if the Expiration has no value it still calls the vm.setDate(#Model.Expiration.Value.Year,#Model.Expiration.Value.Month,#Model.Expiration.Value.Day)) and I get the NullException error.
If I have the Expiration Date from Model then I should fill the textbox else I must show as null.
What am I doing wrong here?
Related
I've created a function that return a substraction or an addition from current Date, and set the result in the min or max of date input :
My function :
SubDate = (subDay) => {
let tgDate = new Date();
tgDate.setDate(tgDate.getDate() + subDay)
return tgDate.toLocaleDateString();
}
My input :
<input type="date" id="dateInput" min={this.SubDate(-7)} max={this.SubDate(7)} />
The function is working. In the navigator's inspector, I see the min and max of the input like so :
<input type="date" id="dateInput" min="13/09/2020" max="27/09/2020">
But when I try to select a date, It does'nt prevent me to choose the min date and the max date.
Can I resolve that ? Or using DateTimePicker instead of that.
Thank you.
I am not sure if you ended up resolving this or not but for reference ,
var today = new Date().toISOString().split('T')[0];
<input type="date" onChange={this.handleChange} max={today} />
I am using 0.14.3 angular-bootstrap version. I have issues with min and max validation for uib-datepicker-popup. min-date and max-date are working as expected, dates are disabled on popup view. However if I enter manually dates inside input text validation is not there...I added even min and max attributes but nothing again. When check in form.$error and there is not validation error.
<input id="projEndDate" class="form-control date-picker"
uib-datepicker-popup="{{planningvm.format}}"
show-button-bar="false"
ng-model="reviewvm.review.projectedEndDt"
data-ng-click="planningvm.openDatePicker('projEndDate')"
placeholder="mm/dd/yyyy" name="projEndDate" show-weeks="false"
required is-open="planningvm.projEndDate.opened"
min="reviewvm.review.projectedStartDt"
min-date="reviewvm.review.projectedStartDt" />
<span data-ng-class="{'not-allowed input-group-addon' : !reviewvm.userReviewAssoc || !reviewvm.editMode, 'input-group-addon' : reviewvm.userReviewAssoc}"
data-ng-click="planningvm.openDatePicker('projEndDate')">
<div class="icon-calendar" id="icon-daterange-end" >
</div>
</span>
Is there some way that i can maybe check for date validation when user type manually in input and set that ng-model to min or max corresponding?
This appears to be a known issue when using the uib-datepicker-popup with input min and max validations: Datepicker input not validated for min and max when manually inserting date #4664 that they do not intend on fixing. I developed a workaround that performs the validations when the input value changes like so:
// watch date value
scope.$watch((scope) => {
//return object to watch.
return this.date;
}, (newValue: Date, oldValue: Date) => {
this.onValueChange();
});
private onValueChange() {
if (angular.isDefined(this.date) && this.date && !this.myForm.date.$error.date) {
this.myForm.date.$setValidity("min", moment(this.date).isSameOrAfter(this.minDate));
this.myForm.date.$setValidity("max", moment(this.date).isSameOrBefore(this.maxDate));
} else {
this.myForm.date.$setValidity("min", true);
this.myForm.date.$setValidity("max", true);
}
}
I am new in angular and I stuck at point where I am unable to restrict the user to enter valid date manually. It sets the date as undefined for empty, characters as well as invalid date entered by the user. The date format I have mentioned is MM-dd-yyyy. Even if I enter 85/34/2102 it assumes this as a date and takes some junk value instead of validating and throwing an error.
my code of angular date-picker in html
<input type="text" class="form-control" datepicker-popup="{{clCtrl.format}}"
ng-model="clCtrl.QualityExpirationDate" is-open="clCtrl.openedQualityDate"
min-date="clCtrl.minDate" datepicker-options="clCtrl.dateOptions"
ng-required="true" close-on-date-selection="true" show-button-bar="false" />
and code in angular controller side
self.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
self.formats = ['MM-dd-yyyy', 'MM/dd/yyyy', 'MM.dd.yyyy', 'shortDate'];
self.format = self.formats[0];
self.openQualityDate = function ($event) {
$event.preventDefault();
$event.stopPropagation();
self.openedQualityDate = true;
};
self.toggleMin = function () {
self.minDate = self.minDate ? null : new Date();
};
self.toggleMin();
self.clear = function () {
self.QualityExpirationDate = null;
};
Add a 'readonly' attribute to the input field:
<input type="text" readonly class="form-control" datepicker-popup="{{clCtrl.format}}" ng-model="clCtrl.QualityExpirationDate" is-open="clCtrl.openedQualityDate" min-date="clCtrl.minDate" datepicker-options="clCtrl.dateOptions" ng-required="true" close-on-date-selection="true" show-button-bar="false" />
If you want to allow user input but restrict to valid dates you could add this to your controller:
$scope.$watch('dt', function(val) {
$scope.isValidDate = isNaN(new Date(val).getTime());
});
then use the 'isValidDate' scope property to show/hide a message and/or disable submission, or whatever you want to do.
Of course it would be better to abstract this validation into a directive so it could easily be reused on all your date fields.
Given this:
<input id="modalContentTitle"
name="modalContentTitle"
ng-minlength="5"
ng-model="ahs.modal.data.title"
ng-required="true" />
I know that I can access information on that field like this:
title="{{ ahs.vr5(ahs.forms.modal.modalContentTitle) }}"></i>
vr5 = function (field) {
if (angular.isDefined(field)) {
if (field.$error.required) return "Required";
if (field.$error.minlength) return "Minimum 5 characters";
if (field.$error.email) return "Email Invalid";
}
return "OK";
}
Is there a way that I can get the ng-minlength directly from the field information with AngularJS or do I need to create a different vr6 function if I want to verify lengths for fields with a minlength of 6.
unfortunately minlength is a private variable within Angular. You can however, do a workaround for this
<input id="modalContentTitle"
name="modalContentTitle"
ng-minlength="modalContentTitle.minlength = 5"
ng-model="ahs.modal.data.title"
ng-required="true" />
And now you can access this by
field.minlength
I am a novice in Angular and need help regarding the Custom Directive.
I have a date picker Directive where the user selects Date, Month and Year from a Drop Down which is then displayed in a textbox in the format : YYYY-MM-DD
$scope.$watch('model', function ( newDate ) {
$scope.dateFields.day = new Date(newDate).getUTCDate();
$scope.dateFields.month = new Date(newDate).getUTCMonth();
$scope.dateFields.year = new Date(newDate).getUTCFullYear();
});
The Drop Down is displayed using :
<select required name="dateFields.month" data-ng-model="dateFields.month" p ng-options="month.value as month.name for month in months" value="{{dateField.month}}" ng-change="checkDate()" ng-disabled="disableFields"></select>
<select required ng-if="!yearText" name="dateFields.year" data-ng-model="dateFields.year" ng-options="year for year in years" ng-change="checkDate()" ng-disabled="disableFields"></select>
When all above Dropdowns are selected, the Input Textbox shows only the Year whic I want to show the complete date in the Format : YYYY-MM-DD
The Code for that is :
<input required ng-if="yearText" type="text" name="dateFields.year" data-ng-model="dateFields.year" placeholder="Year" class="form-control" ng-disabled="disableFields">
In the above code there is data-ng-model="dateFields.year". is there any method where I can customize this to show dateFields.year-dateFields.month-dateFields.date
The simplest solution is to use dedicated model for complete date. I can see that you are using ngChange directive. In this case you could set proper model value in this function:
$scope.checkDate = function() {
// checking date ...
// all is fine set full date model
$scope.dateFields.fullDate = $scope.dateFields.year + '-' + $scope.dateFields.month + '-' + $scope.dateFields.day;
}
and use in in HTML:
<input data-ng-model="dateFields.fullDate" required ng-if="yearText" type="text" name="dateFields.year" placeholder="Year" class="form-control" ng-disabled="disableFields">
I think it should work in your case.
Demo: http://plnkr.co/edit/SKCbABDifkbnIT2FTV6X?p=preview