nmilc Posted October 16, 2023 Posted October 16, 2023 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>
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment