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} />
Related
I want by default display the current date and all information linked to,
and in case of another date choose by user display corresponding info.
const [dateCourante, setDateCourante] = useState(new Date());
const onSetDate = (e) => {
setDateCourrante(e.target.value);
}
I display the date as a string :
<p>
{ dateCourrante.toDateString() }.
</p>
and this input to set/display the same date :
<input
type="date"
name="date"
id="date"
value={dateCourrante}
onChange={onSetDate} />
But thatdont work
please can you help achieve the goal by explain me where i have wrong ?, thanks.
I am trying to use Standard Date picker using below component but however I want to display custom error message when the enterted date is not in the speciied min & max range. But I am not able to achieve it as I could see the standard error message. I implemented the same by referring to : https://developer.salesforce.com/docs/component-library/bundle/lightning:input/example and in this link I can see that the custom error messages can be shown. But nothing worked for me can anyone please help.
https://developer.salesforce.com/docs/component-library/bundle/lightning:input/documentation
<lightning:input aura:id="field
type="date"
name="MyDatefield"
label="MyDateField"
value="2017-09-07"
min="2017-09-05"
messageWhenRangeUnderflow="Select correct date range1"
max="2017-09-22"
messageWhenRangeOverflow="Select correct date range2"
onchange="{!c.checkValidity }"
</aura:component>
This was asked 1 month back but sharing the answer if anybody else runs across this. Use lightning's setCustomValidity() and reportValidity() methods.
Component:
<aura:component >
<lightning:input aura:id="field"
type="date"
name="MyDatefield"
label="MyDateField"
value="2017-09-07"
min="2017-09-05"
max="2017-09-22"
onblur ="{!c.checkValidity }"
/>
</aura:component>
Controller:
({
checkValidity : function(component, event, helper) {
var inputCmp = component.find("field");
inputCmp.setCustomValidity(""); //reset error
var value = inputCmp.get("v.value");
console.log('value: '+value);
var lowerRange = new Date("2017/09/05");
var higherRange = new Date("2017/09/22");
if(!inputCmp.checkValidity()){
if(Date.parse(value)){
if (Date.parse(value) < lowerRange) {
inputCmp.setCustomValidity("Select correct date range1");
}else if (Date.parse(value) > higherRange){
inputCmp.setCustomValidity("Select correct date range2");
}
}else{
inputCmp.setCustomValidity("Invalid value");
}
}
inputCmp.reportValidity();
}
})
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 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?
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