We help IT Professionals succeed at work.

Setting the focus with jQuery UI Date Picker

curiouswebster
on
Medium Priority
331 Views
Last Modified: 2012-05-12
I have the validation almost working and need to return the focus to the date control, after the user clicks OK on the error messagebox.. When the user types an invalid date into the text field I display an error message saying "You have entered an invalid date". This works okay. But after clicking the OK button, I'd like to put focus back onto that control with the faulty date.

How can I do this?

Thanks!
Comment
Watch Question

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
           onClose: function (dateText, inst) {
                debugger;
              if (dateText != $.datepicker.formatDate($.datepicker.regional[''].dateFormat, new Date(dateText)))
              {
                  alert("The date you specified is not a valid date.");
                  this.value = '';
                  $(this).focus();
              }
curiouswebsterSoftware Engineer

Author

Commented:
The focus does not return but I do see FireBug open up on the call to debugger. Cool.

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
remove << debugger; >>, line two, it should work
curiouswebsterSoftware Engineer

Author

Commented:
I took that out but it stilll does not work. We have some third party library (I think) that turns the currently selected field yellow. I think that's getting the focus and not giving it to the field properly.
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
try : setTimeout(function() { $("#datepicker").focus(); }, 250);
instead : $(this).focus();
curiouswebsterSoftware Engineer

Author

Commented:
Where do I locate that function?
curiouswebsterSoftware Engineer

Author

Commented:
It does not work.

I located it here:

    $(function () {
        $("#datepicker").datepicker({
                 // code removed for brevity
        });
        setTimeout(function () {
             $("#datepicker").focus();
        }, 250);

    });
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
>Where do I locate that function?

inside onClose, check my first post
Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
onClose: function (dateText, inst) {
              if (dateText != $.datepicker.formatDate($.datepicker.regional[''].dateFormat, new Date(dateText)))
              {
                  alert("The date you specified is not a valid date.");
                  this.value = '';
                  setTimeout(function() { $("#datepicker").focus(); }, 250);
              }
curiouswebsterSoftware Engineer

Author

Commented:
Yes, that worked!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.