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

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?

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

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

CSS

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

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];
    }




});

Der Datepicker hat diese Funktionalität eingebaut!

$( "#datepicker" ).datepicker({
  beforeShowDay: $.datepicker.noWeekends
});

http://api.jqueryui.com/datepicker/#utility-noWeekends

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.

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 !!!! :-)

Mit der Funktion noWeekends können Sie die Wochenendauswahl deaktivieren

  $(function() {
     $( "#datepicker" ).datepicker({
     beforeShowDay: $.datepicker.noWeekends
     });
     });

$("#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];

}

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

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

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

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

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