Announcing the launch of new sub-community for Campaign Web UI to cater specifically to the needs of Campaign Web UI users!
SOLVED
How to disabled time slots based selected date using javascript in web application
Hi,
I'm facing an issue where I cannot disable a time slot if it has already been selected. For instance, if someone has chosen 9 AM on January 12th, that particular time slot should be disabled for others on that specific day or an alert message should be displayed when attempting to select an already chosen date and time.
Added HTML, CSS, and jQuery code in a page activity.
Thanks,
Topics
Topics help categorize Community content and increase your ability to discover relevant content.
1 Accepted Solution
Correct answer by
Hello @Dhanam1
You will have to pull this data and populate it in the confirmedBookings array.
In my previous reply, I added a sample code for 25th Jan and 10AM.
var confirmedBookings=[{
date:"01/25/2024",
time:"10:00 AM"
}];
Populate this array with the date and timings from the schema to make it work.
Hello @Dhanam1
Which date picker library are you using for this? That date picker library will have some samples of how you can achieve that.
Hello @Dhanam1
So you will have to store the already selected times somewhere in AC. If someone is trying to book, then look at the stored variable value and remove the times from the array.
I have made some changes to your code:
confirmed booking is the array confirmedBookings should be populated with the existing bookings:
<form autocomplete="off">
<div id="container">
<div id="calendar"><label for="datepicker"></label>
<div id="datepicker"></div>
</div>
<div id="timeSelection">
<h3>Available Times</h3>
<div id="timesList"></div>
<p id="selectedDateTime">Selected Date and Time: <span id="displayDateTime"></span></p>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(function () {
var selectedDateTime = null;
var disabledDates = ["2024-01-01", "2024-01-26"]; // Add government holidays in yyyy-mm-dd format
function highlightDays(date) {
var today = new Date();
var twoMonthsLater = new Date();
twoMonthsLater.setMonth(today.getMonth() + 2);
var day = date.getDay();
var dateFormat = $.datepicker.formatDate('yy-mm-dd', date);
if (date < today || date > twoMonthsLater || day === 0 || disabledDates.includes(dateFormat)) {
return [false, 'ui-holiday-disabled', 'Holiday'];
}
return [true, ''];
}
var confirmedBookings=[{
date:"01/25/2024",
time:"10:00 AM"
}];
$("#datepicker").datepicker({
minDate: 0,
beforeShowDay: highlightDays,
onSelect: function (dateText, inst) {
var availableTimes = getAvailableTimes(dateText);
var timesList = $("#timesList");
timesList.empty();
$.each(availableTimes, function (index, time) {
timesList.append("<div class='timeSlot'>" + time + "</div>");
});
$("#timeSelection").show();
},
// Rest of your existing datepicker code
onChangeMonthYear: function (year, month, inst) {
var today = new Date();
var twoMonthsLater = new Date(today.getFullYear(), today.getMonth() + 2, 1); // Get date after 2 months
// Hide months beyond 2 months from the current date
if (new Date(year, month - 1) > twoMonthsLater) {
$(this).datepicker('setDate', twoMonthsLater); // Set date to 2 months later if selected month is beyond 2 months
}
}
});
// Function to handle time selection
$(document).on("click", ".timeSlot", function () {
$(".timeSlot").removeClass("selected");
$(this).addClass("selected");
var selectedDate = new Date($("#datepicker").datepicker("getDate"));
var formattedDate = selectedDate.toString().split(' ').slice(0, 4).join(' ');
var selectedTime = $(this).text();
selectedDateTime = formattedDate + " " + selectedTime;
$("#displayDateTime").text(selectedDateTime);
console.log("before push"+formattedDate);
confirmedBookings.push({date:selectedDate.getMonth()+1+"/"+selectedDate.getDate()+"/"+selectedDate.getFullYear(),time:selectedTime});
/*document.controller.setValue('/ctx/carServiceAppointment/@serviceDate', formattedDate);
document.controller.setValue('/ctx/carServiceAppointment/@serviceTime', selectedTime);
*/
console.log("Dhanam", typeof (selectedDateTime));
console.log("formattedDate", formattedDate);
console.log("selecteTime", selectedTime);
console.log(confirmedBookings);
});
function getAvailableTimes(date) {
// check if this time is already booked
var times = ["09:00 AM", "10:00 AM", "11:00 AM", "02:00 PM", "03:00 PM"];
// find if a booking exists for this date
let obj = confirmedBookings.find(o => o.date == date);
//remove the time from the times array
const index = times.indexOf(obj.time);
if (index > -1) {
times.splice(index, 1);
}
return times;
}
});
// ]]></script>
</body>
Thank you for your comment, @Manoj_Kumar_ . However, I need to remove/disable the time slot for a specific date, not for all dates.
If someone selects the same day and time slot on Wed Jan 24 2024 09:00AM, it should be disabled/removed for that specific day.
Correct answer by
Hello @Dhanam1
You will have to pull this data and populate it in the confirmedBookings array.
In my previous reply, I added a sample code for 25th Jan and 10AM.
var confirmedBookings=[{
date:"01/25/2024",
time:"10:00 AM"
}];
Populate this array with the date and timings from the schema to make it work.
