jquery datepicker: Müssen ein paar Wochenenden von bereits deaktivierten Wochenenden aktivieren

Ich habe einen Code, wo ich ein paar Termine und alle Wochenenden in der jQuery Datepicker deaktiviert haben. Jetzt gibt es eine Anforderung, dass ich ein paar Wochenendtermine aktivieren muss.jquery datepicker: Müssen ein paar Wochenenden von bereits deaktivierten Wochenenden aktivieren

Ich habe versucht, in diese Daten zu einem Array hinzufügen und dann versuchen, sie zu aktivieren, aber es funktioniert nicht. Ich brauche eine Lösung für dieses Problem. Der aktuelle Code ist unten, der für das Deaktivieren von Wochenenden und einer bestimmten Reihe von Daten gut funktioniert. Bitte lassen Sie mich wissen, wie ich Code zur Freigabe ein paar Sonntagen im Monat Mai oder Juni (zum Beispiel 28-05-2017)

<script> 
var unavailableDates = ["16-9-2017", "22-9-2017" , "19-10-2017", "1-12-2017" , "11-12-2017" , "25-12-2017", "1-1-2018" , "31-1-2018" , "16-2-2018" , "17-2-2018" , "1-5-2018"]; 

$(function() { 
    $("#datepicker").datepicker({ minDate: +2, beforeShowDay:noSunday, numberOfMonths:2, 
     onSelect: function(date, obj){ 
      $('#date_input').val(date); //Updates value of of your input 
     } 
    }); 

    $("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy"); 

    function noSunday(date){ 
     var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear(); 
     var day = date.getDay(); 
     if (day == 0) { 
      return [false, "Highlighted", date]; 
     } 

     for (var i = 0; i < unavailableDates.length; i++) { 
      if ($.inArray(dmy, unavailableDates) != -1) { 
       return [false, "Highlighted", date]; 
      } 
     } 
     return [true, '', '']; 
    }; 
}); 
</script>

Jede Hilfe sehr geschätzt wird hinzufügen können.

Quelle

2017-05-22 MansoorShiraz

Einer Ihrer Returns in Ihrer beforeShowDay-Funktion gab kein gültiges Array zurück. Vom documentation, heißt es:

[2] ein optionaler Popup-Tooltip für dieses Datum

if (day == 0) { 
    return [false, "Highlighted"]; 
}

Während der Schleife und die Verwendung von inArray würde, Sie haben den schwierigen Teil gearbeitet haben bereits getan Erstellen der String-Darstellung des Datums des Kalenders, um das Format der Daten in Ihrem Array zu erreichen.

Ich habe indexOf verwendet, um zu identifizieren, ob der String im Datenarray vorhanden war. Wenn nicht, geben Sie [true, ''] zurück, andernfalls geben Sie den falschen Status zurück.

var unavailableDates = ["16-9-2017", "22-9-2017", "19-10-2017", "1-12-2017", "11-12-2017", "25-12-2017", "1-1-2018", "31-1-2018", "16-2-2018", "17-2-2018", "1-5-2018"]; 
 

 
$(function() { 
 
    $("#datepicker").datepicker({ 
 
    minDate: +2, 
 
    beforeShowDay: noSunday, 
 
    numberOfMonths: 2, 
 
    onSelect: function(date, obj) { 
 
     $('#date_input').val(date); //Updates value of of your input 
 
    } 
 
    }); 
 

 
    $("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy"); 
 

 
    function noSunday(date) { 
 
    var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear(); 
 
    var day = date.getDay(); 
 
    if (day == 0) { 
 
     return [false, "Highlighted"]; 
 
    } else { 
 
     return (unavailableDates.indexOf(dmy) !== -1) ? [false, "Highlighted"] : [true, '']; 
 
    } 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
    <p>Date: <input type="text" id="datepicker"></p> 
 
</body> 
 

 
</html>

Quelle

2017-05-22 21:15:45 user2340824

Wenn Sie demselben Sonntag aktiviert halten möchten, können Sie einfach die, wenn die Bedingung ändern, die Sie zum Deaktivieren sie verwenden. Statt:

if (day == 0)

Verwendung

if (day == 0 && $.inArray(dmy, availableDates) == -1)

wo availableDates ist ein Array, das alle Sonntage enthält, die Sie aktiviert bleiben soll.

Hier ein Live-Beispiel:

var unavailableDates = ["16-9-2017", "22-9-2017" , "19-10-2017", "1-12-2017" , "11-12-2017" , "25-12-2017", "1-1-2018" , "31-1-2018" , "16-2-2018" , "17-2-2018" , "1-5-2018"]; 
 

 
var availableDates = ["28-5-2017"]; 
 

 
$("#datepicker").datepicker({ 
 
    minDate: +2, 
 
    beforeShowDay: noSunday, 
 
    numberOfMonths:2, 
 
    onSelect: function(date, obj){ 
 
    $('#date_input').val(date); //Updates value of of your input 
 
    }, 
 
    dateFormat: "dd-mm-yy" 
 
}); 
 

 
function noSunday(date){ 
 
    var dmy = $.datepicker.formatDate("d-m-yy", date); 
 
    
 
    var day = date.getDay(); 
 
    if (day == 0 && $.inArray(dmy, availableDates) == -1) { 
 
    return [false, "Highlighted"]; 
 
    } 
 

 
    for (var i = 0; i < unavailableDates.length; i++) { 
 
    if ($.inArray(dmy, unavailableDates) != -1) { 
 
     return [false, "Highlighted"]; 
 
    } 
 
    } 
 
    return [true, '']; 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/> 
 

 
<input type="text" id="datepicker"> 
 
<input type="text" id="date_input">

Beachten Sie, dass:

I dateFormat Option verwendet haben, wenn die Datepicker Initialisierung
ich verwendet habe, $.datepicker.formatDate zu Format Datum in der "d-m-yy" Format.
Ich habe die dritte optionale Tooltipp Parameter aus der beforeShowDay Funktion entfernt.

Quelle

2017-05-22 21:39:06 VincenzoC

jquery datepicker: Müssen ein paar Wochenenden von bereits deaktivierten Wochenenden aktivieren

Antwort

Verwandte Themen