选择时不添加datepicker类

Question

I have been trying to add a class for selectable dates. And following is done to add a class

$('a.ui-state-default').addClass('myClass');
$('a.ui-state-highlight').removeClass('myClass');

$(".myClass").attr("style", "background:"+background_button+" !important; color:"+text_button+" !important;");

This is working fine.

But when I select a date in datepicker, it's again reverting back to normal style and the added class to ui-state-default is not coming.

Answer 1

The problem is because the dom for the datepicker is redrawn many times, as you are applying the style only once after the redraw is will be lost.

The solution is to use css classes and beforeShowDay callback to style the dates

jQuery(function($) {
  var array = [];
  $('#dp').datepicker({
    dateFormat: 'dd M yy',
    beforeShowDay: function(dt) {
      return [1, 'my-style-class']
    }
  })
});

.my-style-class a.ui-state-default:not(.ui-state-highlight) {
  color: green;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<div id="dp"></div>

</div>