Ergebnis 1 bis 6 von 6

Thema: Jquery datepicker BeforeShowDay Funktion

  1. #1
    Neuer Benutzer
    Registriert seit
    10.03.2017
    Beiträge
    3

    Jquery datepicker BeforeShowDay Funktion

    Hallo,

    Hier erstmal mein Code:
    Code:
    <script type="text/javascript">
    $(function() {
    	var eventDatesyellow = {};
            var eventDatesred = {};
    	<?php
    	for($i=0;$i<=sizeof($view)-1;$i++){
    	$date = explode(":" , $view[$i]);
    	echo "eventDatesyellow[ new Date( '" . $date[1] . "' )] = new Date( '" . $date[1] . "' );";
    	}
    	?>
    	$("#datepicker").datepicker({  
                    defaultDate: <?php echo "'" . $selectedDate . "'"?>,
                    firstDay: 1,
    		dateFormat: "yy-mm-dd",
    		maxDate: new Date, minDate: "2016-03-08",
                    dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
                    dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                    dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
    		onSelect: function(dateText, inst) {
                                $("#datepicker_value").val(dateText);
                                $(this).parent('form').submit();
                                date.dpDiv.find('.ui-datepicker-current-day a')
                                    .css('background-color', 'black');
    		},
    		beforeShowDay: function(date) {
                        // exclude weekends
                        if (!$.datepicker.noWeekends(date)[0])
                            return [false, '', ''];  
                        // highlight dates
                            return [true, eventDatesyellow[date] ? 'eventyellow' : '', ''];
                        }
    
    	});
    	
    });
    </script>
    Ich habe folgendes Problem, bzw. eine Frage ob dies überhaupt möglich ist.

    Ich bekomme verschiedene Datumsangaben aus der Datenbank, die ich als Array in eventDatesyellow und eventDatesred speichere. Der Kalender soll so funktionieren, dass Datumsangaben aus eventDatesyellow gelb werden und Datumsangaben aus eventDatesred rot werden. Falls ein Datum in beiden vorkommt soll es rot werden.
    Ich bekomme das so leider nicht hin bzw. meine Kentnisse in JS sind nicht ausreichend. Aktuell funktioniert das sehr gut. Datumsangaben werden Gelb. Nur wie ich rot auch noch implementieren kann weiß ich nicht.

    Vielleicht kann mir einer helfen oder tipps geben.

    Gruß
    Lhawiw

  2. #2
    Erfahrener Benutzer
    Registriert seit
    29.10.2014
    Beiträge
    481
    Du kannst dir eine eigene Funktion "ermittleDieRichtigKlasse(date)" schreiben, die prüft ob ein übergebenes Datum in einer der beiden Arrays ist oder in beiden.
    Diese Funktion gibt dann die entsprechende CSS-Klasse zurück.
    PHP-Code:
    function ermittleDieRichtigKlasse(date){
      if(
    inRot)
      {
        return 
    "eventred"
      }
      if(
    inGelb)
      {
        return 
    "eventyellow"
      }
      return 
    '';

    PHP-Code:
    beforeShowDay: function(date
    {
        
    // exclude weekends
        
    if (!$.datepicker.noWeekends(date)[0])
            return [
    false''''];  
        
    // highlight dates
        
    return [trueermittleDieRichtigKlasse(date), ''];

    i++; // zaehler i um 1 erhoehen

  3. #3
    Neuer Benutzer
    Registriert seit
    10.03.2017
    Beiträge
    3
    PHP-Code:
    <script type="text/javascript">
    $(function() {
        var eventDatesyellow = {}; //eventDatesyellow = dates where application are yellow or red
            var eventDatesred = {};
        <?php
        
    for($i=0;$i<=sizeof($view)-1;$i++){
        
    $date explode(":" $view[$i]);
        echo 
    "eventDatesyellow[ new Date( '" $date[1] . "' )] = new Date( '" $date[1] . "' );";
        }
        for(
    $i=0;$i<=sizeof($view2)-1;$i++){
        
    $date2 explode(":" $view2[$i]);
        echo 
    "eventDatesred[ new Date( '" $date2[1] . "' )] = new Date( '" $date2[1] . "' );";
        }
        
    ?>
            function ermittleKlasse(date){
                if($.inArray(date, eventDatesred) > -1){
                    return "eventred";
                }
                if($.inArray(date, eventDatesyellow) > -1){
                    return "eventyellow";
                }
                return '';            
            }
        $("#datepicker").datepicker({  
                    defaultDate: <?php echo "'" $selectedDate "'"?>,
                    //first day is Monday
                    firstDay: 1,
            dateFormat: "yy-mm-dd",
                    //hardcoded minDate. Should be fixed soon. Actual Date-365d
            maxDate: new Date, minDate: "2016-03-08",
                    monthNames: [   'Januar','Februar','März','April','Mai','Juni',
                                    'Juli','August','September','Oktober','November','Dezember'],
                    monthNamesShort: [  'Jan','Feb','Mär','Apr','Mai','Jun',
                                        'Jul','Aug','Sep','Okt','Nov','Dez'],
                    navigationAsDateFormat: false, nextText: 'Vor', prevText: 'Zurück',
                    dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
                    dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                    dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
            onSelect: function(dateText, inst) {
                                $("#datepicker_value").val(dateText);
                                $(this).parent('form').submit();
                                date.dpDiv.find('.ui-datepicker-current-day a')
                                    .css('background-color', 'black');
            },                
            beforeShowDay: function(date) {
                        // exclude weekends
                        if (!$.datepicker.noWeekends(date)[0])
                            return [false, '', ''];  
                        // highlight dates
                            return [true, ermittleDieRichtigKlasse(date), '']; 
                        }

        });
        
    });
    </script>
    Danke erstmal noch für deine Hilfe.
    Irgendetwas läuft noch falsch. In eventred und eventyellow ist das Datumsformat yyyy/mm/dd.
    Wie kann ich überprüfen ob das Datum im Array enthalten ist? Vermute auch, dass die Funktion innerhalb beforeShowDay sein muss, oder?

  4. #4
    Erfahrener Benutzer
    Registriert seit
    29.10.2014
    Beiträge
    481
    Und wo ist das Problem? Formatiere das Datum und gut ist.
    i++; // zaehler i um 1 erhoehen

  5. #5
    Neuer Benutzer
    Registriert seit
    10.03.2017
    Beiträge
    3
    Zitat Zitat von freak4fun Beitrag anzeigen
    Und wo ist das Problem? Formatiere das Datum und gut ist.
    Wär cool wenn ich das wüsste woran das liegt. Der Datepicker verschwindet zumindest von meiner Seite. Bekomme das Datum nun im richtigen Format aus der Datenbank, daran kann es nicht liegen!
    War nur die Frage, ob du eine Idee hättest!

    Stimmt was mit meiner auf google gefunden Bedingung nicht?
    if($.inArray(date, eventDatesred) > -1){

  6. #6
    Erfahrener Benutzer
    Registriert seit
    29.10.2014
    Beiträge
    481
    $.inArray() braucht ein Array als Parameter. Du übergibst aber eine Klasse eventDatesyellow = {}; . Du könntest die Klasse in ein Array umwandeln eventDatesyellow = []; Ich weiß aber nicht ob es Seiteneffekte dadurch gibt, wenn du die Variable an anderer Stelle benutzt.
    Du solltest vlt. die Grundlagen ansehen, damit du weißt was du da machst.
    PS: Meiner Meinung nach solltest du für einfache Lösungen auch nur reines JS eventDatesred.indexOf( date ) >= 0 statt jQuery $.inArray(date, eventDatesred) > -1 benutzen.
    i++; // zaehler i um 1 erhoehen

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •