Add class to selected date on click

Hello Japerezclick,

Thank you for reaching out about the issue you are facing with the date time picker plugin and Contact Form 7. I understand that you are experiencing difficulties with styling the selected td date as it shares the same class with other days in other months.

To better understand the issue you are facing, would you be able to provide us with some additional information? It would be helpful if you could provide us with the steps you are taking to replicate the issue or a screen recording of the problem. This will allow us to gain a better understanding of the problem and provide you with an appropriate solution.

Please let us know if you have any questions or if there is anything else we can assist you with.

Niel, Input WP Support

Hi Niel.

Thanks for your quick answer. The problem it’s quite simple.

In this case you can only select Tuesdays in the calendar (it’s a 3 days course that only starts on Tuesadys).

If I select for example 21/3/23, I have styled td’s of that selected Tuesd and adyacent Wed and Thurs to background red.

But if you advance in time, you can see that, for example, 21/11/23 is also “in red”, as that day is also Tuesday and shares same class with 21/03/23: “xdsoft_current”.

To solve this I am trying to add a specific class (on click a td) to the “selected” td with Javascript, but it doesn’t work:

<script>
jQuery(document).ready(function() {
   $("td.xdsoft_date").click(function(){
     $(this).addClass("seleccionado");
   })	
});
</script>

My questios is: is there a way to “reach” that selected date (in this case 21/03/23) so I can style only period selected?

Thanks.

• This reply was modified 1 year, 8 months ago by japerezclick.

Hello Japerezclick,

Although there is no setting in the datepicker dashboard that allows you to accomplish that, if you know how to use Javascripts/custom script, you can control how it behaves when people click. We wish we could offer you a solution for this. But in some situations, such as custom scripting, it is already out of the scope of our support.

One way to do this is to use JavaScript to add the class to the selected td element when it is clicked. Here’s an example of how you can achieve this:

First, add a JavaScript code block to your webpage where you have the Contact Form 7 with the date picker plugin.

In the JavaScript code, select all td elements in the date picker table using a query selector.

Add a click event listener to each td element.

When an td element is clicked, remove the “selected” class from any previously selected td element and add the “selected” class to the clicked td element.

Here’s an example of what the JavaScript code could look like:

<script>
  // Select all td elements in the date picker table
  var tds = document.querySelectorAll('.datepicker td');

  // Add a click event listener to each td element
  tds.forEach(function(td) {
    td.addEventListener('click', function() {
      // Remove the "selected" class from any previously selected td element
      var selectedTd = document.querySelector('.datepicker td.selected');
      if (selectedTd) {
        selectedTd.classList.remove('selected');
      }

      // Add the "selected" class to the clicked td element
      this.classList.add('selected');
    });
  });
</script>

In the above code, replace “.datepicker td” with the appropriate selector for selecting the td elements in the date picker plugin on your webpage. And replace “.selected” with the desired class name for the selected td element.

With this code in place, only the selected td date will have the “selected” class, making it easier for you to style it separately.

While we do not offer custom integration services, we suggest reaching out to a skilled web developer who can help you with this. There are several platforms available, including Upwork, Freelancer, Fiverr, and Codeable, where you can post your requirements and find a suitable professional for the job.

?As you may know, we are in the process of revamping our system and plan to release a new version this year. However, we cannot guarantee that this specific feature will be included in the new version as our developers are currently unable to disclose the list of new features yet.

Let me know if you have questions.

Thank you very much, code is amazing, but for reasons I don’t know, it’s not working on clicking tds in calendar.

Hello Japerezclick,

I’m glad to hear that you find the code amazing. However, I’m sorry to hear that you’re experiencing some difficulties with it. Since customizing the code to your specific needs is beyond the scope, I recommend that you seek the assistance of a skilled web developer who can help you further.

You may also want to consider posting your requirements on a platform like Upwork to find the right developer for your needs. Please let me know if there’s anything else I can do to assist you.

Best,

Niel, Input WP Support