How to make calendar pop up when pressing on Date Picker input box?

[Danny Sanderson]

Hi

I was just wondering if there was a way to make the calendar pop up when the user selects the input box of the date picker. At the moment you have to press the little circular button next to it.

It would be good if I could have both the calendar pop up and the iPhone keyboard pop up at the same time.

Thanks in advance

[Evgene Karachevtsev]

Hello Danny,

Standard Appery.io settings don't allow to do such customization, but you could add any js for any event for your component.

[Danny Sanderson]

Do you have the js for this?

[M&M]

You can trigger a click event on the datepicker button by doing this

$('.datepickeropenbutton').click();

I am not too sure if this is the perfect way but you can use that in the appropriate event - for example tap, or focus (you'll have to experiment with that)

M&M

[Danny Sanderson]

I have 6 Date Pickers on this page all with the datepickeropenbutton class (according to inspect element). Would this not try and click on all of them at the same time?

[Danny Sanderson]

Your above code did work, however it took a long time to load the calendar, about 30 seconds. Then if I click on the input box again it loads another calendar under the previous calendar. I think I'm just going to leave this for now.. xD

Thanks for you help M&M

[M&M]

yup, that'd work for just one datepicker control on the page. I didn't really read higher up the post. I can see you have multiple datepickers. All you have to do is add this prefix

code
$('.Screen1_mobiledatepicker_5 .datePickerControls .datepickeropenbutton').trigger('click');
/code

OR

code
// The name of my page is "Screen1"
// And the name of my datepicker is "mobiledatepicker_5"
$('.Screen1_mobiledatepicker_5 .datePickerControls .datepickeropenbutton').click();
/code

So now you can see how that name was derived. Alternatively you can just look that up in the console.

I used that in my datepicker "Tap" event.

[M&M]

yup, that'd work for just one datepicker control on the page. I didn't really read higher up the post. I can see you have multiple datepickers. All you have to do is add this prefix

code
$('.Screen1_mobiledatepicker_5 .datePickerControls .datepickeropenbutton').trigger('click');
/code

OR

code
// The name of my page is "Screen1"
// And the name of my datepicker is "mobiledatepicker_5"
$('.Screen1_mobiledatepicker_5 .datePickerControls .datepickeropenbutton').click();
/code

So now you can see how that name was derived. Alternatively you can just look that up in the console.

I used that in my datepicker "Tap" event.

[M&M]

And I just noted one thing - when you invoke the datepicker this way and make a date selection from the calendar, the date input field does not show the value you selected! But it works perfectly fine in the browser though!!! That's kinda interesting

I am sure we can figure something out

Cheers
M&M

[M&M]

hi Danny,

The below will work perfectly fine

code
var btnShowCal = $('#Screen1_mobiledatepicker_5').find('.datepickeropenbutton');
btnShowCal[0].click();
/code

Just note that the component name is page name _underscore_component name

In my case the screen name is Screen1 and component name is mobiledatepicker_5

You can use this individually for each of your datepicker components. It works fine in the Click event of the datepicker. You can experiment with the tap event as well, if you wish to