Bisakah Datepicker jQuery UI dibuat untuk menonaktifkan hari Sabtu dan Minggu (dan hari libur)?

Saya menggunakan datepicker untuk memilih hari janji. Saya sudah menetapkan rentang tanggal hanya untuk bulan berikutnya. Itu bekerja dengan baik. Saya ingin mengecualikan hari Sabtu dan Minggu dari pilihan yang tersedia. Bisakah ini dilakukan? Jika ya, bagaimana caranya?

Ada beforeShowDayopsi, yang membutuhkan fungsi untuk dipanggil untuk setiap tanggal, menghasilkan true jika tanggal diizinkan atau salah jika tidak. Dari dokumen:

sebelumShowDay

Fungsi mengambil tanggal sebagai parameter dan harus mengembalikan array dengan [0] sama dengan benar / salah yang menunjukkan apakah tanggal ini dapat dipilih dan 1 sama dengan nama kelas CSS atau '' untuk presentasi default. Itu dipanggil untuk setiap hari di datepicker sebelum itu ditampilkan.

Tampilkan beberapa hari libur nasional di datepicker.

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

Ada satu fungsi bawaan, yang disebut noWeekends, yang mencegah pemilihan hari akhir pekan.

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

Untuk menggabungkan keduanya, Anda bisa melakukan sesuatu seperti (dengan asumsi nationalDaysfungsi dari atas):

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

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

Pembaruan : Perhatikan bahwa pada jQuery UI 1.8.19, opsi beforeShowDay juga menerima paremeter ketiga opsional, popup tooltip

Jika Anda tidak ingin akhir pekan muncul sama sekali, cukup:

CSS

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

Jawaban-jawaban ini sangat membantu. Terima kasih.

Kontribusi saya di bawah ini menambahkan sebuah array di mana beberapa hari dapat menghasilkan false (kami tutup setiap hari Selasa, Rabu dan Kamis). Dan saya menggabungkan tanggal tertentu ditambah tahun dan fungsi tanpa akhir pekan.

Jika Anda ingin libur akhir pekan, tambahkan [Sabtu], [Minggu] ke array closedDays.

$(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 memiliki fungsi ini bawaan!

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

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

Solusi di sini yang disukai semua orang tampaknya sangat intens ... secara pribadi saya pikir ini jauh lebih mudah untuk melakukan sesuatu seperti ini:

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

Dengan cara ini teman kencan Anda bisa dibaca manusia. Tidak terlalu berbeda, itu lebih masuk akal bagi saya dengan cara ini.

Versi kode ini akan membuat Anda mendapatkan tanggal liburan dari basis data sql dan menonaktifkan tanggal yang ditentukan dalam UI Datepicker

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

Buat Database dalam sql dan beri Anda tanggal liburan dalam format MM / DD / YYYY sebagai Varchar Masukkan konten di bawah ini dalam file getdate.php

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

Selamat Coding !!!! :-)

Anda dapat menggunakan fungsi noWeekends untuk menonaktifkan pilihan akhir pekan

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

}

Dalam versi ini, bulan, hari, dan tahun menentukan hari mana yang akan diblokir di kalender.

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

untuk menonaktifkan hari Anda dapat melakukan sesuatu seperti ini. <input type="text" class="form-control datepicker" data-disabled-days="1,3">di mana 1 adalah Senin dan 3 adalah Rabu

Dalam versi Bootstrap 3 terbaru (bootstrap-datepicker.js) beforeShowDaymengharapkan hasil dalam format ini:

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

Atau, jika Anda tidak peduli dengan CSS dan tooltip maka cukup mengembalikan boolean falseuntuk membuat tanggal tidak dipilih.

Juga, tidak ada $.datepicker.noWeekends, jadi Anda perlu melakukan sesuatu seperti ini:

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

Untuk hari Sabtu dan Minggu Anda bisa melakukan hal seperti ini

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