Answered

Datepicker show on input field

(0) Share

Report

Posted on by RK89

Hello

I have a datepicker on an entity form. I would like to show the calendar on click or focus of the input field associated with the datepicker. I need to prevent the manual entry of date into the input field and simply launch the calendar on focus of the input text field that has calendar icon at the end. Is there a way to do this ?

Thank You

Categories:

Customize & extend

I have the same question (0)

All responses (3)

Answers (2)

Sort by

Verified answer

Christian Leverenz 1,214 on at

Like (2)

Report
Copy link

Link copied!

Hi @RK89 ,

its a while ago i did this kind but it should be possible by registering the click and focus event on the inputcontrol and just raise the clickevent "manually" on the control opening the selector (or call the open method for that one). Please take a look at the dom how the elements are adressable.

There is one logical problem on that one: if you disable the input (by the js you provide), it may not be able to receive a focusevent any longer (may be, advanced html people can answer this). So, just tabbing over your form might not raise the focusevenet.

This all requires a little bit javascript. As it is boung to the form, i would recommend to place that js on the form.

Hope it points in the right direction,

Christian

Was this reply helpful? Yes No
Verified answer

Fubar 8,491 Super User 2026 Season 1 on at

Like (3)

Report
Copy link

Link copied!
You may need to more than this with regards to locking down the Input field etc but these are the basic calls you would need for showing etc the datepicker
// disable the date field and picker $("#your_fieldname") // input control .next() // the date picker container .data("DateTimePicker") // the date picker object .disable(); // enable the control after disabling $("#your_fieldname").next().data("DateTimePicker").enable(); // show the date picker (like someone clicked the icon) $("#your_fieldname").next().data("DateTimePicker").show();

Was this reply helpful? Yes No
RK89 18 on at

Like (1)

Report
Copy link

Link copied!

Thanks to both of you. It worked. I used the following script.
$(document).ready(function() {

$("#bill_datepaid_datepicker_description").focus(function() {

$("#bill_datepaid").next().data("DateTimePicker").disable();
$("#bill_datepaid").next().data("DateTimePicker").enable();
$("#bill_datepaid").next().data("DateTimePicker").show();
//$('#bill_datepaid_datepicker_description').attr('readonly', true);
});
});

When I had readonly true it worked only on first time focus on the input field. I was not able to launch the calendar on refocussing the input field again. There was no error in the console. Not sure why. Any thoughts ?

Thanks
R89

Was this reply helpful? Yes No