So I'm working in this Angularjs project using mostly material. I need to setup a timepicker so I'm using the input control with the type=time. Problem is, I need to setup this control to only let the user pick the time in a 30 minutes range. For example, 11:30 or 11:00 are allowed times; 11:12 is not.
If I remember correctly, one can use the "step" attribute to skip the minutes as needed but it seems it is not working anymore. For example, I setup the step attribute to 3600 but I'm still able to pick any minut in the clock.
How can I fix this?
Here is the part of the input code:
<md-input-container style="margin-top: 20px; min-width: 98%; margin-bottom:0;">
<label class="label-form-empleados" style="">
Hora Inicio Cita:
</label>
<input ng-model="HoraInicio" ng-disabled="fDisableHoraInicio" data-ng-change="CalcularHoraFin(ServicioSeleccionado)" type="time" step="3600" class="" placeholder="Hora inicio cita ..." autocorrect="off" autocapitalize="off" spellcheck="false" id="timeInicio" tabindex="11">
</md-input-container>
With an input of 1800 the step will be 30minutes. This should work.
<input type="time" id="appt" name="appt"
min="09:00" max="18:00" step="1800" required>
Another option is use Kendo UI api for Angular. You'll only need to set the attributes.
Related
We use the ng-bootstrap Datepicker as Directive in our project:
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close()" [(ngModel)]="model"
(ngModelChange)="onDateSelected()">
The current behaviour is that onDateSelected() is called when a date in the datepicker is selected, as well as every time a change is made to the input field.
The desired behaviour is that onDateSelected() is called whenever the user clicks on a date in the datepicker or moves the cursor out of the <input> (i.e. blur).
My approach was to change (ngModelChange) to (blur):
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
[(ngModel)]="model">
but this leads to onDateSelected() not being called, when a date is selected from the datepicker - which kinda makes sense, because the cursor is not inside the <input>. However, I could not find some sort of dateSelected-Event when searching the ng-bootstrap docs on which I could call onDateSelected():
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
/* missing -> */ (dateSelected)="onDateSelected()" /* <- */ [(ngModel)]="model">
Is there something I miss? Or maybe another way to implement this behaviour? I can't think of being the only one with this requirement...
Meanwhile, the issue has been closed and there will be a (dateSelect) event in 1.1.0: https://github.com/ng-bootstrap/ng-bootstrap/pull/2254
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close()"
[(ngModel)]="model"
(select)="onDateSelected()">
This will work and onDateSelected() is called whenever you select a date in datepicker
Here is the solution:
<input
class="form-control"
name="startDate"
[(ngModel)]="startDate"
(dateSelect)="doSomething()"
(blur)="doSomething()"
ngbDatepicker
#startDate="ngbDatepicker"
>
Here (dateSelect) handles choosing from the calendar picker and (blur) handles manually input when the input loses focus.
Guess select output method is what you are looking for.
Select: An event fired when user selects a date using keyboard or mouse. The payload of the event is currently selected NgbDateStruct.
Refer the output section
Using dateSelect worked for me:
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); ()onDateSelected()"
[(ngModel)]="model">
By suggestions, I mean the drop down menu appear when you start typing, and it's suggestions are based on what you've typed before:
For example, when I type 'a' in title field, it will give me a ton of suggestions which is pretty annoying.
How can this be turned off?
What you want is to disable HTML autocomplete Attribute.
Setting autocomplete="off" here has two effects:
It stops the browser from saving field data for later autocompletion
on similar forms though heuristics that vary by browser. It stops the
browser from caching form data in session history. When form data is
cached in session history, the information filled in by the user will
be visible after the user has submitted the form and clicked on the
Back button to go back to the original form page.
Read more on MDN Network
Here's an example how to do it.
<form action="#" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
If it's on React framework then use as follows:
<input
id={field.name}
className="form-control"
type="text"
placeholder={field.name}
autoComplete="off"
{...fields}/>
Link to react docs
Update
Here's an update to fix some browsers skipping "autocomplete=off" flag.
<form action="#" autocomplete="off">
First name: <input type="text" name="fname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> Last name: <input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> E-mail:
<input type="email" name="email" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br>
<input type="submit">
</form>
On Chrome, the only method we could identify which prevented all form fills was to use autocomplete="new-password". Apply this on any input which shouldn't have autocomplete, and it'll be enforced (even if the field has nothing to do with passwords, e.g. SomeStateId filling with state form values). See this link on the Chromium bugs discussion for more detail.
Note that this only consistently works on Chromium-based browsers and Safari - Firefox doesn't have special handlers for this new-password (see this discussion for some detail).
Update: Firefox is coming aboard! Nightly v68.0a1 and Beta v67.0b5 (3/27/2019) feature support for the new-password autocomplete attribute, stable releases should be coming on 5/14/2019 per the roadmap.
Update in 2022: For input fields with a type of password, some browsers are now offering to generate secure passwords if you've specified autocomplete="new-password". There's currently no workaround if you want to suppress that behavior, but I'll update if one becomes available.
use autocomplete="off" attribute
Quote:IMPORTANT
Put the attribute on the <input> element,
NOT on the <form> element
Adding the two following attributes turn off all the field suggestions (tested on Chrome v85, Firefox v80 and Edge v44):
<input type="search" autocomplete="off">
I know it's been a while but if someone is looking for the answer this might help. I have used autocomplete="new-password" for the password field. and it solved my problem. Here is the MDN documentation.
This solution worked for me: Add readonly attribute.
Here's an update to fix some browsers skipping the
"autocomplete=off" flag.
<input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">
autocomplete = "new-password" does not work for me.
I built a React Form.
Google Chrome will autocomplete the form input based on the name attribute.
<input
className="scp-remark"
type="text"
name="remark"
id='remark'
value={this.state.remark}
placeholder="Remark"
onChange={this.handleChange}
/>
It will base on the "name" attribute to decide whether to autofill your form. In this example, name: "remark". So Chrome will autofill based on all my previous "remark" inputs.
<input
className="scp-remark"
type="text"
name={uuid()} //disable Chrome autofill
id='remark'
value={this.state.remark}
placeholder="Remark"
onChange={this.handleChange}
/>
So, to hack this, I give name a random value using uuid() library.
import uuid from 'react-uuid';
Now, the autocomplete dropdown list will not happen.
I use the id attribute to identify the form input instead of name in the handleChange event handler
handleChange = (event) => {
const {id, value} = event.target;
this.setState({
[id]: value,
})
}
And it works for me.
I had similar issue but I eventually end up doing
<input id="inp1" autocomplete="off" maxlength="1" />
i.e.,
autocomplete = 'off' and suggestions will be disappeared.
<input type="text" autocomplete="off"> is in fact the right answer, though for me it wasn't immediately clear.
According to MDN:
If a browser keeps on making suggestions even after setting
autocomplete to off, then you have to change the name attribute of the
input element.
The attribute does prevent the future saving of data but it does not necessarily clear existing saved data. Thus, if suggestions are still being made even after setting the attribute to "off", either:
rename the input
clear existing data entries
Additionally, if you are working in a React context the attribute naturally becomes autoComplete.
Cheers!
I ended up changing the input field to
<textarea style="resize:none;"></textarea>
You'll never get autocomplete for textareas.
If you are using ReactJS. Then make this as autoComplete="off"
<input type="text" autoComplete="off" />
I am trying to get autocomplete on a creditcard form to work properly in Safari, however it seems to completely ignore the autocompletion for expiration date. Whether I use cc-exp or separate cc-exp-month/cc-exp-year, neither is working. The autocomplete for cc-name and cc-number are working properly though, as are things working properly in Chrome.
I have been able to bring the issue down to a very simple example:
<form>
<input type="text" autocomplete="cc-name" placeholder="name" />
<input type="text" autocomplete="cc-number" placeholder="number" />
<input type="text" autocomplete="cc-exp" placeholder="expiration" />
<input type="text" autocomplete="cc-csc" placeholder="cvc" />
</form>
What am I missing here? I already tried the older syntax using ID's, names and x-autocompletetype. Neither with any success. Tested on Safari 7 till 10, so this issue seems to be around for a while, or I am really missing something obvious?
(note: to test the example above, make sure you are visiting this page over https, else it would not work anyway)
I was just looking for a solution to this and noticed that on an older form, where I don't even have the autocomplete attribute, it works. The difference between the forms is that on the older form I am using 2 drop-down fields (SELECT tags) for expiry month and year in MM and YYYY formats.
After playing with different options, I concluded that Safari wants 2 separate fields, one for MM and one for YYYY. I now have 2 text fields like this:
<input type="text" name="CCExpiryMonth" id="CCExpiryMonth" value="" placeholder="MM" autocomplete="cc-exp">
<input type="text" name="CCExpiryYear" id="CCExpiryYear" value="" placeholder="YYYY" autocomplete="cc-exp">
This works in Safari.
In most HTML forms when I start typing something (say birth date) navigators propose to sit with previous similar entries. For instance on html form submit the second visit offers me the first visit entries.
However, when using a bootstrap modal containing a form, the same does not happen, for instance: with a form inside.
I do not want to use jquery autocomplete since I do not have a list of potential answers, I just want to have the same behavior in and outside modals.
Thanks.
Browser autofills are notoriously unpredictable - they make educated guesses about the data based on the name attribute of inputs. It's unlikely you'll be able to get this behavior consistently cross-browser.
can you try this :
add the attribute autocomplete = "on" on your form,
maybe it will do the job.
<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
source: http://www.w3schools.com/tags/att_input_autocomplete.asp
Read through this article it should help get things working for you.
Example:
<input type="text" id="name" name="name" autocomplete="name">
<input type="tel" id="tel" name="tel" autocomplete="home tel">
i want to give user facility to choose how much time from the datepicker . they can choose in
minutes and hours.
are their any datepicker can help me to choose the timespan or timestamp.
any way to do this in html5
In html5 you can pick timestamp using one of following inputs:
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">