Level 2

Solved

How to disabled time slots based selected date using javascript in web application

Forum|Forum|2 years ago
January 11, 2024
1 reply
2181 views

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,

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Manoj_Kumar

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.

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.

Manoj_Kumar

Community Advisor

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.

Manoj | https://themartech.pro

D

Dhanam1Author

Level 2

Hi @_manoj_kumar_ ,

Here is the code: Added in page activity ,How can disable the bookedtime slot for that day?

<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>

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, ''];
}

$("#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);

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);
});

function getAvailableTimes(date) {
var times = ["09:00 AM", "10:00 AM", "11:00 AM", "02:00 PM", "03:00 PM"];
return times;
}
});
// ]]></script>
</body>

Manoj_Kumar

Community Advisor

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>

Manoj | https://themartech.pro

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded