I already search the forums and the webs for similar issues, but haven’t found anything useful yet.
I’m using “@ionic/angular”: “^6.1.9” and show an ion-datetime. On android when the time-selector modal is open and the current set hour or minute is tapped, the number-keyboard opens (and obstructs a part of the modal, but that’s another issue). Same happens on iOS where it’s even worse, because there’s no dedicated button to dismiss the keyboard.
Reading further through the documentation… inputmode="none" did not help, since it seems it’s not supported in datetime.
Looking at the source, the numericInput attribute makes the keyboard open. I’ve tried the datetime basic test without that attribute and the keyboard does not open. I’m not that familiar with the ionic source (yet), but maybe I’m able to create a pull request.
Anyone volunteering to help?
What would be the preferred way to disable keyboard input? inputmode="none" or something else?
EDIT: This change makes it work like I need it:
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index ae07f5819..1224ab5db 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -222,6 +222,13 @@ export class Datetime implements ComponentInterface {
*/
@Prop() clearText = 'Clear';
+ /**
+ * The input mode for the time-picker. 'none' will not set the 'numericInput' attribute on the
+ * time picker, unset or 'numeric' will set the 'numericInput' on the time picker resulting
+ * in opening a numeric keyboard on mobile devices if the current value is tapped.
+ */
+ @Prop() inputmode?: 'none' | 'numeric';
+
/**
* Values used to create the list of selectable years. By default
* the year values range between the `min` and `max` datetime inputs. However, to
@@ -1533,7 +1540,7 @@ export class Datetime implements ComponentInterface {
ampmItems: PickerColumnItem[],
use24Hour: boolean
) {
- const { color, activePartsClone, workingParts } = this;
+ const { color, activePartsClone, workingParts, inputmode } = this;
return (
<ion-picker-internal>
@@ -1541,7 +1548,7 @@ export class Datetime implements ComponentInterface {
color={color}
value={activePartsClone.hour}
items={hoursItems}
- numericInput
+ { ...inputmode == 'none' ? '' : 'numericInput'}
onIonChange={(ev: CustomEvent) => {
this.setWorkingParts({
...workingParts,
@@ -1559,7 +1566,7 @@ export class Datetime implements ComponentInterface {
color={color}
value={activePartsClone.minute}
items={minutesItems}
- numericInput
+ { ...inputmode == 'none' ? '' : 'numericInput'}
onIonChange={(ev: CustomEvent) => {
this.setWorkingParts({
...workingParts,
I took some time to compare the keyboard input of the ionic time picker with the iOS native one, there are some differences:
Locale is de_at, so we’re dealing with 24h time.
input 0 0 0 0 with the keyboard
** iOS native widget: time is set to 00:00 (seems correct)
** Ionic widget: original time value was 08:13, resulting time is 08:00
input 1 1 1 1 with the keyboard
** ios native widget: time is set to 11:11
** ionic widget: (original time 08:13) time is set 11:11
input 2 2 2 2 with the keyboard
** ios native widget: time is set to 22:22
** ionic widget: (original time 08:13) time is set to 02:22
Looks like there are some issues with handling the keyboard input anyway… Shall I open a bug report?
The keyboard input for datetime is not a 1-to-1 remake of the iOS keyboard behavior, so I would not expect the behaviors to be exactly the same. The keyboard input in Ionic is more like a select (similar to how <select> works) while the iOS one is a freeform text input.
For example, in iOS 15 you could type “62” into the minutes field:
In Ionic you cannot do that because there is no minute 62. In iOS 16, Apple revised the behavior so you can no longer do that, bringing the behavior closer to Ionic’s.
Thanks for the reply and clearing things up. I’m just getting into mobile development and do not know all the de-facto standards and behaviours yet.
I took the iOS datetime picker as a reference, since I did not have an Android device at hand at the time. The Android picker seems to work a little different with the keyboard input: it highlights the field which currently “gets” the keyboard input.
I guess once the layout issue is fixed, that the picker is not hidden by the keyboard, I’m good.
I am seeing this exact same issue on my end. The keyboard seems to work for any time between 10:00-19:59, but outside that it fails as you describe. The minutes seem updatable, but the hours will not get updated as expected. Some more examples from my end:
Time is set to 05:12
** Input 0 8 3 4 sets the time to 05:34. If I add a 0 at the end such that the sequence becomes 0 8 3
4 0, I get the correct time, i.e. 08:34
Let’s go by a sequence to show what’s happening. Set the time to 00:00. Inputs - time then look like this:
0 - 00:00
1 - 00:00
2 - 00:20
3 - 00:23
0 - 12:23
4 - 02:23
5 - 03:23
6 - 03:56
0 - 04:56
2 - 05:56
3 - 06:56
8 - 06:38
0 - 02:38
9 - 03:38
0 - 08:38
9 - 08:09
0 - 09:09
0 - 09:09
0 - 09:09
0 - 09:09
0 - 09:09
0 - 09:09
2 - 09:02
2 - 09:22
2 - 09:22
2 - 02:22
2 - 02:22
…
I understand that you shouldn’t use the keyboard like this, but I think it’s worth to show a sequence s.t. someone can understand what’s going on under the hood.
