0

I have a webapp that is to be run in a iOS device, and I am trying to call the native datePicker, by clicking in a specific label.

I know that if I have an <input type='date'> it will open the native datepicker by touching it.

My strategy was to put this input with "opacity: 0" under the label and bind the click event of the label to the trigger event of the input, like this:

$('#pickerLabel').bind('click',function () {
    $('#pickerInput').trigger('click');
});
$('#pickerInput').click(function () {
    alert("open Picker");
});

What I observed is that this method just triggers the function binded to the click event (it alerts "open Picker") but it does not open the native iOS datePicker, as if I clicked the input itself.

Can you help me?

PS: I have the jquery mobile framework also included in the project and i tried using the tap event in the input and had exactly the same result.

Manse
  • 37,765
  • 10
  • 83
  • 108
Nunoestrada
  • 25
  • 8

2 Answers2

1

Have you tried initiating a WebKit touch event?

var touchEvent = document.createEvent('TouchEvent');
touchEvent.initTouchEvent(type, canBubble, cancelable, view, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, touches, targetTouches, changedTouches, scale, rotation);

https://developer.apple.com/documentation/webkitjs/touchevent

An (untested) example might look like this:

$('#pickerLabel').bind('click', function(){
    var touchEvent = document.createEvent('TouchEvent');
    touchEvent.initTouchEvent('touchstart', true, true, document.getElementById('pickerInput'), null, 0, 0, 0, 0, false, false, false, false, [], [], [], 1.0, 0.0);
});
Cœur
  • 37,241
  • 25
  • 195
  • 267
Michael Bird
  • 824
  • 7
  • 4
  • Do you know where I can find a concrete example of the usage of this? – Nunoestrada Jul 02 '12 at 10:33
  • I've updated the answer to include an example. I've not come across an official example of how to implement it yet though. – Michael Bird Jul 02 '12 at 10:51
  • I've tried the code you posted here but I get the following error: "NOT_SUPPORTED_ERR: DOM Exception 9: The implementation did not support the requested type of object or operation" – Nunoestrada Jul 02 '12 at 16:41
0

I managed to solve this issue in the following way: I placed both the label and the input in two diferent divs. I placed both divs on top of each other, having the input div with higher z-index (and maintaining the opacity to 0).

I used the css in this forum question: How to overlay one div over another div

This is still only a workaround that does not have the desired behaviour.

Community
  • 1
  • 1
Nunoestrada
  • 25
  • 8