JQuery UI Datepicker, cumartesi ve pazar günlerini (ve tatil günlerini) devre dışı bırakmak için yapılabilir mi?

Bir randevu günü seçmek için bir tarih seçici kullanıyorum. Tarih aralığını yalnızca önümüzdeki ay için olacak şekilde ayarladım. Güzel çalışıyor. Cumartesi ve Pazar günlerini mevcut seçeneklerden hariç tutmak istiyorum. Bu yapılabilir mi? Öyleyse nasıl?

beforeShowDayHer bir tarih için çağrılacak bir işlev alan ve tarihe izin verilirse true, izin verilmiyorsa false döndüren seçenek vardır . Dokümanlardan:

beforeShowDay

İşlev, parametre olarak bir tarih alır ve bu tarihin seçilip seçilemeyeceğini ve 1'in varsayılan sunum için CSS sınıf adlarına veya '' değerine eşit olduğunu belirten [0] değerine eşit / true değerine sahip bir dizi döndürmelidir . Görüntülenmeden önce tarih seçicide her gün için çağrılır.

Tarih seçicide bazı ulusal tatilleri görüntüleyin.

$(".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, ''];
}

Hafta sonu günlerinin seçimini engelleyen noWeekends adı verilen yerleşik bir işlev vardır.

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

İkisini birleştirmek için ( nationalDaysyukarıdaki işlevi üstlenerek) bir şey yapabilirsiniz :

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

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

Güncelleme : jQuery UI 1.8.19 itibariyle, beforeShowDay seçeneğinin isteğe bağlı bir üçüncü paremeter, bir açılır araç ipucu kabul ettiğini unutmayın

Hafta sonlarının hiç görünmesini istemiyorsanız, basitçe:

CSS

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

Bu cevaplar çok yardımcı oldu. Teşekkür ederim.

Aşağıdaki katkılarım, birden çok günün yanlış dönebileceği bir dizi ekliyor (her Salı, Çarşamba ve Perşembe günleri kapalıyız). Ve belirli tarihleri ​​artı yılları ve hafta sonları olmayan işlevleri bir araya getirdim.

Hafta sonları isterseniz, kapalı günler dizisine [Cumartesi], [Pazar] ekleyin.

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




});

Datepicker'da bu işlev yerleşiktir!

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

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

Buradaki herkesin sevdiği çözüm çok yoğun görünüyor ... kişisel olarak böyle bir şey yapmanın çok daha kolay olduğunu düşünüyorum:

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

Bu şekilde tarihleriniz insan tarafından okunabilir. Gerçekten bu kadar farklı değil, bu şekilde benim için daha anlamlı.

Kodun bu sürümü, sql veritabanından tatil tarihlerini almanızı ve UI Datepicker'da belirtilen tarihi devre dışı bırakmanızı sağlar.

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

Sql bir veritabanı oluşturmak ve varchar olarak MM / DD / YYYY formatında tatil tarihleri ​​koymak Aşağıdaki içeriği bir dosyaya getdate.php koyun

[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]

Mutlu Kodlama !!!! :-)

Hafta sonu seçimini devre dışı bırakmak için noWeekends işlevini kullanabilirsiniz

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

}

Bu sürümde, ay, gün ve yıl takvimde hangi günlerin engelleneceğini belirler.

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

günleri devre dışı bırakmak için böyle bir şey yapabilirsiniz. <input type="text" class="form-control datepicker" data-disabled-days="1,3">burada 1 Pazartesi, 3 Çarşamba

En son Bootstrap 3 sürümünde (bootstrap-datepicker.js) beforeShowDaybu biçimde bir sonuç bekler:

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

Alternatif olarak, CSS ve araç ipucunu umursamıyorsanız false, tarihi seçilemez hale getirmek için bir boole döndürmeniz yeterlidir .

Ayrıca, hayır $.datepicker.noWeekends, bu yüzden bunun çizgileri boyunca bir şeyler yapmanız gerekir:

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

Cumartesi ve Pazar için Böyle bir şey yapabilirsiniz

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