i am using the input type "date" tag , and i expect it to validate the date , such as april cannot have 31 days and so on. However , this validation does not work the first time i set "31-04-2014", if i go to the date field again and change the day to something else and back to an invalid one , it throws the error.
<input type="date" class="form-control" ng-model="someModel" name="abc" ng-required="de.compulsory" />
<span class="errortxt" ng-show="form.eventDataEntryForm.abc.$error.date"> ERROR</span>
You can use Datepicker from https://angular-ui.github.io/bootstrap/#/datepicker to resolve this problem.
Related
I am using the Angular Moment Picker library and trying to set a custom date in the input field whilst also trying to prevent the user from selecting a date in the past.
My element looks like so:
<input class="form-control"
moment-picker="endTimePicker"
name="campaignEndDate"
locale="en"
format="MMMM Do YYYY, h:mm A"
today="true"
start-view="month"
min-date="minDate"
ng-model="endTime"
ng-model-options="{ updateOn: 'blur' }"
ng-required="!campaign.NeverEnds"
style="width: 60%;"/>
And my controller:
$scope.minDate = moment();
$scope.endTime = moment( $scope.campaign.EndTime );
When I open the form, the Angular Moment Picker shows today's date/time in the input field, even though $scope.endTime is showing a date in the past.
The only way I can seem to get the correct date showing in the input field is to set validate="false" on the element, but then the control doesn't pass validation because the date is a date in the past.
What I am trying to achieve is to show an initial date (2020-07-29 02:14:00) when the user opens the form, but if they try and change the endTime, then cannot select a new date in the past.
Is this achievable somehow?
Okay, after playing around with this some more, and going back over the documentation, I found the best approach to achieve what I wanted was to implement a selectable method:
angular-moment-picker#methods
I removed the min-date="minDate" which allowed the Moment Picker to then show the correct date in the input field and then added a selectable="isSelectable( date )" to the element to filter out and disable any previous days:
$scope.isSelectable = function( date ) {
// Disable all previous days
return date >= moment();
};
I have below date-picker input control in my html code and i want to disable the past date.
<input type="text"
name="startDate"
class="form-control input-sm"
datepicker-popup="dd-MMMM-yyyy"
min="minStartDate"
ng-model="data.SalesStartDate"
required
onkeypress="return false"
onpaste="return false" />
where minStartDate is set in controller and has tomorrows date.
This is disabling the past dates and working fine.
But the issue is, if i select tomorrows date now,save this form and open this form after one week, the startDate will become past date and hence my form.startDate.$invalid should become true but this is not happening though my form.$invalid is becoming true due to this.
Any idea please?
I am using angular bootstrap datepicker. Everythings works fine but when I select any date like 20-march-2015 it showing me 19-march-2015(one day less from selected day).
Here is my code in Plunker
This is a daylight saving issue.
Do you get the same issue with dates in February.
Looking at your example you can see the date is
OutPut: "2015-04-26T23:00:00.000Z"
For today :)
if I select 1st Jan, I get
OutPut: "2015-01-01T00:00:00.000Z"
Change your SPAN to
<span>OutPut: {{formData.dueDate | date : 'dd/MM/yyyy'}}</span>
And your good ( note the | date : 'dd/MM/yyyy' )
Actually you don't need datepicker. Delete datepicker and use type="date".
<input ng-model="formData.dueDate" type="date" id="dueDate" name="dueDate"
class="form-control" ng-click="data.isOpen = true">
Example
I have found an issue with validation of a manually typed date value that falls outside of the minDate or maxDate values when using the datepicker-popup.
This can be demonstrated with the datepicker popup on the angular ui site by following the steps below: http://angular-ui.github.io/bootstrap/#/datepicker
Ensure the min date option is turned on (min date should equal today)
Type in yesterdays date to the datepicker-popup
This shows a red border around the inline datepicker (as it is flagged as ng-invalid-date) however the input box for the datepicker-popup is still valid.
On further investigation it seems that the ng-invalid-date attribute has been set against the popup part of datepicker and not against the input box. This causes issues because firstly, the user cannot see that the element is invalid and secondly the popup does not have a name property so I am unable to check validity from the ng-form (e.g. myForm.myDate.$invalid
Does anyone know any way around this?
You can do an additional validation on ng-change for the text field and setValidity of that field to false to achieve what you want. Here is a plunker that demonstrates the idea.
http://plnkr.co/edit/N9Hk9QFIfj3IXfHoWwbt?p=preview
I added a little css styling to get the red border to show when the field is invalid. The validity test is very basic; you'd want to enhance it to allow the current day.
If you have the input set up like this, <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" is-open="open" datepicker-options="datePickerDateOptions" close-text="Close" ng-change="change()" />
then in your controller you can check what $scope.date is in your $scope.change() function. If $scope.date is undefined then its not valid. If its null then its empty. Anything else is a valid date.
I am using bootstrap datepicker to for an input field "start date" . If the field is empty, another field "end date", which is also filled using a datepicker, should be disabled. Only after entering a date in the start date, the end date field should be enabled. I tried doing this using angular js. The sample code is below.
Start date
<input ng-model="startdate"/>
End date
<input ng-disabled="!(!!startdate)"
The end date remains disabled even after selecting a start date. Please help. If I try to get the value of the start date field it says "htmlinput element"
Please help
It's pretty easy!!
Try this out
Working Demo 1
Working Demo 2
Start Date :<input ng-model="startdate"/>
End Date :<input ng-disabled="!startdate"/>