Quantum
Quest

Mastering Bootstrap datepicker customization

In this post, I explore the process of customizing the Bootstrap Datepicker to suit specific needs that go beyond the default settings provided by my custom theme based on Now-UI. While my fork for Now-UI Kit (available here) includes default datepicker settings in the now-ui-kit-plugins file, I found myself needing additional functionality for a project.

The challenge

The default datepicker offered a good starting point, but I needed to implement custom features such as disabling specific dates, setting a dynamic date range, and visually distinguishing unavailable dates within the calendar. Achieving this level of customization required the analysis of the datepicker’s options and event handlers.

Custom date ranges

To control the selectable date range, I utilized the startDate and endDate options. This allowed me to limit user selections to a specific period, enhancing the form’s usability in scenarios like booking systems or event scheduling:

$('#date-picker-post').datepicker({
  startDate: new Date(new Date().setDate(new Date().getDate() - 90)), // 90 days in the past
  endDate: new Date(new Date().setDate(new Date().getDate() + 10)), // 10 days in the future
  // Additional options...
});

Disabling specific dates

The beforeShowDay function was crucial for disabling individual dates. By returning a custom class for dates not allowed, I could visually mark them as unavailable. This feature proved invaluable for indicating blackout dates or past dates that shouldn’t be selectable:

beforeShowDay: function(date) {
  var formattedDate = formatDate(date);
  if (allowedDates.includes(formattedDate)) {
    return {enabled: true};
  } else {
    return {enabled: false, classes: 'disabled-date'};
  }
}

Visual Indicators for unavailable dates

To further enhance the user experience, I added visual cues for the disabled dates. Using CSS, I introduced a style that would display a cross (‘X’) on dates marked as unavailable, making it immediately clear which dates were not selectable:

.disabled-date::after {
  content: '\2716'; /* Unicode for 'Heavy Multiplication X' */
  color: red; /* Highlight unavailable dates in red */
  position: absolute;
  // Additional styling...
}

Conclusion

Through these customizations, I was able to tailor the Bootstrap Datepicker to meet the specific requirements of my project, providing a more intuitive and user-friendly interface for date selection. This journey into the depths of datepicker customization not only solved my immediate needs but also expanded my toolkit for future projects.

For more details on implementing these customizations and to explore the full capabilities of the Bootstrap Datepicker, stay tuned to my blog.

Real Example

To give you a clearer picture, here’s a snippet from the actual implementation in my project. This HTML structure lays the foundation for the datepicker input field, seamlessly integrating with the Now-UI theme and the customizations described above:

This setup ensures that the datepicker not only functions as intended but also aligns perfectly with the aesthetic of the Now-UI theme.