title: Jquery UI Datepicker: Highlight first
body: <p>I want to add a class to the first 3 selectable days if var express is true.</p>
  
  <p>the following code works but if i select a date the classes being removed</p>
  
  <pre><code>$datepicker.datepicker({
          dayNamesMin: ["S", "M", "D", "M", "D", "F", "S"],
          beforeShowDay:$.datepicker.noWeekends,
          firstDay: 1,
          minDate: d,
          dateFormat: "dd.mm.yy",
          onSelect: function (dateText, inst) {
  
              $('.delivery-date').text(dateText);
  
              var printReleaseDateParts =dateText.split('.');
              var printReleaseDate = new Date(printReleaseDateParts[2],printReleaseDateParts[1]-1,printReleaseDateParts[0]);
              printReleaseDate.setDate(printReleaseDate.getDate() - printRelease);
              $('.print-release-date').text($.datepicker.formatDate('dd.mm.yy', printReleaseDate));
              $datepicker.removeClass('express');
              if (express) {
                  $datepicker.addClass('express');
                  $('*[data-handler="selectDay"]:lt(3)').addClass('express');
              } else {
                  $datepicker.removeClass('express');
                  $('*[data-handler="selectDay"]:lt(3)').removeClass('express');
  
              }
  
          },
          onChangeMonthYear: function(){
              console.log('onChangeMonthYear');
  
          }
      });
  </code></pre>
  
  <p>the var express is set by checkbox. In the end, the User should be able to select a highlighted express-delivery-date if the checkbox is checked. the express-delivery-date is 3 days before the regular initiated first selectable day. The first selectable day is changed by the checkbox on change</p>
  
  <pre><code>$('input:checkbox[name=option-express]').change(function () {
              if ($(this).prop("checked") == true) {
                  $datepicker.addClass('express');
                  var d = calculateMinDate(deliveryExpress);
                  $datepicker.datepicker("option", "minDate", d);
                  $('*[data-handler="selectDay"]:lt(3)').addClass('express');
  
                  express = true;
  
  
              } else {
                  $datepicker.removeClass('express');
                  var d = calculateMinDate(deliveryRegular);
                  $datepicker.datepicker("option", "minDate", d);
                  $('*[data-andler="selectDay"]:lt(3)').removeClass('express');
  
                  express = false;
              }
          });
  </code></pre>
  
  <p>only business days should be highlighted.</p>
  
  <p>so what's the best practice to highlight the first days? </p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>now i implemented a custom function for beforeShowDay but no luck. the console.log is fired four times but the class isn't added.</p>
  
  <pre><code>var expressDates = ["08/29/2016", "08/30/2016", "08/31/2016", "09/01/2016"];
  function expressDays(date) {
              var noWeekend = $.datepicker.noWeekends(date);
              if (noWeekend[0] &amp;&amp; express) {
                  for (var i = 0; i &lt; expressDates.length; i++) {
                      if (new Date(expressDates[i]).toString() == date.toString()) {
                          console.log('express day!')
                          return [true, 'express', 'Express'];
                      }
                  }
                  return [true, ''];
              } else {
                  return noWeekend;
              }
          }
  </code></pre>