I have a non-nullable date field which I present in the following HTML element:
<input type="date" value="(enter date value here)"/>
By default there will always be a date in this field. However, iOS's native datepicker comes with the ability to clear the date.
There's code to validate on both the client and server that this field cannot be empty. Still, I'd rather not have this button shown at all to the user.
Is there a way I can hide it, using a special attribute or something? I don't care if the solution is targetted at iOS's Safari only.
When the dateTimePicker is called, you could try and add a UIView over the picker with the appropriate background color to hide the button.
Alternatively, consider that 'clear' in the context of your app could mean 'clear what the user has selected to let them start fresh.' If they hit the clear button, just insert today or whatever date you want as a default date.
Related
I need few suggestions/workarounds. I am having an issue on user experience of ngx-bootstrap inline datepicker.
If the user selected the date range on the same day, some user only click once. The problem is bsValueChange only emit when click twice. So when the user click the apply button on the screenshot, it applies the previous value. What i want to do is if the user did not click twice, i disable the apply button but the v5.3.0 does not have an event emitter for that situation.
Thank you
enter image description here
Hi I would suggest you add some external buttons with some predefined date ranges like in here. quick dates with buttons
Then you can just hook it to a click event and in the method you set the bsValue input to [m().subtract(0, 'days').startOf('day').toDate(), m().endOf('day').toDate()]; where m refers to momentjs.
I have a primefaces autocomplete element which works great except one thig. The problem is that when I enter a valid text (which is mappable to the data behind) but I don't select the element from the propositions, and don't press tab or enter, nothing happens.
So I enter a value and click into another field, the element is not selected and the validation fails. However, I don't want the user to force to explicitly select an item.
My ideas were, that i put an onchange listener to the input element and trigger the primefaces itemSelect event within. But I don't know how to do that, if it's even possible.
Or maybe there are other solutions?
Thanks in advance!
I found a way, although it might not be the most beautiful and easy one.
Maybe it helps somebody...
This is a specific solution for primefaces (5.3), but it should work for other versions too.
$('#form\\:txtAutoComplete_input').val('Foo');
$('#form\\:txtAutoComplete_input').trigger('keydown');
$('#form\\:txtAutoComplete_input').trigger('input');
$('#form\\:txtAutoComplete_panel .ui-autocomplete-item').trigger('click');
For some reason, after the value is entered into the input field, you have to trigger the keydown and the input event in that order. After these events the autocomplete list shows with the matching values. There you have to trigger click on a certain element, so all the backing bean stuff is properly executed.
There is an API for Primefaces widgets.
For instance ;
<p:autoComplete id="gtautoaomplet" value="#{item.soemprop}" completeMethod="#{bean_CrossCheckNew.completeText}" scrollHeight="250"/>
In JS code ;
widget_form_mapingGrid_0_gtautoaomplet.search('foo');
When you write "PrimeFaces.widgets" in your browser console you can see all the widgets available in your page.
For more datail :
https://primefaces.github.io/primefaces/jsdocs/index.html
Good luck.
I'm working on bug requests for an jQuery Mobile/HTML5 app on Blackberry 10. One of the bugs reported only seems to manifest on the BB10. The bug report is that the datepicker sometimes doesn't show up when the date field (input type=date) is tapped.
After experimenting with this for a while, it appears that, on the BB10, the date picker isn't triggered by the date field having focus, but rather by the the user 'tapping' the field -- and that tap seems to have a bit of time sensitivity.
As an example: if I use jQuery Mobile's "clear button", like so:
<input type="date" name="my-field" value="" data-clear-btn="true" autocorrect="off"
autocapitalize="off" />
I can easily create a scenario where I provide a date and then hit the clear button. The net result is that the date field has focus, but the date picker doesn't automatically appear. Once the form state is like this, it's pretty easy to get the problematic behaviour -- tap and nothing happens.
As I said, above, there seems to be a bit of time sensitivity to the tapping. When trying to give that field focus, some people seem to tap fairly quickly -- jQuery seems to notice the tap and does its magic to apply the "ui-focus" style, but it's still seems to be too quick to get the date picker to intervene. So far, every time I've held my finger down for a full second, I've always had the date picker pop up, but my usual tapping speed is a bit too fast to trigger the date picker (and the QA people certainly seem to have tripped on this a number of times).
My question, then, is: Is there anything I can do about this? Is there an event I can fire on focus that'll trigger the datepicker? Or some kind of configuration I can fiddle with?
I fear that the answer is probably "no" but I wanted to ask.
When using an input type date in HTML5, after the user clicks on a date, the calendar stays expanded forcing them to click away from the calendar to make it collapse. I'd like for this to happen in a single click (i.e. when they click on the calendar, the date is recorded, the calendar collapses and they can get on to other business). Can anyone tell me how to do this? Thanks!
<label>Date</label>
<input type="date" id="my_date">
You could do it by using a jQuery plugin such as datepicker from jQuery UI:
http://jqueryui.com/datepicker/
You could also use webshims, which polyfills incapable browsers and gives you nice custom widgets on top of HTML5 form inputs. Here is a demo, which includes some examples with different configurations.
webshims.polyfill('forms forms-ext');
I'm building an HTML page to be viewed in mobile Safari [and other platforms]. The page lets the user specify several start and end times. They have to input at least two times, and possibly more depending on their situation.
I want the user to be able to input their times as numbers and punctuation using the numeric-SHIFT mode keyboard, i.e. the user will see fields like this:
And they'll get the numeric-SHIFT keyboard when they focus into the field:
Won't work:
<input type="time"> (and related datetime types) is not an option. The scrolly-wheel is unacceptable from an HCI perspective, particularly for repeated entries.
<input type="number"> does the right thing at first. It triggers the keyboard in numeric-SHIFT mode, i.e. the numeric & punctuation portions are visible by default. But when you exit the field, mobile Safari strips out punctuation (i.e. the colon). I tried turning off validation in the form using novalidate but that didn't work.
<input type="text" pattern="[0-9]*"> triggers the telephone keyboard with no way to enter the colon character.
I may just need a different RegExp in the PATTERN attribute, but each one I've tried triggers the normal alpha keyboard, and the user has to hit a key to get to the numeric-SHIFT keypad.
Can anyone tell me how to force the keyboard into numeric-SHIFT display without triggering harsh validation rules on the user's input?
Take a look at jQuery Mobile DateBox. here. Its possible you might want to rethink text input here. Maybe you want to go with a picker. Sencha Touch also has a DatePicker. I wrote an extension that implements a timepicker object. I'll throw it up on GitHub if you need me to.