I'm struggling with an Angular/Ionic app that requires Date and Time entry via date-pickers.
Tapping on the Time field opens the time picker. In my browser, the picker works correctly, I can spin, choose a time, the [max] values work correctly.
But when we build an APK and install on an Android device, the spinner sometimes, randomly, doesn't work. A detailed description is appended below.
Running the app on the browser:
When the time picker opens, it contains the currently selected time and works normally.
Running the app on the device:
When the time picker opens, it sometimes contains the currently selected time, but sometimes, randomly, contains a value like 1 00 AM. When it does this, a date can be selected, but the value is not returned when the OK button is tapped.
Being a relative newcomer to Angular/Ionic, I'm battling to find any reports on similar behavior - or any ideas on how to debug this.
Has anyone else experienced this?
Here's the HTML snippet
<ion-input
readonly
[value]="validationsForm.get('tripEndTime').value | date: env.app.dateTimeTimeDisplay">
</ion-input>
<ion-modal class="time-model" trigger="open-modal-end-time">
<ng-template>
<ion-content scrollY="false">
<ion-datetime
id="datetime"
class="time-model-datetime"
#tripEndTime size="cover"
name="select-end"
presentation="time" formControlName="tripEndTime"
[min]="minEndDateTime"
[max]="maxEndDateTime">
<ion-buttons slot="buttons">
<ion-button
color="primary"
(click)="closeEndTime()">
{{ 'CANCEL' | translate }}
</ion-button>
<ion-button
color="primary"
fill="outline"
(click)="saveEndTime()"
color="primary">
{{ 'DONE' | translate }}
</ion-button>
</ion-buttons>
</ion-datetime>
</ion-content>
</ng-template>
</ion-modal>
And here's the .ts
async saveStartTime() {
console.log(this.CLASS_NAME + '.saveStartTime()');
await this.startTime.confirm(true);
this.updateStartDateAndTime();
this.setDateMaxMin('startTime');
}
updateStartDateAndTime() {
/* If Day spinner was set, we have YYYY-DD-MM; if Time spinner was set
we have HH:mm. Either way, we need to set BOTH spinners to the updated
YYYY-MM-DDTHH:mm */
const tripStartDay = moment(this.validationsForm.get('tripStartDay').value).format('YYYY-MM-DD');
const tripStartTime = moment(this.validationsForm.get('tripStartTime').value).format('HH:mm');
const updateDate = tripStartDay + 'T' + tripStartTime;
console.log(this.CLASS_NAME + '.updateStartDateAndTime()',
'\n' + 'updateDate', updateDate
)
this.setStartDateAndTime(updateDate);
}
setStartDateAndTime(updateDate: string) {
console.log(this.CLASS_NAME + '.setStartDateAndTime()', updateDate)
this.validationsForm.get('tripStartDay').setValue(updateDate);
this.validationsForm.get('tripStartTime').setValue(updateDate);
}
I had the same issue with many android versions , so I switched to ion2-calendar
this solve my problem
Related
I'm using the ion-datetime component from Ionic 6 with ionic/angular.
The time-selector is opened, a pop-over is shown with two ion-picker-internal to select hour and minute. You can swipe up and down to select the desired value. If the currently selected value is tapped, the number keyboard is opened, which looks very awkward and confusing.
I know there is an issue in Ionic that the popover is not fully shown when at the edge of the screen. That happens when the keyboard is opened and makes the issue even worse.
See screenshot
My goal is to have the keyboard not opened in the first place.
This is the HTML snippet where the ion-datetime used in my application:
<ion-datetime name="startDate"
[(ngModel)]="inputActivity.startDate"
presentation="date-time"
required="true"
class="ion-no-padding"
slot="content"
></ion-datetime>
I've already studied the Ionic Datetime as well as keyboard related documentation. Setting inputmode="none" didn't help.
And here is a Plunkr to reproduce the issue (no Angular, just Ionic). Issue happens on iOS and Android. You might have to open the preview in a separate tab to be usable.
try this
<ion-item button="true" id="open-date">
<ion-icon name="calendar-outline" slot="start"></ion-icon>
<ion-label>{{inputActivity_startDate | date: 'dd/MM/yyyy H:mm' }}</ion-label>
<ion-popover trigger="open-date">
<ng-template>
<ion-datetime
required="true"
class="ion-no-padding"
presentation="time-date"
min="1950-01-01" max="2050-01-01"
[(ngModel)]="inputActivity_startDate"
displayFormat="D MMM YYYY H:mm"
show-default-buttons="true"
></ion-datetime>
</ng-template>
</ion-popover>
and change inputActivity.startDate to inputActivity_startDate in .ts file
I am using phonegap/cordova to make mobile app, I have an form where there is an input type="date" for picking date. I have used placeholder for setting text on the input type="date" which works perfectly on browser (desktop), but when I am viewing the same form on phone it doesn't works i.e. it shows blank instead of placeholder text.
Please help me how to display the placeholder of input type="date" in phone (android).
I have tried all the possible solutions, setting it as type="text" and making it as type="date" on focus and other stuffs. Please help
Thanks.
Krunal
input type="date" is not a good practice as it is not supported in all browser. it might not work in old phone.
I advice you to use this plugin https://github.com/VitaliiBlagodir/cordova-plugin-datepicker
after adding this plugin use following code in click/tap event of input tag
var options = {
date: new Date(),
mode: 'date',
androidTheme: 5
};
function onSuccess(date) {
alert("Selected date is "+date);
}
function onError(error) {
alert("you canceled the dialog.")
}
datePicker.show(options, onSuccess, onError);
have a look at plugin's Readme.md for more options.
you can use moment.js to show date as your desired format.
This is discussing a problem using Bootstrap/jQ on Firefox/Desktop vs Firefox/Android. The handling seems to be different because on Android selecting an list item a select-dialog with all items is shown.
To work (edit/add/delete) with a list of jobs (assume plain text strings) I have this html:
<select id="jobsList" class="form-control" size="10">
<option>job1</option>
<option>job2</option>
<option>job3</option>
</select>
I tried to extend <option></option> with a onclick="editSchedule(this)". That works fine with FX/desktop with directly accessing the line/option and the called function can work with the job/line. But on Android the separate select-dialog with all 'jobs/lines' shows up. After selecting one, the line in the form is highlighted, but the function isn't called.
Changing to the following jQ code doesn't help:
$('#jobsList option').click(function(){
var job = this.text
var jIndex = this.index
alert('Job selected #:' + jIndex
+'\nJob:' + job)
});
On FX/desktop the alert is fired, not on Android .. so the functions isn't called!
Also using $(document).ready(function() { doesn't help.
Any idea?
I have a largish app which in one place contains something like this. It's created by the Intel XDK New's ui builder.
<div class="table-thing with-label widget uib_w_11 team-margins-2" data-uib="jquery_mobile/select" data-ver="0">
<label class="narrow-control">Choose region:</label>
<div data-role="fieldgroup" class+="" "wide-control"="">
<select autofocus="" data-native-menu="true" id="region-id" data-mini="true">
<option value="1">One</option>
<option value="2">Two</option>
/select>
</div>
</div>
<div class="table-thing with-label widget uib_w_11 team-margins-2" data-uib="jquery_mobile/select" data-ver="0">
<label class="narrow-control">Choose club:</label>
<div data-role="fieldgroup" class+="" "wide-control"="">
<select autofocus="" data-native-menu="true" id="club-id" data-mini="true">
/select>
</div>
</div>
I have an event handler on region-id like this. (Also one on club-id for other reasons.)
var $select = $('#region-id');
$select.unbind('change');
$select.bind('change', function (event) {
event.stopPropagation();
event.preventDefault();
var value = $select.find(':selected').val();
... insert <option> HTML into #club-id here
... with and without $select.selectmenu("refresh")
});
The change event triggers about 2 seconds after a choice is made on region-id on a Samsung Galaxy S4. Such a delay is problematic. The delay on the Samsung Tab2 is not noticeable.
I've put tap and vclick event handlers on region-id and they trigger about 1.5-2 secs before change does. (Timing done with window.performance.now)
The change event handler is more extensive that that illustrated but it completes in less than .1 sec.
I've dumped $('club-id').html() at the end of the handler and its the same as the HTML when club-id is finally rendered.
FWIW, $.mobile.buttonMarkup.hoverDelay = 0 doesn't help.
So I conclude there is a built-in 1.5-2sec delay built-in on at least this phone.
This seems similar to 0.5 sec delays on click events for buttons, workarounds for which are easily found:fastclick and Google fast buttons
However these don't work for click on a select option. The only relevant query I've found is this one on stackoverflow. There the questioner avoided the issue by opting for jqm's custom method with
data-native-menu="false"
I can't do this as it causes other issues which break my app.
So ... any suggestions on how to reduce the 2 sec delay on select's change trigger?
EDIT: MORE INFO
I followed up on Gavin Lloyd's suggestions, converted to non-jQuery handlers and added some event handlers:
$select[0].addEventListener('touchstart', function (event) {
UTIL.consoleLog('touchstart event', UTIL.performanceNow());
var value = $select.find(':selected').val();
UTIL.consoleLog('value=', value);
});
$select[0].addEventListener('touchend', function (event) {
UTIL.consoleLog('touchend event', UTIL.performanceNow());
var value = $select.find(':selected').val();
UTIL.consoleLog('value=', value);
});
$select[0].addEventListener('change', function (event) {
UTIL.consoleLog('change event', UTIL.performanceNow());
...
});
The timings were:
5378 touchstart (tap dropdown button)
5471 touchend (end tap dropdown)
... say 0.25 sec to tap an option (no way to time this)
6539 change event
6543 start updating select tags
6558 end updating: do $select.selectmenu('refresh', true) and confirm $select.html() exists
So the DOM is updated 6558-5471-250 = .837 sec after the option is selected. This is reasonable.
However the DOM is visually updated between 2-2.5 secs after the option is selected.
This suggests much of the delay occurs after the HTML is updated
I rolled the CSS using the jqm themeroller and its not small'ish. I removed themes B&C leaving just A. (So 1/3 the original size.) This did not seem to affect the results.
I would not expect jqm to 'reload' the page or do anything else radical.
Any suggestions by jqm + phonegap are so slow repainting the DOM ?
I suggest you to use 'vclick' which is already there in Jquery mobile library. It omits the native phone double click waiting time (300ms).vclick
As a test, can you see how "old" the change event is by the time your handler gets executed? I'm not entirely sure when that timestamp gets generated, but if you see anything on the order of 2000ms, you'll know something is up.
$select.on('change', function(e) {
var age = (new Date().getTime()) - e.timeStamp; // e.originalEvent.timeStamp
alert('Change event age (ms): ' + age);
});
Also, try binding a DOM event handler directly:
$select[0].addEventListener('change', function(e) {
// ...
});
Tried this approach:
Created a empty app, in Intel XDK, with only one page containing only a select, with no javascripts and no styles (css):
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Tested in my iPhone, HTC Droid and Nexus 7. No problem in any of them, however, when I tested in Galaxy S4, the change event triggers the 2-2.5 seconds that you mentioned after a choice is made.
Seems to be a problem only for Galaxy S4. I don't have more devices to test it! =/
I have web application:
peekatu.com/mobilechat.php
or native version available
https://play.google.com/store/apps/details?id=com.peekatucorp.peekatu&hl=en
That we have wrapped in a webview to deploy as a native android/iphone application. The function and flow of the application on the devices is just fine. The problem I am having is with Android devices trying to input text. My friend on a Nexus 4 can not even log in. If he selects username/password input field the keyboard appears and immediately disappears. He has to copy and paste just to log in. On my device (Dell Streak, Android 2.3.7) I am able to log in find but when inputting text within the app it does the same thing. It will allow me to input 1 message properly and then start the keyboard disappearing issue. Another problem that is occuring is that the touchscreen seems to be off. It is clicking BELOW where you actually touch for buttons and select list. I am having this issue and a friend on a Galaxy S3. Any idea whats going on here? Thanks!
<div id="tabbar" style="height:95px;">
<div class="messagebox" style="width:100%;height:45px;background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222))" id="messagetextbox">
<input type="text" id="msg-text" value="" maxlength="255" style="float:left;width:76%;height:30px;border:1px solid black;margin-top:3px;" placeholder="Enter message" class="textbox" onclick=""/>
<input type="button" style="float:right;width:19%;height:28px;border:1px solid black;margin-top:5px;" value="Send" class="button1" onclick="sendMessage()"/>
</div>`
That is the html code for the input box.^^
function sendMessage(){
var text = document.getElementById('msg-text').value;
document.getElementById('msg-text').value = '';
function loaded() {updateUserRoomData();
$("#msg-text").bind("keypress", {}, keypressInBox);
Thats the javascript for the msg-box^^
if(iui.getSelectedPage().id=='chat' || iui.getSelectedPage().id=='privateconversation') {document.getElementById('messagetextbox').style.display='';document.getElementById('tabbar').style.height='95px';
}
else{
document.getElementById('messagetextbox').style.display='none';
document.getElementById('tabbar').style.height='48px';
}
if(iui.getSelectedPage().id=='profile')
{
//alert(document.getElementById("profile-country").length);
if (document.getElementById("profile-country").length<2)
get_country();
}
var wrapperDivs = document.querySelectorAll('.wrapper');
var headerH = document.getElementById('toolbar').offsetHeight,
footerH = document.getElementById('tabbar').offsetHeight,
wrapperH = window.innerHeight - headerH - footerH;
//wrapperH-=80;
// var dd = document.documentElement.clientHeight+20- footerH;
//document.getElementById('tabbar').style.marginTop=dd+'px';
//document.getElementById('tabbar').style.bottom='0px';
var x = getOffset( document.getElementById('tabbar') ).top;
// alert(headerH+' '+footerH+' '+x+' '+wrapperH);
//wrapperH = x -45;
for (var i=0; i<wrapperDivs.length; i++)'
That is Javascript for entire tabbar that messagebox rest in.