Stylizowanie datepicker: podświetl konkretne daty

Wiem, że to pytanie zostało zadane wcześniej, że "rozwiązania", które znalazłem do tej pory, nie działają.Stylizowanie datepicker: podświetl konkretne daty

Używam formularza kontaktowego 7 i wtyczki datepicker na mojej witrynie wordpress. Formularz kontaktowy i kalendarz działają dobrze, ale chcę podkreślić konkretne daty, zmieniając kolor tła tych dat.

Oto kod, który mam włączone w moim pliku nagłówka:

<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, '', '']; 
     } 
    } 
});

});

W moim arkuszu stle.css, mam włączone poniższy kod, żeby dodać stylizacji do tych terminach:

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

Jednakże data w tym przykładzie (26.07.2016) nie dostać wyróżnione po kliknięciu kalendarza, ale pojawia się standardowa stylizacja. Gdzie jest mój błąd?

Dziękujemy za pomoc!

Edycja: Kod HTML wydawało bardzo długo, więc tu jest link do strony internetowej: KYTE

Edit 2: Więc Dodałem następujący kod do mojego pliku functions.php:

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's 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');

nadal nie działa.

Źródło

2016-07-22 Max Imilian

Witam SO, można pokazać nam kod HTML swojego datepicker? Możesz kliknąć prawym przyciskiem myszy na Datepicker, następnie "Sprawdź element" i skopiuj kod HTML. –

Dziękuję Pascal. Spojrzałem na kod HTML i wydawało się to zbyt długie, aby opublikować go tutaj, dlatego dodałem link do mojej strony. mam nadzieję, że to jest w porządku, ale proszę daj mi znać, jeśli nie, –

datepicker nie jest funkcją, prettyphoto nie jest funkcją ... – vaso123

Myślę, że nie ustawiasz podświetlonej klasy na wybraną datę. spróbować

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

pomoże Ci i zmienić swój css:

tr.Highlighted { 
    background-color:red; 
}

I'v przetestowane

Źródło

2016-07-22 14:21:12

Dziękuję Kavian.Próbowałem twojego podejścia, ale wciąż nie ma szczęścia –

@MaxImilian test poprawionej odpowiedzi –

Obawiam się, że tak nie jest. Problem polega na tym, że datepicker nie jest rozpoznawany jako funkcja: $ (...). Datepicker nie jest funkcją (indeks): 424 Uncaught TypeError: $ (...). PrettyPhoto nie jest funkcją. Myślę, że problem dotyczy wtyczki. gdzieś zostanie zdefiniowana funkcja datepicker i muszę się dowiedzieć, gdzie mogę dodać tablicę dat i funkcję showbeforedate do tego. –

Twój próbują wywołać metodę datepiker przed jego biblioteki uzyskać obciążenie.

Spróbuj umieścić ten kod wewnątrz pliku functions.php

<?php 
    add_action('wp_footer', 'my_custom_js'); 
    function my_custom_js(){ 

    //Your js code goes here 

    } 
?>

Źródło

2016-07-23 11:25:49

Próbowałem dodać go do pliku functions.php (zobacz kod powyżej w moim oryginalnym pliku), ale bez powodzenia. –

Stylizowanie datepicker: podświetl konkretne daty

Odpowiedz

Powiązane problemy