UI Datepicker buttons are not working

Question

The "today" button in my installation of Jquery UI Datepicker works after two clicks, it should work from the first click and both buttons does not work at all when using them on a mobile device such as iPhone.

I have put together a live test here: http://loai.directory/test

What am I missing? I tried to install and set-up the UI library again but to no avail.

Answer 1

After more digging, I have found that the button was "not working" because it wasn't doing what "I thought" it should do!

Their code is not really broken. It just doesn't do what most people would expect it to do. Which is to enter today's date into the input box. What it does do, is highlight for the user to see today's date on the calendar. If they were off in another month or another year, the calendar pops back to today's view without deselecting the date the user already selected.

Quoted from the first answer here: Today button in jQuery Datepicker doesn't work

So, the approach to this problem was not finding what was wrong, but how to tweak its settings. Below is a snippet that did the job for me :) - not sure if it is the best approach though - so any thoughts on this will be great :)

$.datepicker._gotoToday = function (id) { $(id).datepicker('setDate', new Date()).datepicker('hide').blur(); };

Answer 2

When I go to your test site, the first thing I notice is that on the first click, the date field is populated properly, but the calendar widget isn't. Then on the second click, the calendar widget gets updated (but this may be just because it's detected the date field's new value).

I'd look at the listener that's being triggered when Select Today is clicked. Try adding a command to that listener that refreshes the calendar display; see in particular the #refresh method in the Jquery UI Datepicker API.

EDIT (more guidance):

OK so first you'll need a listener that detects when a user clicks on the Today button. When I go to your test page (in Chrome), right-click on the widget's Select Today button and click "Inspect Element", it shows me the raw HTML for that element. I see that the button has the datepicker-current class, which looks pretty unique, so I'll set up a listener for that class.

$('.datepicker-current').click(function(){
  // we'll do the refresh command inside here
});

Then we need to figure out how to tell the widget to refresh itself. Jquery UI widgets have decent documentation, and they explain the "refresh" function here with a brief example. Following that example, the refresh command will look something like this:

$('.datepicker-current').click(function(){
  $( (something) ).datepicker("refresh");
});

We call that .datepicker command on the text field element, so we need to figure out a way to select that element. In your case, it looks like the text fields each have a hasDatepicker class on them, so I'll just select all of those and call refresh on all the widgets (whether they're currently visible or not):

$('.datepicker-current').click(function(){
  $( '.hasDatepicker' ).datepicker("refresh");
});

You can copy & paste these 3 lines straight into your Chrome console to add the Jquery listener to the live page, then try it out yourself. But something like the above should accomplish what you're talking about.

You probably could have done with just that last snippet, but I wanted to show you my whole thought process just to make the point that Jquery isn't magic, you just have to be ready to think through the HTML elements and try things step-by-step in the Chrome console.