Setting a class for a specific date on a jQuery UI calendar using the MultipleDates plugin

I recently encountered an issue with the Multiple Dates picker for jQuery UI date picker. It seems that the developer who created it has not updated it in quite some time, resulting in pre-highlighting dates no longer functioning properly. To address this problem, I've devised a plan to store the dates that need to be highlighted in an array and then utilize jQuery to apply the necessary class to the calendars. However, I've hit a roadblock on how to specifically target the anchors with the following structure:

<td class=" ui-datepicker-week-end  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="10" data-year="2017">
<a class="ui-state-default" href="#">18</a> <!-- needs class: ui-state-active-->
</td>

My question is, how can I single out elements based on their data attributes such as data-month, data-year, and the number within the anchor tag? Any assistance on this matter would be highly appreciated!

javascriptjquerycssjquery-ui

Answer №1

Activate the function using the beforeShowDay event.

LATEST: (source within)

Answer №2

To extract the content within the anchor tag, jQuery selectors can be utilized to refine the search using the month and year.

Subsequently iterate through all the days in that specific month and year, employing the find() method on the anchor element to retrieve the day. Compare the calendar date to the date stored in your array and if they correspond, highlight it accordingly.

Below is a sample code snippet, though its performance and scalability are uncertain:

$(document).ready(function() {
  var myDates = ["10/18/2017", "10/20/2017"];
  myDates.forEach(function(dateString) {
    var date = new Date(dateString);
    var currMonth = date.getMonth() + 1;
    var currYear = date.getFullYear();
    var currDay = date.getDate();

    var $monthYear = $(`td[data-month='${currMonth}'][data-year='${currYear}']`);
    $monthYear.each(function(i, elem) {
      var calendarDay = $(elem).find("a").text();
      var currDate = `${currMonth}/${calendarDay}/${currYear}`;
      if (dateString === currDate) {
        $(elem).addClass("highlight");
      }
    });
  })
})
.highlight {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class=" ui-datepicker-week-end  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="10" data-year="2017">
      <a class="ui-state-default" href="#">18</a>
      <!-- needs class: ui-state-active-->
    </td>

    <td class=" ui-datepicker-week-end  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="10" data-year="2017">
      <a class="ui-state-default" href="#">19</a>
      <!-- needs class: ui-state-active-->
    </td>

    <td class=" ui-datepicker-week-end  ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="10" data-year="2017">
      <a class="ui-state-default" href="#">20</a>
      <!-- needs class: ui-state-active-->
    </td>
  </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In Angular, link a freshly loaded ".js" controller to a newly loaded "html" view following the bootstrapping process on ngRoutes

As a newcomer to Angular, I have been experimenting with loading dynamic views using ngRoutes (which is very cool) along with their respective .js controllers for added functionality. However, I am encountering difficulties in binding them together after b ...

javascriptangularjsasynchronouspartial-views

jQuery ajaxSetup: handling error retries for ajax calls is not possible

When using $.ajaxSetup(), I am faced with the challenge of making an AJAX request after refreshing a valid token in case the previous token has expired. The issue arises when attempting to execute $.ajax(this) within the error callback. $.ajax({ url: ...

javascriptjqueryajax

Is it common to have numerous operations in a single controller in AngularJS?

<!DOCTYPE html> <html ng-app="myApp" > <head> <title>myApp.html</title> </head> <body ng-controller="myCtrl as vm"> <br><br> <div> <p> I ...

javascriptangularjsangular-controller

Loading Data with jQuery

I recently implemented the Load method in jQuery to update the content of a specific div element. function chargeContent(id, end_date) { $(document).ready(function () { $('#content').load('include/detail.php',{id:id,end ...

phpjqueryajax

Users are reporting that verification emails are not being sent when the Accounts.createUser function is used within

I have a simple meteor method set up to create user accounts. In my server/methods.js file: Meteor.methods({ createUserAccount: function(user) { return Accounts.createUser(user); } }); Then in my server/init.js file: Meteor.startup(function() ...

javascriptmeteormeteor-accountsmeteor-helper

Insert information into the <div> element

Sorry if this is a repeated question, but I'm struggling to locate the solution. Is there a way to use jQuery to add content within a div, depending on its current class? For instance, adding "CODE" to a div such as: <div "CODE" class="class_one" ...

jqueryhtml

Ways to dynamically display a button on a JQuery table

Deleting rows in a table can be done by clicking on the Remove Button. However, it is important to note that at least one row must always be present. To ensure this, I am checking the length of the table: if($("#dynamicTable1 tr").length==2) { ...

jquery

Having difficulty utilizing the express.session module in conjunction with HTTPS

I need to implement authentication and session creation on a HTTPS static website using expressjs. Here is the code snippet: app.js: // Set up the https server var express = require('express'); var https = require('https'); var http ...

javascriptnode.jssessionhttpsexpress

Revamp the md-select Container

Hello there! I'm looking for a stylish way to revamp the design of the md-select Window. Specifically, I aim to customize the background and hover effects. Despite my attempts to modify the .md-select-menu-container in CSS, it proved unsuccessful. I ...

cssangularjsangular-material

What is the best way to remove horizontal scrolling and reduce element size on mobile devices?

My current project is utilizing the Material-ui framework, and I have a situation where numerous anchor elements are being displayed as a table within a Paper component from mui. However, due to the length of this table, it causes a horizontal scroll bar t ...

cssreactjsmaterial-designmaterial-ui

What is the best way to deactivate all 67 checkboxes once 4 of them have been chosen?

I am looking to limit the selection of checkboxes to only 4 out of a total of 67. However, I am currently struggling to figure out how to monitor the checkboxes and determine if exactly 4 have been selected. <table class="mdl-data-table mdl-js-data-t ...

phpjqueryhtml

A technique, such as regular expressions, can be used to detect the quantity of newline characters in the text entered by the user in a text area

I'm trying to figure out how to count the number of newline characters (or whatever is inserted when the user presses the return key) in a textarea's value. I believe I should be using a regular expression for this task, but I'm not very ski ...

javascriptjqueryregex

Why do I keep encountering a null window object issue while using my iPhone?

Hey there! I've got a React game and whenever the user loses, a new window pops up. const lossWindow = window.open( "", "", "width=500, height=300, top=200, left = 200" ); lossWindow.document.write( & ...

javascriptreactjsiphonesafari

Parse multiple JSON files, manipulate their contents, and store the updated data

I'm currently working on implementing this functionality using Gulp. Locate and access all files with the extension .json within a designated directory, including any subdirectories. Perform modifications to the files in some manner, such as adding ...

javascriptjsongulp

Ensure that a div remains active even after it has been selected through AJAX using jQuery

I am currently utilizing ajax to display information from a database. The application I am working on is a chat app, where clicking on a specific conversation will append the data to a view. The structure of my conversation div is as follows: <div clas ...

javascripthtmlcss

Bootstrap: Altering grid column layout for medium and small/extra-small screens

Hello everyone, I'm having a bit of trouble working with Bootstrap. My goal is to create a container with a row that contains three columns of equal width: <div class="row"> <div class="col-md-4" style="background:red;">logo</div& ...

htmlcssbootstrap-4

Execution of Ajax call fails to occur synchronously

I have created a unique weather website that utilizes the flickr API as well as the yahoo API to gather weather data. However, I am facing an issue where the ajax call from the yahoo API does not retrieve the necessary data in time for the content of the p ...

javascriptjqueryhtmlajaxperformance

Setting up Karma configuration to specifically exclude nested directories

When unit testing my Angular 2 application using Karma, I encountered an issue with my directory structure: └── src/ ├── index.js ├── index.js.text ├── index.test.js ├── README.txt ├── startuptest.js ...

javascripttestingkarma-runnerkarma-jasminekarma-coverage

When provided with varied inputs, new Date() yields distinct values for various time zones

var date1 = "2015-03-29"; console.log(new Date(date1)); //Output:Sun Mar 29 2015 05:30:00 GMT+0530 (India Standard Time) var date2 = "1869-12-31"; console.log(new Date(date2)); //Output:Fri Dec 31 1869 05:53:20 GMT+0553 (India Standard ...

javascriptdatetimezonedatetime-format

Switching video sources with jQuery and HTML5 can be achieved by clicking on an

I need to develop an engaging video using HTML5 and jQuery. My objective is to: Start playing video1 Show button1 when video1 finishes, then switch to video2 upon clicking and hide button1 Play video2 Display button 2 after video2 ends, then change to vi ...

javascriptjqueryvideohtml5-video