首页 > 解决方案 > 我想在日历上禁用一周中的特定日子

问题描述

我有日历。我想要做的是我想在周三下午 4 点之后禁用当前的周六周和周一下午 4 点之后的周四周。

目前所有星期六都被禁用我只想禁用特定的星期星期六。

我想要执行该功能的链接:https ://plateup.co.nz/cart

<script>
  $( function() {

    //Create array for next 7 days
    var day1 = parseInt(moment().add('days', 1).format('DDMMYYYY'));
    var day2 = parseInt(moment().add('days', 2).format('DDMMYYYY'));
    var day3 = parseInt(moment().add('days', 3).format('DDMMYYYY'));
    var day4 = parseInt(moment().add('days', 4).format('DDMMYYYY'));
    var day5 = parseInt(moment().add('days', 5).format('DDMMYYYY'));
    var day6 = parseInt(moment().add('days', 6).format('DDMMYYYY'));
    var day7 = parseInt(moment().add('days', 7).format('DDMMYYYY'));
    var next7Days = [day1, day2, day3, day4, day5, day6, day7];

    var dayOfWeek = moment().format('dddd');

    var dateToday = new Date();

    console.log(dayOfWeek);


    if(dayOfWeek == 'Sunday'){
      var datesToDisable = 3;
    }else if(dayOfWeek == 'Monday'){
      var datesToDisable = 3;
    }else if(dayOfWeek == 'Tuesday'){
      var datesToDisable = 3;
    }else if(dayOfWeek == 'Wednesday'){
      var datesToDisable = 3;
    }else if(dayOfWeek == 'Thursday'){
      var datesToDisable = 3;      
    }else if (dayOfWeek == 'Friday'){
      var datesToDisable = 3;
    }else if(dayOfWeek == 'Saturday'){
      var datesToDisable = 3;
    }

    if (dayOfWeek == 'Wednesday' && dateToday.getHours()>=16) {
        var isWedAfternoon = true;
        var disablesat = true;
    }else{
        var isWedAfternoon = false;
        var disablesat = false;
    }


    if (dayOfWeek == 'Monday' && dateToday.getHours()>=16) {
        var isMondayAfternoon = true;
        var disablethu = true;
    }else{
        var isMondayAfternoon = false;
        var disablethu = false;
    }




    // User date picker Jquery ui
      $( "#datepicker" ).datepicker({
        numberOfMonths: 1,
        showButtonPanel: true,
        minDate: datesToDisable,
        maxDate: 18,
        dateFormat: 'ddmmyyyy',
        showOtherMonths: true,
        selectOtherMonths: true,
        //defaultDate:+7,
        beforeShowDay: function(date) {
          var day = date.getDay();


          if (disablesat) {
              var daysToDisable = (day != 0 && day != 1 && day != 2 && day != 3 && day != 5 && day != 6);
          }else if(disablethu){
              var daysToDisable = (day != 0 && day != 1 && day != 2 && day != 3 && day != 4 && day != 5);
          }else{
              var daysToDisable = (day != 0 && day != 1 && day != 2 && day != 3 && day != 5);
          }

          return [daysToDisable];


        },
         onSelect: function(_date) {
           var myDate = $(this).datepicker('getDate'); // Retrieve selected date
           var reformattedDate = $.datepicker.formatDate('dd/mm/yy', myDate);
           var dateNumber = parseInt($.datepicker.formatDate('ddmmyy', myDate));
            var dayOfWeek = $.datepicker.formatDate("DD", myDate);

           $('#attributeDay').val(dayOfWeek);
           $('#attributeDate').val(reformattedDate);



           if (jQuery.inArray(dateNumber, next7Days)!='-1') {
             $('#dateCheck').html('is in next 7 days');
             $('#attributeFutureDeliver').val('false');
           } else {
             $('#attributeFutureDeliver').val('true');
             $('#dateCheck').html('is NOT in next 7 days')
           }
        }

      });


    $('.checkout_btn').click(function() {
      if ($('#attributeDate').val() == '') {
        alert("Please pick a delivery date"); 
        return false;
      }
      else {
        $(this).submit();
      }
    });

  } );
  </script>

标签: javascriptcalendar

解决方案


从您的声明中:“我想做的是在周三下午 4 点之后禁用当前的周六周和周一下午 4 点之后的周四周。”

我的理解是:“如果当天是星期一,时间是下午 4 点,则禁用本周的星期四”和“如果当天是星期三,时间是下午 4 点,则禁用本周的星期六”

但是当我尝试执行你的代码时:

  1. 由于 minDate(始终为 3)和 maxDate(硬编码为 18),将启用从当前日期到第 18 个日期的第 3 个日期,禁用所有其他日期。

  2. 除此之外,“beforeShowDay”函数中的逻辑将禁用除周四和周六之外的所有其他日子。

回到您的问题 - “我只想禁用特定的一周星期六。”

以下是如何禁用本周星期六的示例:禁用当前周 中的特定日期(jsfiddle)

$('#date1').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: "m/d/yy",
    beforeShowDay: function (currentDate) {
        var currentDay = currentDate.getDay();
        // Saturday is 6th day of the week
        if(currentDay != 6) return [true];
        var todaysDate = new Date();
        var numberOfDaysToAdd = 6 - todaysDate.getDay();
        // reach current week's Saturday
        todaysDate.setDate(todaysDate.getDate() + numberOfDaysToAdd);
        return [currentDate.getDate() != todaysDate.getDate()]
    }
});

如果您发布所有要求,我将能够在这方面提供更多帮助。


推荐阅读