Show JQuery UI datepicker on input field click?

jquery jquery-ui focus datepicker jquery-ui-datepicker

58,539

Solution 1

Try this

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#date1').datepicker();

$('#date1').focus(function(){
    $('#date1').datepicker('show');
});

$('#date1').click(function(){
    $('#date1').datepicker('show');
});
//$('#ui-datepicker-div').show();
$('#date1').datepicker('show');
});
</script>
</head>
<body>
<input type="text" name="date1" id='date1'>
</body>
</html>

Solution 2

This prob wont answer your question, but could be a work around, if your issue of not having the date picker button, is related to having the date picker button... if that makes any sense?

I had an issue where i didn't want to have the button because of users tabbing through my form/page, and I didn't want the button to have focus. (Weird UI experience)

If that's your case as well... you can always just remove its focus by doing the following.. (It'll also indirectly solve the problem you're having now.)

$('#field').datepicker({
      showOn: 'button',
      buttonImage: "/image_path/image.png",
 }).next('img.ui-datepicker-trigger').attr('tabIndex', "-1");

Solution 3

I had a similar scenario: First field on the page an it should loads closed, without the button, and be opened only on user click. But it was in a closed 'searchbar' component, so changing the default behavior wasn't an option. Here's my workaround:

$(document).ready(function () {
        //getting the controls on the form context
        var calendarios = $('.calendarBox', "#frmOccurrencesHistory");
        //set an invalid option - avoid open on focus and show the buttons
        calendarios.datepicker("option", "showOn", "click");
        //handle click button
        calendarios.each(function () {
            $(this).click(function () {
                $(this).datepicker('show');
            });
        });
    });

Not pretty, not perfect, there´s a flash of the calendar when pages load, but that's how far I've come

58,539

Author by

alexg

Working on dashed-slug.net, a subscription-based WordPress plugin house that offers novel cryptocurrency plugins for WordPress. Click here to visit my github repos

Updated on July 11, 2022

Comments

alexg almost 2 years

OK maybe this is a trivial issue but I'm very interested to see if anyone has any ideas on this:

I am using JQuery UI. I have an <input id="#myfield" type="text"> field and I call $('#myfield').datepicker(). The datepicker shows whenever the field gets focus. But the field is the first one in my form and is already in focus when it loads, so clicking on the field doesn't show it. Also, if I close the datepicker with the Esc key, then I can't open it again by clicking on the field, for the same reason: it's already in focus.

I am aware that I could set the parameter .datepicker({showOn: 'button'}) but I don't want the button. Is there any way to have the datepicker appear when the field gets focus OR is clicked when already in focus? I already tried $('#myfield').click( function () { $(this).focus() } ) and it makes the datepicker open correctly when I click the input field, but then when I select a date it doesn't appear in the field.