Styling Datepicker: Markieren Sie bestimmte Daten

Lesezeit: 4 Minuten

Benutzer-Avatar
Max Imilian

Ich weiß, dass diese Frage schon einmal gestellt wurde, dass die ‘Lösungen’, die ich bisher gefunden habe, nicht zu funktionieren scheinen.

Ich verwende das Kontaktformular 7 und das Datepicker-Plugin auf meiner WordPress-Website. Das Kontaktformular und der Kalender funktionieren einwandfrei, aber ich möchte in der Lage sein, bestimmte Daten hervorzuheben, indem ich die Hintergrundfarbe dieser Daten ändere.

Hier ist der Code, den ich in meine Header-Datei eingefügt habe:

<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 = SelectedDates2023;
        if (Highlight) {
          return [true, "Highlighted", Highlight];
        }
        else {
          return [true, '', ''];
        }
      }
    });
  });
</script>

In meinem style.css-Blatt habe ich den folgenden Code eingefügt, um das Styling zu diesen Daten hinzuzufügen:

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

Das Datum in diesem Beispiel (26.07.2016) wird jedoch nicht hervorgehoben, wenn ich auf den Kalender klicke, sondern das Standardformat wird angezeigt. Wo ist mein Fehler?

Vielen Dank für deine Hilfe!

Bearbeiten: Der HTML-Code schien super lang zu sein, also hier ist der Link zur Website: KYTE

Bearbeiten 2: Also habe ich meiner functions.php-Datei den folgenden Code hinzugefügt:

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

funktioniert immer noch nicht.

  • Hallo und willkommen bei SO, kannst du uns den HTML-Code deines Datepickers zeigen? Sie können dann mit der rechten Maustaste auf den Datepicker klicken Inspect Element und kopieren Sie den HTML-Code.

    – Pascal Goldbach

    22. Juli 2016 um 13:35 Uhr


  • Danke Paskal. Ich habe mir den HTML-Code angesehen und es schien viel zu lang, ihn hier zu posten, also habe ich einen Link zu meiner Seite hinzugefügt. Ich hoffe, das ist in Ordnung, aber lassen Sie es mich bitte wissen, wenn nicht

    – Max Imilian

    22. Juli 2016 um 13:58 Uhr

  • datepicker ist keine Funktion, prettyphoto ist keine Funktion….

    – vaso123

    22. Juli 2016 um 14:00 Uhr

  • Ja, das habe ich auch gesehen (vergiss das hübsche Foto, das ist ein alter Code, den ich noch entfernen muss). Aber wieso ist das so? Liegt es daran, dass das WordPress-Datapicker-Plugin einen anderen Funktionsnamen verwendet?

    – Max Imilian

    22. Juli 2016 um 14:07 Uhr

  • Ich habe den ID-Namen (‘ui-datepicker-div’) des eigentlichen Kalenders hinzugefügt, der beim Klicken auf den obigen Code angezeigt wird, aber er funktioniert immer noch nicht :/ Entschuldigung, ich bin völlig neu in jscript, also diese sind alles Schüsse im Dunkeln

    – Max Imilian

    22. Juli 2016 um 14:16 Uhr

Ich glaube , Sie stellen einen markierten Kurs nicht auf das ausgewählte Datum ein . Versuchen

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

Dies wird Ihnen helfen und Ihr CSS ändern:

tr.Highlighted {
     background-color:red;
}

Ich habe es getestet

  • Danke Kavia. Versuchte Ihren Ansatz, aber immer noch kein Glück

    – Max Imilian

    22. Juli 2016 um 14:32 Uhr

  • Ich fürchte, das tut es nicht. Das Problem ist, dass datepicker nicht als Funktion erkannt wird: $(…).datepicker is not a function (index):424 Uncaught TypeError: $(…).prettyPhoto is not a function. Ich denke das Problem liegt am Plugin. Irgendwo wird die Datepicker-Funktion definiert und ich muss herausfinden, wo, damit ich das Datumsarray und die Showbeforedate-Funktion hinzufügen kann.

    – Max Imilian

    22. Juli 2016 um 15:26 Uhr

Sie versuchen, eine Datepiker-Methode aufzurufen, bevor ihre Bibliothek geladen wird.

Versuchen Sie, diesen Code in Ihre einzufügen functions.php Datei

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

   //Your js code goes here

  }
?>

  • Ich habe versucht, es der Datei functions.php hinzuzufügen (siehe Code oben in meiner Originaldatei), aber kein Glück.

    – Max Imilian

    25. Juli 2016 um 13:17 Uhr

Ich war selbst verwirrt und verwirrt, bis ich meine Skripte in die Fußzeile eingefügt habe. Dann hat es geklappt. Ich habe separate js und css, die helfen, sie nur bei Bedarf einzureihen.

function se_3852702_init() {
  // Place your own script in footer (see the last TRUE)
  wp_register_script( 'se_3852702',
    plugins_url( 'se_3852702' ) . DIRECTORY_SEPARATOR . 'se_3852702.js',
    [ 'jquery-ui-datepicker' ],
    FALSE,
    TRUE // <======== Place in the footer
  );

  wp_register_style( 'se_3852702', plugins_url( 'se_3852702' ) . DIRECTORY_SEPARATOR . 'se_3852702.css' );
}
add_action( 'init', 'se_3852702_init' );

function se_38527021_enqueue_scripts() {
  wp_enqueue_script( 'se_3852702' );
  wp_enqueue_style( 'se_3852702' );

  wp_enqueue_style( 'jquery-ui', 'http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' );
}
// This is overkill as it always enqueue the scripts.
add_action( 'wp_enqueue_scripts', 'se_38527021_enqueue_scripts' );

zusammen mit einem ähnlichen js-Skript

jQuery(document).ready(
  (function ($) {
    function dayAvailable(date) {
      console.log(date);
      let day = date.getDate();
      return [day % 2 == 0, 'my-class', 'Label when hover'];
  }

  $('#date-picker').datepicker({
    beforeShowDay: dayAvailable,
  })
})(jQuery)
);

daraus resultierend

Wordpress-Datumsauswahl

1333140cookie-checkStyling Datepicker: Markieren Sie bestimmte Daten

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy