javascript - Display specific dates in bootstrap datepicker

Question

I'm using bootstrap date picker in my project. It's a session booking project. From the admin panel, I add the sessions for specific dates and I want the user's of my website to be able to see the dates for which I have added a session. My frontend receives the data from database. The data contains all the dates for which I have added a session. I want my datepicker to display only these dates from the data and disable the other dates. Currently I have temporarily used a select box to solve this issue. But a datepicker would be better as it looks good is easy to navigate.

See the picture below. This is how I have used a select box to temporarily solve the problem

Here is the desired output that I want

It should be a datepicker with only those dates enabled which I receive from the database. The other dates should be disabled I tried searching it on google but I'm not able to find the solution. Is this possible using bootstrap date picker? If yes, please suggest a workaround.

标签： javascriptdatepickerbootstrap-datepicker

Answer 1

You can use beforeShowDay function to enable only the dates returned from your back end system.

Documentation here

This function is executed for every date, it checks if it is present in the list of applicable dates, returns true if present and enables it, else returns false and disables it.

$(function () {
  let enabledDates = ['2018-10-03', '2018-10-04', '2018-10-05', '2018-10-06', '2018-10-07', '2018-10-08'];
  $('#datepicker').datepicker({
    format: 'yyyy-mm-dd',
    beforeShowDay: function (date) {
      let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      return enabledDates.indexOf(fullDate) != -1
    }
  });
});

beforeShowDay function also allows you to return classes for custom styling

beforeShowDay: function (date) {
  let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
  if (enabledDates.indexOf(fullDate) != -1) {
    return {
      classes: 'enabled',
      tooltip: 'You can select this date'
    };
  } else
    return false
}


.enabled {
  background: #DCDCDC;
}