wake-up-neo.com

Kann der jQuery UI Datepicker so eingestellt werden, dass Samstage und Sonntage (und Feiertage) deaktiviert werden?

Ich benutze einen Datepicker für die Auswahl eines Termins. Ich habe den Datumsbereich bereits auf den nächsten Monat festgelegt. Das funktioniert gut. Ich möchte Samstage und Sonntage von der Auswahl ausschließen. Kann das gemacht werden? Wenn das so ist, wie?

191
cletus

Es gibt die Option beforeShowDay, 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 akzeptiert ein Datum als Parameter und muss ein Array mit [0] = true/false zurückgeben, um anzuzeigen, ob dieses Datum auswählbar ist oder nicht, und 1 == == =============================== oder '' für die Standardpräsentation. 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 eingebaute Funktion namens noWeekends, die die Auswahl von Wochenendtagen verhindert.

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

Um beides zu kombinieren, könnten Sie etwas tun (unter der Annahme der nationalDays -Funktion 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: a Popup-Tooltip

241
Adam Bellaire

Diese Antworten waren sehr hilfreich. Vielen Dank.

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 No-Weekends-Funktionen gebündelt.

Wenn Sie ein Wochenende frei haben möchten, fügen Sie [Samstag], [Sonntag] zum Array closedDays 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];
    }




});
27
orolo

Der Datepicker hat diese Funktionalität eingebaut!

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

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

20
Mike Grace

Die Lösung, die hier jeder mag, scheint sehr intensiv zu sein ... persönlich denke ich, dass es viel einfacher ist, 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 den Menschen lesbar. Es ist nicht wirklich so anders, aber auf diese Weise macht es für mich mehr Sinn.

11
Cleanshooter

Mit dieser Codeversion können Sie die Feiertagsdaten aus der SQL-Datenbank abrufen und das angegebene Datum in der Datumsauswahl der Benutzeroberfläche 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 Ferientermine 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]

Happy Coding !!!! :-)

6
neo

Sie können die Funktion noWeekends verwenden, um die Wochenendauswahl zu deaktivieren

  $(function() {
     $( "#datepicker" ).datepicker({
     beforeShowDay: $.datepicker.noWeekends
     });
     });
5
Malith
$("#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];

}
4
Etienne Dupuis

In dieser Version bestimmen Monat, Tag, nd Jahr, welche Tage im Kalender gesperrt 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,
     });
  });
});
2

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

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

Wenn Sie sich nicht für CSS und QuickInfo interessieren, geben Sie alternativ einfach einen Booleschen Wert false zurück, damit das Datum nicht ausgewählt werden kann.

Auch gibt es 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 });
0
Caspian Canuck

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

0
Jorgeeadan