How to Disable Preveious Date in a Date Picker

jQuery Date Picker - disable past dates

You must create a new date object and set it as minDate when you initialize the datepickers

<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/>

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    minDate: dateToday,
    onSelect: function(selectedDate) {
        var option = this.id == "from" ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
});

Edit - from your comment now it works as expected http://jsfiddle.net/nicolapeluchetti/dAyzq/1/

How to Disable previous dates in JQuery Datepicker

Can you check if there are minDateTime and maxDateTime available?
Something like:

    let minDateTime = new Date(someDateInThePast);
    let maxDateTime = new Date(someDateInTheFuture);
    $(".date-picker-2").datepicker({
        minDateTime: minDateTime,
        maxDateTime: maxDateTime,
        onSelect: function (dateText) {
            $('#example-popover-2-title').html('<b>Available Appointments</b>');
            var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
            $('#example-popover-2-content').html('Available times <strong>' + dateText + '</strong><br>' + html);
            $('.date-picker-2').popover('show');
        }

    });

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}


.popover
{
  left: 5% !important;
  top: 120% !important;
}


.btn 
{
    margin: 1%;
}


#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}


.popover button{
  background: #f48024;
}

.popover button:hover{
  background:#fcb67c;
}

.popover button:focus{
  background: #052049;
}

.popover button:focus:active{
  background: #052049;
}

.arrow {
  
  visibility: hidden;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  border: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="./style.css" />
<script src="app.js"></script>

</head>
<body>
    <div class=" col-md-4">
      <div  class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
      <span class="" id="example-popover-2"></span> </div>
    <div id="example-popover-2-content" class="hidden"> </div>
    <div id="example-popover-2-title" class="hidden"> </div>


<script>

$('.date-picker-2').popover({
    html : true, 
    content: function() {
      return $("#example-popover-2-content").html();
    },
    title: function() {
      return $("#example-popover-2-title").html();
    }

});

$(".date-picker-2").datepicker({
 minDate: new Date(),
    onSelect: function(dateText) { 
        $('#example-popover-2-title').html('<b>Available Appointments</b>');
        var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
        $('#example-popover-2-content').html('Available times <strong>'+dateText+'</strong><br>'+html);
        $('.date-picker-2').popover('show');
    }
    
});


</script> 
</body>
</html>

Disable previous dates of a datepicker according to selected date in javascript or jquery

You need to set it using the option method on change of start date

$("#txtstartdate").datepicker({  minDate: 0,  onSelect: function(date) {    $("#txtenddate").datepicker('option', 'minDate', date);  }});
$("#txtenddate").datepicker({});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script><link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<input id="txtstartdate" /><input id="txtenddate" />

Disable previous dates and change date format in datetimepicker

For both jQuery UI datepicker and jQuery datetimepicker plugin, the options you are looking for are:

Disable dates before today: minDate: 0
Change date format to mm/dd/yy (e.g. 09/17/20): dateFormat: "mm/dd/y"
Change date format to mm/dd/yyyy (e.g. 09/17/2020): dateFormat: "mm/dd/yy"

In datetimepicker, you can also have the following options:

Disable specific dates, e.g.: disabledDates: ['01/01/2021','01/02/2021','01/03/2021']
Disable the timepicker: timepicker:false

Or if you don't want the time, then you can just use datepicker :)

This is how to initialise your datetimepicker with these options:

$('#datetimepicker5').datetimepicker({
    minDate: 0,
    dateFormat: "mm/dd/yy",
    timepicker:false,
});

Working Example using datepicker:

$("#my_datepicker").datepicker({
  minDate: 0,
  dateFormat: "mm/dd/yy",
});

<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<label>Date</label>
<input id="my_datepicker" type="text">

How to disable list of dates in MUI date picker

shouldDisableDate is a function with the current date in param. So you need to compare this with your array, to enable / disable the date

const shouldDisableDate= date => {
  let blackoutDates = {[
    "2022-03-01",
    "2022-03-08"
    "2022-04-13",
    "2022-05-22"
  ]}

  return blackoutDates.includes(date);
}

This is an exemple, as your date is of type Date whereas your array contains strings. So you'll need to convert the date to a YYYY-MM-DD string first, using your prefered way :)

How to disable to type in HTML input date when choosing past dates?

You can disable keyboard onkeydown event.

$(document).ready(function() { //DISABLED PAST DATES IN APPOINTMENT DATE
  var dateToday = new Date();
  var month = dateToday.getMonth() + 1;
  var day = dateToday.getDate();
  var year = dateToday.getFullYear();

  if (month < 10)
    month = '0' + month.toString();
  if (day < 10)
    day = '0' + day.toString();

  var maxDate = year + '-' + month + '-' + day;

  $('#txt-appoint_date').attr('min', maxDate);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="txt-appoint_date" onkeydown="return false"/>

How to disable previous dates(in the enddate field) based on the date the user selected on the startdate field? (using input type date & javascript)

You could handle the "change" event of the start date input and update the min attribute of the end date input with the value of the start date input :

$("#start").change(function(){
  $("#end").prop("min", $(this).val());
  $("#end").val(""); //clear end date input when start date changes
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="start" />
<input type="date" id="end" />