jQuery ui - datepicker prevent refresh onSelect

Question

I\'m using jQuery ui Datepicker to display a yearly inline calendar full of \"special dates\" (with colors).

Answer 1

I was having a similar problem. I was adding custom buttons to the bottom of the datepicker (using $(id).append), but when I would select a date the datepicker would refresh and destroy them.

This is the date selection function for the datepicker in the jquery-ui library:

_selectDate: function(id, dateStr) {
  ...
    if (onSelect)
        onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);
  ...
    if (inst.inline)
        this._updateDatepicker(inst);
  ...
},

As you can see, the function first calls the onSelect event, and then calls _updateDatepicker (which is what redraws the form) if inst.inline is true.

This is my workaround to prevent the form from refreshing while maintaining the selection functionality:

$("#cal_id").datepicker({
  onSelect: function(date, inst){

    //This is the important line.
    //Setting this to false prevents the redraw.
    inst.inline = false;

    //The remainder of the function simply preserves the 
    //highlighting functionality without completely redrawing.

    //This removes any existing selection styling.
    $(".ui-datepicker-calendar .ui-datepicker-current-day").removeClass("ui-datepicker-current-day").children().removeClass("ui-state-active");

    //This finds the selected link and styles it accordingly.
    //You can probably change the selectors, depending on your layout.
    $(".ui-datepicker-calendar TBODY A").each(function(){
      if ($(this).text() == inst.selectedDay) {
        $(this).addClass("ui-state-active");
        $(this).parent().addClass("ui-datepicker-current-day");
      }
    });
  }
});

Answer 2

setting inst.inline to false inside the onselect won't work. instead try something like

onSelect: function() {
    $(this).data('datepicker').inline = true;                               
},
onClose: function() {
    $(this).data('datepicker').inline = false;
}

Answer 3

I have almost the same problem, like some other people, I have some kind of a solution.... but it's not fair:

$('#calendar').datepicker({
...,
onSelect: function (selectedDate, inst) 
{
  myFunction(selectedDate, inst);
}
});
function myFunction(selectedDate, inst)
{

  $('.date_pick').toggleClass('focused');
  if ($('.date_pick.end').hasClass('focused')) {
    $('.date_pick.end').val('');
  }
  inst.preventDefault(); # aa; works too, but writing aa; is going too far xD
}

It is not perfect, but works... I'll try to make it works just fine, till then...

EDIT: Solved adding:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

Answer 4

In the case of having some datepickers on the page Yozomiri example will fail. You should do:

        onSelect: function(date, inst){
            //This is the important line.
            //Setting this to false prevents the redraw.
            inst.inline = false;

            //The remainder of the function simply preserves the 
            //highlighting functionality without completely redrawing.

            //This removes any existing selection styling.
            $(this).find(".ui-datepicker-calendar .ui-datepicker-current-day").removeClass("ui-datepicker-current-day").children().removeClass("ui-state-active");

            //This finds the selected link and styles it accordingly.
            //You can probably change the selectors, depending on your layout.
            $(this).find(".ui-datepicker-calendar TBODY td").each(function(){
              if ( $(this).find('a').text() == inst.selectedDay && $(this).data('month') == inst.selectedMonth ) {
                $(this).find('a').addClass("ui-state-active");
                $(this).addClass("ui-datepicker-current-day");
              }
            });
        }

https://jsfiddle.net/g2bgbdne/3/

Answer 5

If you just want to select a single day then you have to specify the Month and the Year in JQuery:

$(".ui-datepicker-calendar TBODY [data-month='"+inst.selectedMonth+"'][data-year='"+inst.selectedYear+"'] A").each(function(){