I need to change material date picker icon and also I want date toggle to happen on clicking input box .Current behaviour is on clicking existing datepicker icon the date will be toggled.
<mat-form-field appearance="outline">
<input matInput #startInput [matDatepicker]="startPicker" placeholder="mm/dd/yyyy"
(dateInput)="startDateChangeEvent('input', $event)" (dateChange)="startDateChangeEvent('change', $event)">
<mat-hint style="color:red">{{startDateErrorMsg}}</mat-hint>
<mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
<mat-datepicker #startPicker></mat-datepicker>
</mat-form-field>
To change material date picker icon you can add mat-icon instead of mat-datepicker-toggle and for toggle to happen on clicking input box you have to (click)="startPicker.open()" in input like given below:
<mat-form-field appearance="outline">
<input matInput #startInput [matDatepicker]="startPicker" placeholder="mm/dd/yyyy"
(click)="startPicker.open()"
(dateInput)="startDateChangeEvent('input', $event)" (dateChange)="startDateChangeEvent('change', $event)">
<mat-hint style="color:red">{{startDateErrorMsg}}</mat-hint>
<span matSuffix>
<mat-icon>home</mat-icon>
</span>
<mat-datepicker #startPicker></mat-datepicker>
</mat-form-field>
Related
I'm using a vaadin TextField on mobile and want to change the input elements 'type' attribute to 'search' so that on mobile the search button shows up on the on screen keyboard.
The input field is in the shadow dom of the vaadin-text-field element:
<vaadin-text-field class="search" type="search" autocapitalize="none" placeholder="Search packages" style="width: 70%;">
<vaadin-button class="search-field-button" theme="icon primary" slot="prefix" tabindex="0" role="button">
<vaadin-icon class="search-field-icon" icon="vaadin:search" slot="prefix">
</vaadin-icon>
</vaadin-button>
<input slot="input" type="text" id="vaadin-text-field-0" placeholder="Search packages">
<label slot="label" id="label-vaadin-text-field-0" for="vaadin-text-field-0">
</label>
<div slot="error-message" id="error-message-vaadin-text-field-0" hidden="">
</div>
</vaadin-text-field>
Ideally, I want to set this from the java side.
There is a method on the TextField getElement().getShadowRoot() but this comes up empty.
I'm guessing I need some way to access the slot for the input field.
How do I do this?
There is no Java API for this, but you can do it with JavaScript call from Java side.
textField.getElement().executeJs("this.inputElement.setAttribute('type','search');");
I'm trying to disable an Angular Material Autocomplete component. I would have expected to just be able to set disabled on the input, but that does nothing. (I also tried setting disabled on mat-form-field and mat-autocomplete.) Setting matAutocompleteDisabled on input prevented the options from showing, but still allowed typing in the field. Setting readonly on input prevented typing, but it doesn't change the UI, so seems like that will be confusing for the user. Is this a bug, or am I missing something?
Here's the closest I've come so far, using readonly (and disabled isn't working as expected)
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text"
disabled readonly
placeholder="Pick one"
aria-label="Number"
matInput
[formControl]="myControl"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
You should use formControl to set it, something like:
this.formGroupName.controls['myControl'].disable()
Use [attr.disabled]="true". It will set the disabled to true.
You can do css trick for this purpose.
Apply some class to parent tag of input. In you case upper tag is <mat-form-field class="example-full-width"> so i add disable-block class in this. And applied below css.
.disable-block {
pointer-events: none;
opacity: .7;
}
Full code here.
HTML
<form class="example-form">
<mat-form-field class="example-full-width disable-block">
<input type="text" disabled readonly placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
CSS
.disable-block {
pointer-events: none;
opacity: .7;
}
If you want more lighter text field then you can decrease opacity to .6 or .5 or more want you want.
Hope this will solve you problem.
I have a mat-form-field that contains a chip list and another one that contains any other kind of input. I want to be able to navigate away from the chip list into the input field and into the following mat-form-fields but it seems like this behaviour is not supported. Does anyone have a work around for this to be able to navigate this components with tab?
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (removed)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="New fruit..."
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
</mat-form-field>
<mat-form-field>
<input placeholder="Another unrelated field" matInput>
</mat-form-field>
example: https://stackblitz.com/edit/angular-ixswwc?file=app/chips-input-example.html
The infinite loop of focus happens because the <input> is inside of the <mat-chip-list>
It could be solved by doing the following
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (removed)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
</mat-chip-list>
<input placeholder="New fruit..."
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-form-field>
<mat-form-field>
<input placeholder="Another unrelated field" matInput>
</mat-form-field>
My Angular application doesn't show me keyboard, when i click on input for the first time. Second click and other shows it.
I don't have ngTouch and any function on inputs.
<div class="input-wrapper">
<input type="email" name="login" tabindex="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ng-model="form.userData.login" placeholder="{{'LOGIN_OR_EMAIL' | translate}}" required>
</div>
Nothing special in html
if you have
-webkit-user-select:none;
user-select:none;
in your css remove them.
I use jquery mobile for build a Phonegap application. I create any radio sets like this :
I want to checked a radio in a switch case!
switch (font_family){ case 'tahoma': $('#radio-1').checked(); ... }
Can you help me?
From the picture I am assuming you are using jQM version 1.3.x, however this solution works with 1.4.x too.
Assuming you have markup similar to this:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font:</legend>
<input type="radio" name="thefont" id="radio-1" value="arial" checked="checked" />
<label for="radio-1">Arial</label>
<input type="radio" name="thefont" id="radio-2" value="verdana" />
<label for="radio-2">Verdana</label>
<input type="radio" name="thefont" id="radio-3" value="tahoma" />
<label for="radio-3">Tahoma</label>
</fieldset>
The script to switch to Tahoma would be:
$("[name='thefont']").prop( "checked", false ).checkboxradio( "refresh" );
$("#radio-3").prop( "checked", true ).checkboxradio( "refresh" );
The first line unchecks all boxes and the second checks the tahoma box. In jQM you must refresh the checkboxradio widget after changing values.
DEMO