Creating a Dynamic Date and Time Picker with Bootstrap 4 and jQuery DateTimePicker

In this tutorial, we'll walk through the process of creating a dynamic date and time picker using Bootstrap 4 and the jQuery DateTimePicker plugin. This picker will not only allow users to select dates and times but will also dynamically adjust the available times based on whether it's a weekday or a weekend. By the end of this tutorial, you'll have a powerful booking tool that you can integrate into your web applications.

Here is what we will be building

Table of Contents:

1. Setting Up the Environment
2. Designing the User Interface
3. Customizing Styles
4. Implementing Dynamic Time Selection

1. Setting Up the Environment:

To get started, you'll need to have Bootstrap 4 and the jQuery DateTimePicker plugin integrated into your project. You can include the necessary CSS and JavaScript files via CDN or by downloading them and linking locally.

2. Designing the User Interface:

we'll design the user interface for the date and time picker. We'll use Bootstrap's classes to create a simple and responsive layout that incorporates the picker input field and a trigger button.

<div class="container mt-3">

  <div class="input-group">
    <input type="text" id="datetimepicker_unixtime" class="form-control" placeholder="Select Date" aria-label="Username" aria-describedby="basic-addon1">
    <a href="#/" class="input-group-text text-decoration-none btn-primary" id="CalendarBtn"><svg xmlns="http://www.w3.org/2000/svg" class="calendarIcon" viewBox="0 0 20 20" fill="#ffffff">
        <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
      </svg></a>
  </div>

</div>

3. Customizing Styles:

The jQuery DateTimePicker comes with default styles, but you might want to customize them to match your application's design. In this part, we'll go over the process of overwriting plugin styles to create a visually appealing and consistent user interface.

.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
  color: #fff !important;
  background: #049087 !important;
  box-shadow: none !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker
  .xdsoft_timepicker
  .xdsoft_time_box
  > div
  > div.xdsoft_current {
  background: #0060a9;
  box-shadow: #0060A90 1px 3px 0 inset;
  color: #fff;
  font-weight: 700;
}
.calendarIcon {
  width: 20px;
  height: 20px;
}

4. Implementing Dynamic Time Selection:

The highlight of this tutorial is the dynamic time selection feature. By utilizing JavaScript, we'll make sure that the available times are different for weekends and weekdays. We'll set up the initial list of times for both scenarios and update them dynamically when the user selects a date. This is perfect for booking appointments or events.

// Get the current date and time
var d = new Date();

// Define available times for weekends and weekdays
var weekendTimes = [
  "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", 
  "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", 
  "17:00", "17:30"
];
var weekdayTimes = [
  "7:00", "7:30", "8:00", "8:30", "9:00", "9:30", 
  "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", 
  "13:00", "13:30", "14:00", "14:30"
];

// Determine which set of times to use based on the current day
var times;
if (d.getDay() == 6 || d.getDay() == 0) { // 0: Sunday, 6: Saturday
  times = weekendTimes;
} else {
  times = weekdayTimes;
}

// Function to dynamically set allowed times based on selected date
var datePickerTime = function (currentDateTime) {
  // 'this' refers to the jQuery DateTimePicker object
  var day = currentDateTime.getDay();

  // Set allowed times based on weekdays or weekends
  if (day === 0 || day === 6) {
    this.setOptions({
      allowTimes: weekendTimes
    });
  } else {
    this.setOptions({
      allowTimes: weekdayTimes
    });
  }
};

// Initialize the DateTimePicker
jQuery("#datetimepicker_unixtime").datetimepicker({
  inline: false,
  minDate: 0,
  onSelectDate: datePickerTime,
  defaultDate: d,
  allowTimes: times,
  formatTime: "h:i a",
  step: 60,
  format: "d/m/y h:i a",
  onGenerate: function (hu) {
    // Disable selection of a specific weekday (Friday)
    jQuery(this)
      .find(".xdsoft_date.xdsoft_day_of_week5")
      .addClass("xdsoft_disabled");
  }
});

// Show the DateTimePicker when the button is clicked
jQuery("#CalendarBtn").click(function () {
  jQuery("#datetimepicker_unixtime").datetimepicker("show"); // Supports hide, show, and destroy commands
});

Congratulations! You've successfully created a dynamic date and time picker using Bootstrap 4 and the jQuery DateTimePicker plugin. This tutorial covered everything from environment setup to building a user-friendly interface and implementing advanced functionality. You now have a versatile tool that can enhance user experiences in your web applications by providing appropriate time options based on weekdays or weekends.