Jump to content

JQuery UI Datepicker Not Working

Recommended Posts

We're attempting to use the JQuery Datepicker widget (link) in our website. However, it doesn't work on Squarespace.

It does work in Chrome. It just doesn't work in Squarespace, and I'm hoping someone will be able to help me out with why.

Prior googling for solutions leads me to point out that in our code below, JQuery is imported before the datepicker function is called. The datepicker function is nested within a document.ready() section (two, actually), so it's not a pageload problem. It does, as mentioned, work in regular browsers, but it doesn't when it's passed through Squarespace - does anyone know why?

Some additional information:

The flow of information runs: available dates pulled in from external site via HTTP REST > dates extracted into an array > dates passed to JQuery widget > conditional highlighting applied to matching dates > users can parse through widget. 

I've looked into the built-in Squarespace datepicker/calendar widgets, and would be open to using those if and only if an array of dates can be passed into those widgets. Being able to highlight the dates the users can select is a spec for this code, and this array can only be extracted using code injection, so we need to use the code block either way. I can't find any APIs that mention being able to accept dates - if there is somewhere else I can look, I would be open to the idea.

Here's the code we're using so far: 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />

		<style>
			.highlight {
				background-color: blue;
				color: red;
			}
		</style>
	</head>

	<body>
		<div class="content-body"></div>
		<div>
			<p>Date:</p>
			<input type="text" id="datepicker" width="276" value="Please pick a date: " />
		</div>
		<script src="jquery-3.6.0.js"></script>
		<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
		<script>
			console.clear();
			$(document).ready(function () {
				// Variable Declaration.............................................. VARIABLE DECLARATION #region [rgba(26, 188, 156, 0.2)]

				var authUser = "REDACTED"; 
				var authPass = "REDACTED"; 

				var getURL = "REDACTED";
				bodydom = $(".content-body")[0];

				var eventResponse = [];
				var clinicDates = [];

				// FOR CLINIC ID INFORMATION
				const clinicSettings = {
					async: true,
					crossDomain: true,
					url: getURL,
					method: "GET",
					headers: {
						"Content-Type": "application/json",
						Authorization: "Basic " + btoa(authUser + ":" + authPass), // btoa() takes the binary string and converts to ASCII string; authUser and authPass were both set in global variables section
					},
				};
             
				$.ajax(clinicSettings).done(function (clinicResponse) {
					// Gets list of clinics and basic clinic information
					for (let i = 0; i < clinicResponse.data.length; i++) {
						eventResponse = clinicResponse.data[i].events;
						for (let j = 0; j < eventResponse.length; j++) {
							clinicDates.push(eventResponse[j].date);
						}
					}

					$(document).ready(function () {
						$("#datepicker").datepicker({
							dateFormat: "mm/dd/yy",
							// Function requires a returned array for each date
							beforeShowDay: function (date) {
								var arr;
								// Converts date to format, using slice to take final two characters, prepending 0 exclusively to single digits
								var search = date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2);
								// Iterates through the array of dates that have clinics and, if they match the date in the widget, highlights them as available
								for (let i = 0; i < clinicDates.length; i++) {
									console.log(clinicDates[i]);
									if (clinicDates[i] == search) {
										// If the converted date matches with an entry on the array, makes selectable and adds "highlight" CSS class
										return [true, "highlight"];
									}
								}
								// If it isn't, adds no class and makes unselectable
								return [false, ""];
							},
						});
					});
                });
		</script>
	</body>
</html>

 

Link to comment
  • Replies 0
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.