The date picker plugin is still working even if the field is readonly.
<input name="SpecialFields_{{::field.FieldID}}" ng-model="newUserObj.specialfields[field.FieldID]" type="text" class="DatePickerClass form-control" uib-datepicker-popup="{{format}}" datepicker-localdate is-open="popup.customDate[$index].opened" autocomplete="off" placeholder="e.g. 01-January-2000" datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" ng-required="field.RequiredField == 1" ng-readonly="field.AdminEditable && (isAdmin == 0)">
Is there any way to disable the datepicker
I think you might want to use ng-disabled="field.AdminEditable && (isAdmin == 0) instead of ng-readonly.
This will prevent changes.
Related
ng-invalid after selecting date from datepicker, but becomes valid if typed. Please help.
I worked around this by hiding the datepicker and showing an empty input text field when the value is null and then swapping/showing the datepicker when it is clicked.
<input
ng-if="my_date || set_my_date"
type="text"
id="my_date"
name="my_date"
datetime-picker="MM/dd/yyyy h:mma"
is-open="my_date"
ng-focus="set_my_date = true"
class="form-control"
ng-model="my_date"
placeholder="my date"
ng-readonly="true"
ng-required="true"
/>
<input
ng-if="!my_date && !set_my_date"
class="form-control"
placeholder="my date"
ng-click="set_my_date = true"
/>
ng-invalid class is added from angular when a required field is invalid (e.g empty), make sure the ng-model relative field , formvalue.workshopeDate, is correctly populated when you trigger the click.
I want to make the angular js bootstrap datetimepicker as required field, i am using the this datepicker
https://github.com/zhaber/angular-js-bootstrap-datetimepicker I tried out with this option.
I want to validate the form, if i skip those two steps submit button should not enable.
<form name="addForm" novalidate>
<datetimepicker hour-step="hourStep" minute-step="minuteStep" ng-model="endDate" show-meridian="showMeridian" date-format="dd-MMM-yyyy" date-options="dateOptions" date-disabled="disabled(date, mode)" datepicker-append-to-body="false" readonly-date="false"
disabled-date="false" hidden-time="true" hidden-date="false" name="endDate" invalid="true" pristine="true" show-spinners="false" readonly-time="false"
date-opened="dateOpened" show-button-bar="false" required> </datetimepicker>
<datetimepicker hour-step="hourStep" minute-step="minuteStep" ng-model="endDate" show-meridian="showMeridian" date-format="dd-MMM-yyyy" date-options="dateOptions" date-disabled="disabled(date, mode)" datepicker-append-to-body="false" readonly-date="false"
disabled-date="false" hidden-time="true" hidden-date="false" name="endDate" invalid="true" pristine="true" show-spinners="false" readonly-time="false"
date-opened="dateOpened" show-button-bar="false" required> </datetimepicker>
</div>
<button class="btn btn-primary" ng-disabled= addForm.startDate.$pristine && addForm.startDate.$invalid || addForm.endDate.$pristine && addForm.endDate.$invalid ng-click="addOffer('/offers')">Submit</button>
The library doesn't include required field. So the object is still valid with empty input
You can use addForm.endDate.$modelValue to check is it null in the submit button.
Actually the problem is in the button. Ng-disabled attribute syntax is not correct.
ng-disabled = addForm.startDate.$pristine && addForm.startDate.$invalid || addForm.endDate.$pristine && addForm.endDate.$invalid
It should be like below:=
ng-disabled = "addForm.startDate.$pristine && addForm.startDate.$invalid || addForm.endDate.$pristine && addForm.endDate.$invalid"
Missing double quote.
Thanks
at the moment my datepicker works fine. But I need to fix something.
Saturdays and Sundays days are disabled, so they can't be selected.
As I know, the official documentaion says nothing about this feature. Maybe with template-url, but anyway dont know where to find it.
Any idea? I think it's really easy to solve it.
Since it's in spanish, I need to enable sab. and dom. columns.
Thanks.
If you refer the docs, disabled dates is achieved by:
JS:
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
HTML:
So, you can enable weekends by removing this chunk of code from your datepicker's code, i.e removing the date-disabled attribute passed to datepicker:
date-disabled="disabled(date, mode)"
Complete HTML:
<input type="date" class="form-control" uib-datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
You do not have to change any html. You can just put in dateOptions in controller:
$scope.dateOptions = {
dateDisabled: false
};
and remember to add datepicker-options="dateOptions" to your input in html (btw other specified in html options can be moved to controller, too):
<input type="date" class="form-control" uib-datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
I'm using the autofill-event polyfill for a form in Angular. For some of the fields, I've used ng-model-options within the input field. For those fields in Chrome, the model doesn't update, and fields fail validation when they should succeed. If I don't use ng-model-options everything works fine. Any thoughts on how to fix this in a way that allows me to still use ng-model-options?
Here's the code for the validation that gives a false negative:
<label class="control-label" for="city">City</label>
<input type="text" id="city" name="city" ng-model="contactForm.contact.city"
placeholder="City" class="form-control" ng-minlength="2"
ng-model-options="{ updateOn: 'blur' }" required>
<span ng-show="paymentForm.city.$error.required && !paymentForm.city.$untouched
|| paymentForm.city.$error.required
|| paymentForm.address.$error.minlength && !paymentForm.address.$untouched
|| paymentForm.address.$error.minlength" class="help-block">Enter your city</span>
I have a page with a check box representing "All dates" and two input fields which represent the start date and end dates. When the page first loads the check box is unchecked. The requirement is if the check box is unchecked and there is nothing in the start and end date fields a message must display to the user.
This is what I have for the check box and input fields and the error message:
<input name="dateSelectAll" type="checkbox" ng-model="$parent.vm.selectAllDates" ng-required="$parent.vm.selectedReport.Parameters.StartDate == null || $parent.vm.selectedReport.Parameters.EndDate == null" />All Available Dates
<input name="beginningDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.StartDate"
is-open="beginningDateOpened"
ng-required="$parent.vm.selectAllDates == false"
close-text="Close" />
<input name="endDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.EndDate"
is-open="endDateOpened"
ng-required="$parent.vm.selectAllDates == false"
close-text="Close" />
Please select
This is what I have in the controller at the beginning:
vm.selectAllDates = false;
This is what I have in the submit function:
if ($scope.reportForm.$valid) {
//do stuff
}
else
{
$scope.reportForm.submitted = true;
}
If the form is "valid" when I hit the submit button a modal window will display.
What's happening is the page loads and if I don't enter in dates or check the check box and I hit submit, the message appears and I can't submit which is fine.
When I check off the check box the message stays but I can submit.
When I uncheck the check box and enter dates the message stays but I can submit.
How do I hide the message once any of the conditions have been met? Sorry! I'm still a newbie at Angular.
I'm not sure this is "best practice", but you could use your form's validity to show/hide the message (since you've already setup the validation conditions).
You should be able to use something like
<p ng-show='reportForm.$valid'>Error Message</p>
Alternatively, you can manually setup a $watch on your form's validity to do any other logic you might need
$scope.$watch('reportForm.$valid', function(isValid) {
//change some value to show/hide the message
//any other logic for a change in validity
});
Okay, I figured it out.
For the checkbox I put this:
<input name="dateSelectAll" type="checkbox" ng-model="$parent.vm.selectAllDates" ng-required="vm.selectedReport.Parameters.StartDate == null && vm.selectedReport.Parameters.EndDate == null" />All Available Dates
For the start date I put this:
<input name="beginningDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.StartDate"
is-open="beginningDateOpened"
ng-required="$parent.vm.selectAllDates == false"
close-text="Close" />
For the end date I put this:
<input name="endDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.EndDate"
is-open="endDateOpened"
ng-required="$parent.vm.selectAllDates == false"
close-text="Close" />
And for the message I put this:
<div ng-show="reportForm.submitted || reportForm.dateSelectAll.$touched || reportForm.beginningDate.$touched
|| reportFrom.endDate.$touched">
<span class="error" ng-show="reportForm.dateSelectAll.$error.required || reportForm.beginningDate.$error.required || reportFrom.endDate.$error.required">Please select a Dissolved date</span>
</div>
I kept the code in the controller the same as what I put in my original post.
Thanks #ryanyuyu for answering so quickly. And thanks #DrCord for the info. I'll have to remember that!