'How can I restrict the dates available in an <Input type='date'> element?

I want to create a form with a date input but user can't choose all date: For example, if an user fills in the form on Monday 24 May (day 0), he can choose one:

Friday 28 May (day 4)
Saturday 29 May (day 5)
Friday 3 July (day 11)
Saturday 4 July (day 12)
Friday 10 July (day 18)
Saturday 11 July (day 19)

but if he fills it in at Thursday 27 May (day 0), he can choose one:

Friday 28 May (day 1)
Saturday 29 May (day 2)
Friday 3 July (day 8)
Saturday 4 July (day 9)
Friday 10 July (day 15)
Saturday 11 July (day 15)

In all case user can choose Friday and Saturday of this week, the next and the other next.

I really don't know if it's possible or if I need to use a select, and if so then how?

phphtmlinput


Solution 1:[1]

"In all case user can choose Friday and Saturday of this week, the next and the other next."

This can be achieved using the datepicker itself.

$("#dp").datepicker({
  beforeShowDay: function(date){ return [date.getDay() == 5 || date.getDay() == 6,""]},
  minDate: 0,
  maxDate: "+3w"
});

Working JSFiddle for you: https://jsfiddle.net/sanjeevsarkar/zyve78wu/8/

OR In case you want custom dates:

You can use jQuery Datepicker beforeShowDay and pass the available dates while loading the page with PHP.

var available_formatted_dates_list = ['28-05-2021','29-05-2021', '04-06-2021', '05-06-2021', '11-06-2021', '12-06-2021'];

$(function() {
  $("input[id$=DateText]").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd-mm-yy",
    beforeShowDay: check_available_date
  });
});

function check_available_date(date) {
  var formatted_date = '',
    ret = [true, "", ""];
  if (date instanceof Date) {
    formatted_date = $.datepicker.formatDate('dd-mm-yy', date);
  } else { formatted_date = '' + date; }
  if (-1 === available_formatted_dates_list.indexOf(formatted_date)) {
    ret[0] = false;
    ret[1] = "date-disabled";
    ret[2] = "Date not available";
  }
  return ret;
}

Here is a JSFiddle for you: https://jsfiddle.net/sanjeevsarkar/t8namfq1/2/

NOTE:

Where there is a problem, there must be a solution.

Please note that once the user posts the form, if possible do a backend validation too for the dates, as the UI form data can be manipulated from the browser.

Solution 2:[2]

$today = date('Y-m-d');
  $todayDay =  date("l");
  if($todayDay == 'Monday'){
    $jour1 = date('Y-m-d', strtotime($today. ' + 4 days'));
    $jour2 = date('Y-m-d', strtotime($today. ' + 5 days'));
    $jour3 = date('Y-m-d', strtotime($today. ' + 11 days'));
    $jour4 = date('Y-m-d', strtotime($today. ' + 12 days'));
    $jour5 = date('Y-m-d', strtotime($today. ' + 18 days'));
    $jour6 = date('Y-m-d', strtotime($today. ' + 19 days'));
  }
  if($todayDay == 'Tuesday'){
    $jour1 = date('Y-m-d', strtotime($today. ' + 3 days'));
    $jour2 = date('Y-m-d', strtotime($today. ' + 4 days'));
    $jour3 = date('Y-m-d', strtotime($today. ' + 10 days'));
    $jour4 = date('Y-m-d', strtotime($today. ' + 11 days'));
    $jour5 = date('Y-m-d', strtotime($today. ' + 17 days'));
    $jour6 = date('Y-m-d', strtotime($today. ' + 18 days'));
  }

i make this, it's not beautiful but it's work

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TylerH
Solution 2 WeelCodeur

Related Questions