This is not a duplicate of this
I have a form which has start date and end date with date pickers. The user can add more than one date in the form. In this case the first from date and to date select boxes will be cloned and appended to the form.
I need to check the validity of the dates in each from date and to date pair. That is if to date is smaller than from date error message should be displayed near the to date. I have added the code below. Thanks.
<form name="myForm">
<span ng-repeat="data in userdata">
<ng-form name="repeatForm">
<input type="text" name="expFromDate" ng-model="form.fromDate"/>
<input type="text" name="expToDate" ng-model="form.toDate"/>
<span class="error input-icon fui-alert input-icon-check" ng-show="repeatForm.expToDate.$error.expFromDate"></span>
</ng-form>
</form>
Rather than cloning the date boxes with jQuery or so, you should use an ng-repeat like:
<input ng-repeat="fromDate in ctrl.fromDates" type="text" name="expFromDate" ng-model="fromDate"/>
<input ng-repeat="toDate in ctrl.toDates" type="text" name="expFromDate" ng-model="toDate"/>
Then you can have a method on your controller to do the validation:
<span class="error input-icon fui-alert input-icon-check" ng-show="!ctrl.datesValid()"></span>
public datesValid(): boolean {
return _.all(this.fromDates, date => ...)
&& _.all(this.toDates, date => ...);
};
Related
I am trying to get the maxlength and minlength messages to work correctly. However, I am only getting the "required" message. It then stays there until I refresh the page also. Also, is there a way to put a mask on md-datepicker that forces a user to put in like 99/99/9999 (mm/dd/yyyy). I haven't found anything on this as of yet.
<md-input-container class="md-block">
<label>{{dynElm.dob.text}}</label>
<md-datepicker ng-change="dateChange()" type="text" name="dob" ng-model="signup.date" md-open-on-focus md-current-view="year" maxlength="9" minlength="6" ng-click="md-is-open" required></md-datepicker>
<div class="hint" align="center">(MM/DD/YYYY)</div>
<div ng-messages="signup.dob.$error" style="color:red;" role="alert">
<div ng-message="required">Date of Birth field is required</div>
<div ng-message="maxlength">Use MM/DD/YYYY format for entry</div>
<div ng-message="minlength">Use MM/DD/YYYY format for entry</div>
</div>
</md-input-container>
I would suggest that instead of checking maxlength and minlength for date, check whether date is valid or not. Verify below sample (found on google) which validate entered date and also allows you to mask your entered date.
DEMO
<md-datepicker-custom name="dateField"
ng-model="appCtrl.myDate"
md-placeholder="Enter date"
md-min-date="appCtrl.minDate"
md-max-date="appCtrl.maxDate"
md-custom-required="true"
md-custom-default-date="{{::appCtrl.defaultDate}}"
md-custom-mask="19/39/9999"
md-custom-clean-mask="false"
md-custom-restrict="reject">
</md-datepicker-custom>
I am using Stripe with my angularJs app. Although the code below works fine, I wanted a month, year drop down for the expiry date.
<form stripe-form="stripeCallback" name="checkoutForm">
<input ng-model="number" placeholder="Card Number"
payments-format="card" payments-validate="card" name="card"/><br>
<input ng-model="expiry" placeholder="Expiration"
payments-format="expiry" payments-validate="expiry"
name="expiry"/><br>
<input ng-model="cvc" placeholder="CVC" payments-format="cvc" payments-validate="cvc" name="cvc"/><br>
<button class="checkout" type="submit" ng-disabled="checkoutForm.card.$invalid">Checkout</button>
</form>
How do I integrate two drop downs with this form?
Thanks.
Something along these lines would probably give you what you need.
<select ng-model='expiry_month' ng-change='expiry=expiry_month+"/"+expiry_year'>...</select>
<select ng-model='expiry_year' ng-change='expiry=expiry_month+"/"+expiry_year'>...</select>
I have three radio buttons: Active, Dissolved, Concluded.
If Active chosen then "Active" is stored in the column in the table.
If Dissolved is chosen then an input with a date picker is displayed. This is the same for Dissolved. Therefore the column is set to nvarchar.
What I'm finding is when I save the screen nothing happens. I stepped through the code and got to this line:
if ($scope.addeditregulatoryapprovalForm.$valid)
$valid evaluates to false. If I hover over it, I see $error, if I expand that I see date, if I expand that I see an array with one element, when I expand that I see the date that is displaying in the input field.
If what I'm seeing is correct and that it's the date that is causing the issue I just don't know why it's causing an issue. I have to pick a date, even if it's the same date that's already picked, before I can save.
Any ideas?
Here's the code:
<div class="col-xs-7 form-inner-group padRt0">
<div class="clearfix stackDate">
<input name="DissolutionConcludedStatusDate" id="DissDate1_0" type="radio" ng-model="vm.regulatoryApproval.DissolutionConcludedStatusID" ng-value="1"> Active<br />
</div>
<div class="clearfix stackDate">
<input name="DissolutionConcludedStatusDate" id="DissDate1_1" type="radio" ng-model="vm.regulatoryApproval.DissolutionConcludedStatusID" ng-change=vm.setDate() ng-value="2">
Dissolved <span ng-if="vm.regulatoryApproval.DissolutionConcludedStatusID==2">
<input class="form-field cal-field" type="text" ng-required="vm.regulatoryApproval.DissolutionConcludedStatusID==2"
name="DissolvedStatusDate"
ng-model="vm.regulatoryApproval.DissolutionConcludedStatusDate"
datepicker-popup="dd-MMM-yyyy" close-text="Close" ng-model="vm.regulatoryApproval.DissolutionConcludedStatusDate"><br />
<div ng-show="addeditregulatoryapprovalForm.submitted || addeditregulatoryapprovalForm.DissolvedStatusDate.$touched">
<span class="error" ng-show="addeditregulatoryapprovalForm.DissolvedStatusDate.$error.required">Please select a Dissolved date</span>
</div>
</span>
</div>
<div class="clearfix stackDate">
<input name="ConcludedStatusDate" id="DissDate1_2" ng-model="vm.regulatoryApproval.DissolutionConcludedStatusID" type="radio" ng-change=vm.setDate() ng-value="3">
Concluded <span ng-if="vm.regulatoryApproval.DissolutionConcludedStatusID==3">
<input type="date" class="form-field cal-field" ng-required="vm.regulatoryApproval.DissolutionConcludedStatusID==3"
name="ConcludedDate"
ng-model="vm.regulatoryApproval.DissolutionConcludedStatusDate"
datepicker-popup="dd-MMM-yyyy" close-text="Close" ng-model="vm.regulatoryApproval.DissolutionConcludedStatusDate"><br />
<div ng-show="addeditregulatoryapprovalForm.submitted || addeditregulatoryapprovalForm.ConcludedStatusDate.$touched">
<span class="error" ng-show="addeditregulatoryapprovalForm.ConcludedStatusDate.$error.required">Please select a Concluded date</span>
</div>
</span>
</div>
</div>
I figured out what the issue was. Because I had to save the date as a string in the database when the form was being saved it was considered invalid because it wanted a date from the datepicker. I had to convert the string to a date when it pulled it from the database before assigning it to the model.
I am having trouble formatting a date in a read-only field using AngularJS. This is my html code -
<div class="row">
<label class="col-md-2">Date Last Login:</label>
<div class="col-md-3">
<input type="datetime" name="dateLastLogin" class="form-control" data-ng-model="loginDate" readonly />
</div>
</div>
I have tried to format it using this code in my controller -
$scope.$watch('vm.account.dateLastLogin', function(newValue) {
$scope.loginDate = $filter('date')(newValue, 'MM/DD/yyyy');
});
Putting a break point in the controller, I see the function being called but nothing is displayed.
If I leave my html like this -
<div class="row">
<label class="col-md-2">Date Last Login:</label>
<div class="col-md-3">
<input type="text" name="dateLastLogin" class="form-control" data-ng-model="vm.account.dateLastLogin" readonly />
</div>
</div>
I get a displayed value that includes the date and time but not formatted as I need it. What am I missing?
According to this answer, the W3C removed the datetime input type from the HTML5 Specification. date and datetime-local are still valid.
In your example, throw out the formatting filter and simply use the ng-model="vm.account.dateLastLogin" on a valid date input, like:
<input type="date" ng-model="vm.account.dateLastLogin" />
or
<input type="datetime-local" ng-model="vm.account.dateLastLogin" />
These date formats are formatted correctly to the client browsers locale.
Or, if you actually just want it in some text field, put the filter directly in the ng-model but still use a valid Date object, like:
<input type="text" ng-model="vm.account.dateLastLogin | date:'MM/dd/yyyy'" readonly />
See this jsBin for some examples
I have a date input like this:
<input type="date" name="input" ng-model="date" placeholder="yyyy-MM-dd" class="form-control"/>
Now I want show calendar when click the input. How to controller the date calendar?
<input type="date"> is implemented on the level of the browser. I use Chrome and I do see datetime field.