日期选择器中的特定开放日期

Question

我有一个预订表格，人们可以在其中选择日期进行预订。但是现在在表格中，所有的星期日都被锁定了，但我想让特定的星期日开放供人们选择。但我似乎没有让它工作。

我想在 2022 年 12 月 25 日星期日开业。

我需要一些帮助。这是我拥有的代码。

function checkDate(e){

        reservation_date = new Date(e.value);
        today = new Date();

        reservation_date_today = (reservation_date.getYear == today.getYear && reservation_date.getMonth() == today.getMonth() && reservation_date.getDate() == today.getDate());

        console.log(today.getDate() + " " + reservation_date.getDate());

        if(reservation_date_today){
            jQuery("#reservation_date_validation_message").show();
            jQuery("#rest_of_form_after_reservation_date").hide();
        }else{
            jQuery("#reservation_date_validation_message").hide();
            jQuery("#rest_of_form_after_reservation_date").show();
        }
    }

  $( function() {
    $( "#datepicker" ).datepicker({
        minDate: new Date(),
        dateFormat: "DD, d MM yy",
        beforeShowDay: function(date) {
            var day_of_week = date.getDay();
            var day = date.getDate();``
            var month = date.getMonth();
            var year = date.getFullYear();

            const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
            const firstDate = new Date();
            const secondDate = new Date(year, month, day);

            const diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay)); 

            if(diffDays > 183){
                return [false,''];
            }

            var current_date = day + "-" + month + "-" + year;

            var no_off_day = false; 

            var work_days = [
                "25-10-2022",
            ];

            // console.log(current_date);
            // if(true == ){
            //  no_off_day =  true;
            //  console.log(current_date);
            // }

            // if(work_days.includes(current_date) == false)

            if(work_days.includes(current_date)){
                return [false, ''];
            }


            var is_off_day = day_of_week != 0;// && day_of_week != 1;

            
            return [is_off_day ,''];
        }

Answer 1

假设您的要求是锁定日期选择器中的所有星期日，并且仅解锁星期日中的特定日期。

日期格式我将使用您给出的示例var work_days = ["25-10-2022"]。
首先创建一个数组来存储您要解锁的所有日期。 ：

/* dates to unlock */
const workDays = ['25-12-2022']

接下来将日期字符串转换为日期（）对象并解析日期toDateString()：

/* convert workDays to Date() objects */
const workDayStrings = workDays.reduce((workDayStrings, workDay) => {
    const dateArray = workDay.split('-')

    /* skip if the date format was incorrect */
    if (!dateArray.length || dateArray.length > 3) {
        return workDayStrings
    }

    /* based on format: 25-12-2022 */
    const day = parseInt(dateArray[0])
    const month = parseInt(dateArray[1]) - 1
    const year = parseInt(dateArray[2])

    const date = new Date(year, month, day).toDateString()

    workDayStrings.push(date)

    return workDayStrings
}, [])

最后使用显示日期选择器表演日之前（）, 每天都会检查并且仅在当天不是星期天或工作日时可用：

$("#datepicker").datepicker({
    beforeShowDay: date => {
        const isWorkDay = workDayStrings.includes(date.toDateString())
        const isSunday = date.getDay() == 0

        /* available if it is not sunday or is work day  */
        const available = !isSunday || isWorkDay

        return [available]
    }
})

演示：

/* dates to unlock */
const workDays = ['25-12-2022']

/* convert workDays to Date() objects */
const workDayStrings = workDays.reduce((workDayStrings, workDay) => {
  const dateArray = workDay.split('-')

  /* skip if the date format was incorrect */
  if (!dateArray.length || dateArray.length > 3) {
    return workDayStrings
  }

  /* based on format: 25-12-2022 */
  const day = parseInt(dateArray[0])
  const month = parseInt(dateArray[1]) - 1
  const year = parseInt(dateArray[2])

  const date = new Date(year, month, day).toDateString()

  workDayStrings.push(date)

  return workDayStrings
}, [])

$(document).ready(function() {
  $("#datepicker").datepicker({
    beforeShowDay: date => {
      const isWorkDay = workDayStrings.includes(date.toDateString())
      const isSunday = date.getDay() == 0

      /* available if it is not sunday or is work day  */
      const available = !isSunday || isWorkDay

      return [available]
    }
  })
})

<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<p>Datepicker: <input type="text" id="datepicker" value="12/01/2022"></p>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>