Geek Answers Handbook

Date filtering: specify specific dates

I know that before this question a question was asked that the “solutions” that I have found so far do not work.

I am using Contact Form 7 and the datepicker plugin on my Wordpress site. The contact form and calendar work very well, but I want to specify specific dates by changing the background color of these dates.

Here is the code that I included in my header file:

<script type="text/javascript"> $(document).ready(function() { var SelectedDates = {}; SelectedDates[new Date('07/26/2016')] = new Date('07/26/2016'); $('#datepicker123').datepicker({ beforeShowDay: function(date) { var Highlight = SelectedDates[date]; if (Highlight) { return [true, "Highlighted", Highlight]; } else { return [true, '', '']; } } });

});

In my stle.css sheet, I included the following code to add style to these dates:

  .Highlighted a{ background-color : #1AAFFF !important; }

However, the date in this example (7/26/2016) does not stand out when I click on the calendar, but the standard style appears. Where is my mistake?

Many thanks for your help!

Edit: The HTML code seemed very long, so here's the link to the site: KYTE

Edit 2: So, I added the following code to the functions.php file:

 function wpse_enqueue_datepicker() { // Load the datepicker script (pre-registered in WordPress). wp_enqueue_script( 'jquery-ui-datepicker' ); // You need styling for the datepicker. For simplicity I've linked to Google hosted jQuery UI CSS. wp_register_style( 'jquery-ui', 'http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' ); wp_enqueue_style( 'jquery-ui' );

} add_action ('wp_enqueue_scripts', 'wpse_enqueue_datepicker');

still not working.

+5
source share
2 answers

I think you are not setting the highlighted class on the selected date. try

 $('td').on('click', function(){ $('td.Highlighted').removeClass('Highlighted'); $(this).addClass('Highlighted'); });

this will help you and change your css:

 tr.Highlighted { background-color:red; }

I tested it

0
source

You are trying to call the datepiker method before its library gets the load.

Try putting this code in your functions.php file

 <?php add_action( 'wp_footer', 'my_custom_js'); function my_custom_js(){ //Your js code goes here } ?>
0
source

More articles:


All Articles