I need to get a time from the user on mobiles. I dont want to show the html input field to the user. I thought I could simulate a click or give focus to on an input field to start the native time picker. It does not seem to work. any Idea How to do that ?
I wrote this pen to try it on android. codepen.io/kbenoit/pen/gJmay
Basically clicking on a button triggers this code:
var e = document.getElementById("timeInput");
e.value = "8:00:00";
e.focus(); // or
e.click();
Where
<input id="timeInput" type="time"></input>
I know I can implement my own picker in html, but it would be simpler and prettier to use the native time picker.
Since I'm using ionic (cordova and angular), I'm using this cordova plugin instead.
Related
I am trying to implement basic automation using Power Automate Desktop to change date selection on webpage and download the report. To do this I am injecting following javascript, which does change the date for me but webpage does not get updated as it should be updated once new date is selected. I have attached the link for snap where I manually select the date and webpage updates.
Can anyone help me to achieve this task of updating webpage when new date is selected.
P.s: I am not familiar with Javascript, the code I am using was taken from someone else.
document.getElementById("accPanelFilter:formFilter:panelSearch:j_idt80:j_idt82:daySelectGasDay:daySelectGasDaycalendar:daySelectGasDaycalendarcalendar_input").value = "10-11-2021";
I'm using react-datepicker and would like to open the calendar from separate calendar button and still show the user choice in field next to that button.
However, documentation doesn't show any example how to open the calendar from custom button. How could I achieve this custom functionality?
If you want to toogle down some element you can just use Java Script:
$("button").click(function(){
$("p").slideToggle();
});
I suggest you to don't rely on scripts written by someone else, becouse you could not understand them and all your work will be in a mess. Read Java Script tutorial to work by your own ;)
Tutorial
In normal html, I use below code to define an input date picker which allow user to select date in a popup calendar. It works fine.
<input type='date'></input>
but now, I want to show the date picker on a onClick function of a button. I know that there may be some other 3rd party date picker component available. But I don't want to bring new dependencies in my application. So i am looking for a default way to support this behavior.
BTW, my web app is built on react, redux framework. And it is running on android and iOS webview. If the default date picker doesn't support this requirement, any 3rd party component which is fit for mobile device and compatible with react is also welcome.
Give id to the input tag and then on click of a button use .focus() event
For eg: onclick="document.getElementsByTagName('input').focus()"
I am using the Anytime datepicker on some input elements.
This is how it's set on an element:
AnyTime.picker(element_id)
With element_id being a string containing the id of the element.
When the element is clicked, it brings up the Anytime datepicker control.
It works OK, but I want to prevent it from firing in some situations, if some conditions are met. I can't seem to find a decent way to do that.
More specifically, I want to inhibit it when browsing from a mobile device, and use the HTML5 date dialog instead (or just a text input, if it's not available). I've found a way to have the HTML5 date dialog show up when the site is in "mobile layout", using media queries in JavaScript (window.matchMedia()), but I end up with both Anytime and the HTML5 date dialog tied to to the element, and clicking it will bring up both. I want Anytime to not show up in this case...
I can't find anything that works, short of modifying the Anytime source to fire only conditionally...
I've tried removing the datepicker with Anytime_noPicker(), but it doesn't work, and it would be a very un-elegant solution anyway, if it did work.
Instead calling AnyTime.picker() every time, you can put it inside the else condition for your window.matchMedia() test. For example:
if ( window.matchMedia(...) )
// use input type="date" here
else
AnyTime.picker('element-id');
Another answer that might be a better solution for you is to test whether the browser is actually supporting the type="date", and only invoke AnyTime.picker() or $().AnyTime_picker() if it does not. For example:
if ( document.getElementById('my-date').type != 'date' )
AnyTime.picker('my-date',{...});
First I have created UI as shown below using HTML and Javascript
I am loading this on webView using UIWebView Class.
My Requirement : In the above image when I enter first letter in first textBox then cursor has to move to next textBox automatically.
Now I am getting keyboard Up when I click on each textBox, but it is not jumping to next textBox automatically.
I know that I have to use becomeFirstResponder and resignFirstResponder for this, But I am unable to get UITextField instance when I send the request from HTML when I enter each character.
Please help on this.
If you're using a UIWebView, it would make much more sense to make your Javascript code jump between the fields, instead of trying to do it from your iOS project.
You could check for a keyDown with either regular Javascript or jQuery if you're looking for some easier methods, and then use focus() to move to the next input in your HTML.