Specific open dates in date picker

Question

I have a reservation form where people can choose dates to make a reservation. But now in the form, all Sundays are locked, but I want to make specific Sundays open for people to choose from. But I don't seem to make it work.

I want to open Sunday 25 of December 2022.

I need some help. This is the code that I have.

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 ,''];
        }

user_10353124 · Answer

Assuming your requirements are all Sunday in the date picker are locked, and only specific date in Sunday are unlocked.

The date format I going to use the example you given var work_days = ["25-10-2022"].
Start with create an array to store all the date which you want to unlock. :

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

Next convert the date string into Date() object and parse the date with 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
}, [])

Finally display the date picker using beforeShowDay(), each day will check and only available if the day is not Sunday or is working day:

$("#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]
    }
})

Demo:

/* 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]
    }
  })
})


Datepicker:

Specific open dates in date picker

1 Answers