CODEWITHSUNDEEP
jquery
jim
jim

Reputation: 73

How to start jquery datepicker with focus

I'm new to jquery and would like to start datepicker with focus.

My first textbox is a date field and I have tried to give the box focus with javascript but datepicker won't come up unless I click somewhere else on the page and then give it focus by clicking inside the box.

Is there a way to start datepicker with focus and maybe have the widget start immediately when the page loads then drop focus when the user leaves the box?

  $( "#date" ).datepicker({
    dateFormat: "mm-dd-yy"
  });

Upvotes: 7

Views: 38683

Answers (1)

Hari Pachuveetil
Hari Pachuveetil

Reputation: 10374

Try this - http://www.jsfiddle.net/wnUWQ/embedded/result

$(document).ready(function() {
    $("#datepick").datepicker({
        dateFormat: "mm-dd-yy"
    });
    $("#datepick").focus(function() {
        $("#datepick").datepicker("show");
    });
    $("#datepick").focus();
});

EDIT: The .ready() function of $(document) object is fired when the DOM is completely loaded in the browser. First we attach the datepicker to the input, and then we attach a focus eventhandler that shows the datepicker and last we set the focus on to the input.

This could all be chained into one line as in:

$(document).ready(function() {
    $("#datepick").datepicker({
        dateFormat: "mm-dd-yy"
    }).focus(function() {
        $("#datepick").datepicker("show");
    }).focus();
});

Upvotes: 14

Related Questions