Kann der jQuery UI Datepicker dazu verwendet werden, Samstage und Sonntage (und Feiertage) zu deaktivieren?

193

Ich benutze einen Datepicker, um einen Termin zu wählen. Ich habe den Datumsbereich bereits auf den nächsten Monat festgelegt. Das funktioniert gut. Ich möchte Samstage und Sonntage von der verfügbaren Auswahl ausschließen. Kann das gemacht werden? Wenn das so ist, wie?

Cletus
quelle

Antworten:

243

Es gibt die beforeShowDayOption, bei der für jedes Datum eine Funktion aufgerufen wird, die true zurückgibt, wenn das Datum zulässig ist, oder false, wenn dies nicht der Fall ist. Aus den Dokumenten:


beforeShowDay

Die Funktion verwendet ein Datum als Parameter und muss ein Array mit [0] gleich true / false zurückgeben, das angibt, ob dieses Datum auswählbar ist, und 1 gleich einem CSS-Klassennamen oder '' für die Standarddarstellung. Es wird für jeden Tag in der Datumsauswahl aufgerufen, bevor es angezeigt wird.

Zeigen Sie einige Nationalfeiertage im Datepicker an.

$(".selector").datepicker({ beforeShowDay: nationalDays})   

natDays = [
  [1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
  [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
  [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
  [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
];

function nationalDays(date) {
    for (i = 0; i < natDays.length; i++) {
      if (date.getMonth() == natDays[i][0] - 1
          && date.getDate() == natDays[i][1]) {
        return [false, natDays[i][2] + '_day'];
      }
    }
  return [true, ''];
}

Es gibt eine integrierte Funktion namens noWeekends, die die Auswahl von Wochenendtagen verhindert.

$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })

Um beides zu kombinieren, können Sie Folgendes tun (unter der Annahme der nationalDaysFunktion von oben):

$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays})   

function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
        return nationalDays(date);
    } else {
        return noWeekend;
    }
}

Update : Beachten Sie, dass ab jQuery UI 1.8.19 die Option beforeShowDay auch einen optionalen dritten Parameter akzeptiert, einen Popup-Tooltip

Adam Bellaire
quelle
2
Vielen Dank dafür, konnte diese Methode nirgendwo in den Dokumenten finden.
Neil Aitken
2
ausgezeichnete Lösung. Besonders gut, wie kurz Ihre Erklärung ist. @Neil: dev.jqueryui.com/ticket/5851
Kaushik Gopal
Damit bekomme ich Uncaught TypeError: Cannot read property 'noWeekends' of undefineddie Nationalfeiertagsfunktion wie erwartet
LewisJWright
Wenn Sie es bereits instanziiert haben, können Sie die Option $ ('# selector')
Marcaum54
42

Wenn Sie nicht möchten, dass die Wochenenden überhaupt erscheinen, einfach:

CSS

th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
    display: none;
}

quelle
1
Um die Tage vollständig zu verbergen, aber die Überschriften und Leerzeichen anzuzeigen:td.ui-datepicker-week-end { visibility: hidden; }
Vael Victus
Dies ist eine sehr gute Möglichkeit, Wochenenden auszuschließen.
itsdarrylnorris
Danke, sehr schön :)
Fox
26

Diese Antworten waren sehr hilfreich. Danke dir.

Mein Beitrag unten fügt ein Array hinzu, in dem mehrere Tage false zurückgeben können (wir sind jeden Dienstag, Mittwoch und Donnerstag geschlossen). Und ich habe die spezifischen Daten plus Jahre und die Funktionen ohne Wochenende gebündelt.

Wenn Sie ein Wochenende frei haben möchten, fügen Sie [Samstag], [Sonntag] zum ClosedDays-Array hinzu.

$(document).ready(function(){

    $("#datepicker").datepicker({
        beforeShowDay: nonWorkingDates,
        numberOfMonths: 1,
        minDate: '05/01/09',
        maxDate: '+2M',
        firstDay: 1
    });

    function nonWorkingDates(date){
        var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
        var closedDates = [[7, 29, 2009], [8, 25, 2010]];
        var closedDays = [[Monday], [Tuesday]];
        for (var i = 0; i < closedDays.length; i++) {
            if (day == closedDays[i][0]) {
                return [false];
            }

        }

        for (i = 0; i < closedDates.length; i++) {
            if (date.getMonth() == closedDates[i][0] - 1 &&
            date.getDate() == closedDates[i][1] &&
            date.getFullYear() == closedDates[i][2]) {
                return [false];
            }
        }

        return [true];
    }




});
orolo
quelle
3
Sie können einfach Ihre alte Antwort bearbeiten, anstatt eine brandneue zu veröffentlichen - beide in dieselbe Antwort aufnehmen, je nachdem, wie ähnlich sie sind, oder einfach die alte löschen und die bessere Version
belassen
13

Die Lösung hier, die jeder mag, scheint sehr intensiv zu sein ... Ich persönlich denke, es ist viel einfacher, so etwas zu tun:

       var holidays = ["12/24/2012", "12/25/2012", "1/1/2013", 
            "5/27/2013", "7/4/2013", "9/2/2013", "11/28/2013", 
            "11/29/2013", "12/24/2013", "12/25/2013"];

       $( "#requestShipDate" ).datepicker({
            beforeShowDay: function(date){
                show = true;
                if(date.getDay() == 0 || date.getDay() == 6){show = false;}//No Weekends
                for (var i = 0; i < holidays.length; i++) {
                    if (new Date(holidays[i]).toString() == date.toString()) {show = false;}//No Holidays
                }
                var display = [show,'',(show)?'':'No Weekends or Holidays'];//With Fancy hover tooltip!
                return display;
            }
        });

Auf diese Weise sind Ihre Daten für Menschen lesbar. Es ist nicht wirklich so anders, es macht für mich auf diese Weise einfach mehr Sinn.

Cleanshooter
quelle
6

Mit dieser Codeversion können Sie die Feiertagsdaten aus der SQL-Datenbank abrufen und das angegebene Datum im UI-Datepicker deaktivieren


$(document).ready(function (){
  var holiDays = (function () {
    var val = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': 'getdate.php',
        'success': function (data) {
            val = data;
        }
    });
    return val;
    })();
  var natDays = holiDays.split('');

  function nationalDays(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();

    for (var i = 0; i  natDays.length-1; i++) {
    var myDate = new Date(natDays[i]);
      if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
      {
        return [false];
      }
    }
    return [true];
  }

  function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
      if (noWeekend[0]) {
        return nationalDays(date);
      } else {
        return noWeekend;
    }
  }
  $(function() { 
    $("#shipdate").datepicker({
      minDate: 0,
      dateFormat: 'DD, d MM, yy',
      beforeShowDay: noWeekendsOrHolidays,
      showOn: 'button',
      buttonImage: 'images/calendar.gif', 
      buttonImageOnly: true
     });
  });
});

Erstellen Sie eine Datenbank in SQL und geben Sie Ihre Urlaubsdaten im Format MM / TT / JJJJ als Varchar ein. Fügen Sie den folgenden Inhalt in eine Datei getdate.php ein


[php]
$sql="SELECT dates FROM holidaydates";
$result = mysql_query($sql);
$chkdate = $_POST['chkdate'];
$str='';
while($row = mysql_fetch_array($result))
{
$str .=$row[0].'';
}
echo $str;
[/php]

Viel Spaß beim Codieren !!!! :-)

Neo
quelle
5

Mit der Funktion noWeekends können Sie die Wochenendauswahl deaktivieren

  $(function() {
     $( "#datepicker" ).datepicker({
     beforeShowDay: $.datepicker.noWeekends
     });
     });
Malith
quelle
4
$("#selector").datepicker({ beforeShowDay: highlightDays });

...

var dates = [new Date("1/1/2011"), new Date("1/2/2011")];

function highlightDays(date) {

    for (var i = 0; i < dates.length; i++) {
        if (date - dates[i] == 0) {
            return [true,'', 'TOOLTIP'];
        }
    }
    return [false];

}
Etienne Dupuis
quelle
2

In dieser Version bestimmen Monat, Tag und Jahr, welche Tage im Kalender blockiert werden sollen.

$(document).ready(function (){
  var d         = new Date();
  var natDays   = [[1,1,2009],[1,1,2010],[12,31,2010],[1,19,2009]];

  function nationalDays(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();

    for (i = 0; i < natDays.length; i++) {
      if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2]))
      {
        return [false];
      }
    }
    return [true];
  }
  function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
      if (noWeekend[0]) {
        return nationalDays(date);
      } else {
        return noWeekend;
    }
  }
  $(function() { 
    $(".datepicker").datepicker({

      minDate: new Date(d.getFullYear(), 1 - 1, 1),
      maxDate: new Date(d.getFullYear()+1, 11, 31),

      hideIfNoPrevNext: true,
      beforeShowDay: noWeekendsOrHolidays,
     });
  });
});
Christopher Altman
quelle
0

Zum Deaktivieren von Tagen können Sie so etwas tun. <input type="text" class="form-control datepicker" data-disabled-days="1,3">Dabei ist 1 Montag und 3 Mittwoch

Jorgeeadan
quelle
0

In der neuesten Bootstrap 3-Version (bootstrap-datepicker.js) wird beforeShowDayein Ergebnis in diesem Format erwartet:

{ enabled: false, classes: "class-name", tooltip: "Holiday!" }

Wenn Sie sich nicht für CSS und Tooltip interessieren, geben Sie einfach einen Booleschen Wert zurück false, um die Auswahl des Datums aufzuheben.

Es gibt auch keine $.datepicker.noWeekends, also müssen Sie etwas in dieser Richtung tun:

var HOLIDAYS = {  // Ontario, Canada holidays
    2017: {
        1: { 1: "New Year's Day"},
        2: { 20: "Family Day" },
        4: { 17: "Easter Monday" },
        5: { 22: "Victoria Day" },
        7: { 1: "Canada Day" },
        8: { 7: "Civic Holiday" },
        9: { 4: "Labour Day" },
        10: { 9: "Thanksgiving" },
        12: { 25: "Christmas", 26: "Boxing Day"}
    }
};

function filterNonWorkingDays(date) {
    // Is it a weekend?
    if ([ 0, 6 ].indexOf(date.getDay()) >= 0)
        return { enabled: false, classes: "weekend" };
    // Is it a holiday?
    var h = HOLIDAYS;
    $.each(
        [ date.getYear() + 1900, date.getMonth() + 1, date.getDate() ], 
        function (i, x) {
            h = h[x];
            if (typeof h === "undefined")
                return false;
        }
    );
    if (h)
        return { enabled: false, classes: "holiday", tooltip: h };
    // It's a regular work day.
    return { enabled: true };
}

$("#datePicker").datepicker({ beforeShowDay: filterNonWorkingDays });
Kaspisches Canuck
quelle
0

Für Samstag und Sonntag können Sie so etwas tun

             $('#orderdate').datepicker({
                               daysOfWeekDisabled: [0,6]
                 });
Hiren Makwana
quelle