predate select

read only with one date

by Plippie Plop

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/litepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.6/purify.min.js"></script>
<form id="stepper" name="form">
<select id="seltest" name="select-test">
<option value="">Select new date</option>
<option value='["10-02-2021"]'>Date one</option>
<option value='["20-02-2021"]'>Date two</option>
</select>
<div class="groep">
  <input type="text" class="fieldbuddy-range-selection" id="fieldbuddy-range-01" name="fb-date-range" placeholder="dd-mm-yyyy" value="12-03-2021" readonly>   
</div>
<button type="submit" name="submit-button">Do It Now!</button>

<pre class="code"></pre>
</form>

CSS

.groep {
  padding: 1rem;
  margin-bottom: 1rem;
}

.fieldbuddy-range-selection.hidden {
  visibility: hidden;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.litepicker .container__months .month-item-weekdays-row>div:first-of-type,
.litepicker .container__days .week-number {
  font-weight: 700;
  background-color: rgba(0, 0, 0, .02);
}

.litepicker .container__days .day-item {
  cursor: pointer;
  font-weight: 600;
}

.litepicker .container__days .day-item.is-selectable {
  color: red;

}

.container__days .day-item.is-locked,
.container__days .day-item.is-past-day {
  color: #bbb !important;
  background-color: rgba(255, 255, 255);
  font-weight: 300;
  outline: 0;
}

.container__days .day-item.is-today {
  font-weight: 800;
  background-color: rgb(200, 200, 200);

}

JavaScript

var $form = document.getElementById('stepper');
var $pre = document.querySelector('pre');
var datePickers = [];
var availableDays = ["22-02-2021", "23-02-2021", "24-02-2021", "25-02-2021", "26-02-2021"];

// initialized dps:
initDateSelector($form);

//on submit:
$form.addEventListener("submit", processForm);

function initDateSelector(form) {

  if (typeof form !== "undefined") {
    element = form.querySelectorAll('.fieldbuddy-range-selection');

    for (i = 0; i < element.length; ++i) {
      doLightPicker(element[i], availableDays, true);
      // doLightPicker(element[i], [], true); 
    }
  }

}

function doLightPicker(element, pushDates, isFirstTimeInit) {

  // date settings:
  var today = new Date(); //today also start date:
  var nextyear = new Date();
  var endDate = new Date(nextyear.setFullYear(nextyear.getFullYear() + 1)); // calender end date
  var availableDays = [];
  var dayPicker;

  if (pushDates) {
    availableDays = pushDates;
  }
  var foundIndex = -1;
  //destroy previous:
  if (Array.isArray(datePickers)) {
    for (var i = 0; i < datePickers.length; i++) {

      if (element.getAttribute('id') === datePickers[i].options.element.getAttribute('id')) {
        feModeOne = datePickers[i];
        foundIndex = i;
      }
    }
  }
  if (foundIndex > -1 && isFirstTimeInit)
    return;

  if (dayPicker) {
    dayPicker.destroy();
  }

  // datepicker:
  var dayPicker = new Litepicker({
    singleMode: true,
    element: element,
    minDate: today,
    maxDate: endDate,
    numberOfMonths: 1,
    format: 'DD-MM-YYYY',
    inlineMode: true,
    showWeekNumbers: false,
    lockDaysFilter: function(d1, d2, pickedDates) {
      return !availableDays.includes(d1.format('DD-MM-YYYY'));
    },
    setup: function(picker) {
      picker.on('selected', function(d1, d2) {
        $($(this)[0].options.element).trigger('change');
      })
    }
  });

  if (foundIndex > -1) {
    datePickers.splice(foundIndex, 1);
  }

 ...