Code:
<div class="col-lg-3 form-group">
<label for="daterange"><strong> Date range</strong></label>
<input type="text" name="daterange" autocomplete="off" bsDaterangepicker #datepickerMD="bsDaterangepicker"
[bsConfig]="{ todayHighlight: true, rangeInputFormat : 'MM/DD/YYYY', dateInputFormat: 'MM/DD/YYYY', showWeekNumbers: false }"
id="daterange" placeholder="Date Range" formControlName="daterangeapp" class="form-control"/>
<div class="dr-input-group-append">
<button class="calendar w-auto input-calendar-btn" (click)="datepickerMD.toggle()" type="button"
[attr.aria-expanded]="datepickerMD.isOpen">
<img tabindex="1" class="img-prop" src="assets/img/calendar_small.png" alt="Save"/>
</button>
</div>
</div>
Am getting the daterange selection as above however, I need to highlight today's date in the picker as well. Tried bsconfig parameter todayHighlight: true it was not working.
According to this Github question and based on this example you should be able to style Today's date based on the custom CSS class .custom-today-class.
So for example
.custom-today-class {
background-color:red
}
You can see how it works in this forked example.
Related
I'm new to angular, working on a small project. I completed the UI for the component and that is fine. I'm using reactive form.
this.questionForm = this._formBuilder.group({
question : ['',[Validators.required]],
options : this._formBuilder.array([
this._formBuilder.control({value:'',disabled:false},[Validators.required]),
this._formBuilder.control({value:'',disabled:false},[Validators.required])
]),
answers : this._formBuilder.array([
this._formBuilder.control({value:'',disabled:false}),
this._formBuilder.control({value:'',disabled:false})
])
})
And this is UI part where I'm facing this problem
<div formArrayName="options" class="form-group col-sm-6" *ngFor="let option of options.controls;let i=index;let temp=option as FormGroup">
<div class="d-flex">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" [formControlName]="i" value="some" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" [formControlName]="i" class="form-control" [class.is-invalid]="option.invalid && option.touched" [placeholder]="'option '+(i+1)">
</div>
<button class="text-danger remove-btn" (click)="removeOption(i)" *ngIf="enableRmBtn">X</button>
</div>
<small *ngIf="option.invalid && option.touched" class="text-danger">Oops!! Cannot be an empty option</small>
</div>
The text input is working fine, but for implementing the checkbox I have no idea how to achieve it.I cannot give the same value for the formControlName for checkbox input. I just want the checkboxes that are select by the user.
Hoping for a solution. Thanks in advance.
I have a form which contain a date picker / calender, email, city name and hotel name, I want a user to select a date and enter other fields and submit the data.
This is what I have.
HTML:
<form [formGroup]="angForm" class="form-element">
<div class="form-group">
<label for="dateOfBirth">Date of Birth</label>
<input id="dateOfBirth" name="dateOfBirth" [(ngModel)]="dateOfBirth" type="text" bsDatepicker class="form-control" />
</div>
<div class="form-group form-element_email">
<input type="email" class="form-control info" placeholder="Email" formControlName="email" #email (ngModelChange)="onChange($event)">
</div>
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
class="alert alert-danger">
<div *ngIf="angForm.controls['email'].errors.required">
Email is required.
</div>
</div>
<div class="input-group mb-3 form-element_city">
<select class="custom-select" id="inputGroupSelect01" #cityName>
<option selected *ngFor="let city of cities" [ngValue]="city.name">{{city.name}}</option>
</select>
</div>
<div class="input-group mb-3 form-element_hotel">
<select class="custom-select" id="inputGroupSelect01" #hotelName>
<option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name">{{hotel.name}}</option>
</select>
</div>
<div class="form-group">
<button type="submit" (click)="addReview(email.value, cityName.value , hotelName.value)" class="btn btn-primary btn-block form-element_btn"
[disabled]="!validEmail">Book</button>
</div>
</form>
This dispalys the following result: wrong one
Instead of that input with date picker , I just want the full calender to be display on the left side ,
Here is what I want . Good one
I tried many solution online I could not be able to solve my problem,
What do I need to change in my code to get the result I want? please Am newbie though, thanks
You can actually provide placement in the element which uses bdDatepicker directive.
Just set this placement property to left value.
Here is example in documentation.
https://valor-software.com/ngx-bootstrap/#/datepicker#placement
Herein, a textfield format 2018-05-22 00:00:00 which for dateTime columns in my DB. I am trying to make it two textfield without change into my table wherein one is for date(date-picker) and another is for time.
<div class="form-group col-lg-5">
{!! Form::label('tradedate', 'Traded date:') !!}
<div class=" input-append date form_datetime" data-date="{{date('Y-m-d H:i:s')}}" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
<input size="16" type="text" value="" readonly class="form-control">
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input type="hidden" id="dtp_input1" value="" name="tradedate" />
</div>
I think issue is that you are not using any sort of function for your date-date-format attribute.
<div class=" input-append date form_datetime" data-date="{{date('Y-m-d H:i:s')}}" data-date-format="{{date('dd MM yyyy - HH:ii p')}}" data-link-field="dtp_input1">
Just for information in laravel you can use Carbon to deal with date and times. We can do date logic very easily using it. Link below: https://carbon.nesbot.com
Hope , it helps...thanks..cheers.
I used to implement an Angular 2/4 application with Bootstrap 3 and used the Reactive Forms approach. I had a field-validation where the border of the input-field turned red and an error message appeared under the field in red font color.
it looks like this:
<div class="form-group row"
[ngClass]="{'has-error': (sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
!sourcesForm.get('sourceName').valid }">
<label class="col-md-2 col-form-label"
for="sourceNameId">Source Name</label>
<div class="col-md-8">
<input class="form-control"
id="sourceNameId"
type="text"
placeholder="Source Name (required)"
formControlName="sourceName" />
<span class="help-block" *ngIf="(sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
sourcesForm.get('sourceName').errors">
<span *ngIf="sourcesForm.get('sourceName').errors.required">
Please enter the Source Name.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.minlength">
The Source Name must be longer than 3 characters.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
The Source Name is too long.
</span>
</span>
</div>
</div>
Now i have to use Bootstrap 4 and neither the error message or the input-field turns red. How do i realise this? I tried to change the class of the parent span-block to "form-text" but it didn't work.
For beta version of Bootstrap v4, you can check out Form validation docs. There you can read about the new way, supported by all modern browsers for HTML5 way of form-validation with valid/invalid css classes. There Bootstrap uses the .was-validated and .invalid-feedback classes for what you want to achieve (see code snippet).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="container" id="needs-validation" novalidate>
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
"use strict";
window.addEventListener("load", function() {
var form = document.getElementById("needs-validation");
form.addEventListener("submit", function(event) {
if (form.checkValidity() == false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
}, false);
}, false);
}());
</script>
If you want something more similar to Bootstrap 3, you can use what they call server-side validation, as it is written:
As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.
Previous answer for alpha version of Bootstrap V4 (if you must use this).
On Bootstrap V4 Form Validation Docs there is the following example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-danger">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
So i think you just need to change the has-error class to has-danger
This is the solution:
<div class="form-group row">
<label class="col-md-2 col-form-label"
for="sourceNameId">Source Name</label>
<div class="col-md-8">
<input class="form-control"
[ngClass]="{'is-invalid': (sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
!sourcesForm.get('sourceName').valid }"
id="sourceNameId"
type="text"
placeholder="Source Name (required)"
formControlName="sourceName" >
<span class="invalid-feedback" *ngIf="(sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
sourcesForm.get('sourceName').errors">
<span *ngIf="sourcesForm.get('sourceName').errors.required">
Please enter the Source Name.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.minlength">
The Source Name must be longer than 3 characters.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
The Source Name is too long.
</span>
</span>
</div>
</div>
i needed to put the [ngClass]into the input-tag. Then i had to define the class as is-invalid and set the parent span-class to invalid-feedback
i know that your question is for long time ago, but it is the best way to validate the form-control input field by reactive form technique and bootstrap 4 to display the validation. first you need to write some code for your form :
in html section:
<form [formGroup]="myForm">
<div class="form-group">
<label for="name">first Name: </label>
<input type="text" class="form-control" formControlName="firstName" id="name">
<div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
<div *ngIf="firstName.errors.required">filling name is required!</div>
</div>
</div>
in ts file, you should implement the logic to conduct the validation.
in ts file:
myForm = new FormGroup({
'firstName':new FormControl('',Validators.required)
})
//getter method
get firstName(){
this.myForm.get('firstName');
}
now you can see that the validation is working. now to give style to input field to show the red border around the invalid input, just go to css file of component and add this class to the css file:
.form-control.ng-touched.ng-invalid{border:2px solid red;}
and simply you can see the result.
I am having trouble getting the reset button to clear checkboxes on a Foundation 4 custom form. I haven't found anything specifically talking about this issue so far. I found this post (which is Foundation 5): http://foundation.zurb.com/forum/posts/3317-refresh-form-on-click-of-cancel-button , which is slightly similar to my issue.
I modified the Codepen in the zurb forum above to help troubleshoot the issue to demonstrate my problem. As you can see, the reset button does not clear the checkbox. If I remove the "custom" class, the reset works. However, the look and functionality of the form relies on the custom class, so that's not an option.
http://codepen.io/jdkoelsch/pen/jzLgB
Here is the code from Codepen (stack overflow wants me to include code if I link to codepen.io)
<form class="custom" data-abide>
<div class="row">
<div class="small-12 medium-6 columns field1">
<label for="field1">Field1 <span class="required">Required</span>
<input id="field1" maxlength="20" name="field1" type="text" required pattern="alpha" placeholder="Field1">
<small class="error">Please enter something valid.</small>
</label>
</div>
<div class="small-12 medium-6 columns field2">
<label for="field2">Field2 <span class="required">Required</span>
<input id="surname" maxlength="20" name="field2" type="text" required pattern="alpha" placeholder="Field2">
<small class="error">Please something valid.</small>
</label>
</div>
<div class="small-12 medium-6 columns field3">
<label for="field3">Field23 <span class="required">Required</span>
<input id="chkbox" name="field3" type="checkbox">
<small class="error">Please something valid.</small>
</label>
</div>
</div>
</form>
<div class="row">
<button class="clear">Clear</button>
</div>
Is there anything I can do (besides updating to Foundation 5) to get the reset button to work?
Looks like in your codepen example your not choosing the right selector, try "form div label". Also set the focus_on_invalid:false. Try the js below -
$(document).foundation({
abide : {
live_validate : true,
focus_on_invalid : false
}
});
$(".clear").on("click",function(){
$("form")[0].reset();
$("form div label").removeClass("error");
});