title: How to add a class to selected date in jquery datepicker
body: <p>I am using jQuery date picker plugin for date ranges. I have 2 date fields from and to fields. I want to add a class to the selected from date field so that when I switch to 'To' field I can see the from date selected and styled differently using that new class added.</p>
  
  <p>I've got this working if the from and to dates are selected for different months. But if both dates are in same month then there is no class and I can't find a way for it.</p>
  
  <p>For different months there is a class ui-datepicker-days-cell-over which I've used. But in case of same month there is no class.</p>
  
  <p>I've also tried OnSelect and beforeShowDay function but to no help.I am using jQuery picker with Drupal.</p>
  
  <p>Here is the screenshot for different months and same month:</p>
  
  <p><img src="https://i.stack.imgur.com/EHN8t.png" alt="Image for different months"></p>
  
  <p><img src="https://i.stack.imgur.com/fGgmx.png" alt="Image for same month"></p>
  
  <p><a href="http://jsfiddle.net/0n3o38nd/" rel="nofollow noreferrer">The snippet for what I have tried</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    var day = new Date().getDate();
      $( "#from" ).datepicker({
        changeMonth: true,
        numberOfMonths: 2,
         onSelect: function(selectedDate, el) {
      // custom callback logic here
      console.log(el);
                   
     },
        beforeShowDay: function(date) {   
        console.log(date.getDate); 
         if (date.getDate() == day) {
                  return [true, "selected", ""]; // Here you set your css class
              } else {
                  return [true, ""]
              }     
          // set all the dates to have reserved class for now 
          
       },
       
        onClose: function( selectedDate ) {
          $( "#to" ).datepicker( "option", "minDate", selectedDate );
        }
      });
      $( "#to" ).datepicker({
        defaultDate: "+1d",
        changeMonth: true,
        numberOfMonths: 2,
        onClose: function( selectedDate ) {
          $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
      });
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ui-datepicker-current-day  { color:white;background:red;)
      .ui-datepicker-days-cell-over{background-color: #e0001b!important;color:#fff;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
  
    
    &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
    &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
    &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
  &lt;label for="from"&gt;From&lt;/label&gt;
  &lt;input type="text" id="from" name="from"&gt;
  &lt;label for="to"&gt;to&lt;/label&gt;
  &lt;input type="text" id="to" name="to"&gt;</code></pre>
  </div>
  </div>
  </p>