How to Disable Dates Before Today in Jquery Datepicker

Disable date before current date in JQuery UI datepicker

Use the minDate property in JQuery UI datepicker API.

$(function() {
var $dp1 = $("#datepicker1");
$dp1.datepicker({
changeYear: true,
changeMonth: true,
minDate:0,
dateFormat: "yy-m-dd",
yearRange: "-100:+20",
});

var $dp2 = $("#datepicker2");
$dp2.datepicker({
changeYear: true,
changeMonth: true,
yearRange: "-100:+20",
dateFormat: "yy-m-dd",
});
});

$(function() {  var $dp1 = $("#datepicker1");  $dp1.datepicker({    changeYear: true,    changeMonth: true,    minDate: 0,    dateFormat: "yy-m-dd",    yearRange: "-100:+20",  });
var $dp2 = $("#datepicker2"); $dp2.datepicker({ changeYear: true, changeMonth: true, yearRange: "-100:+20", dateFormat: "yy-m-dd", });});
p.pfield-wrapper input {  float: right;}p.pfield-wrapper::after {  content: "\00a0\00a0 "; /* keeps spacing consistent */  float: right;}p.required-field::after {  content: "*";  float: right;  margin-left: -3%;  color: red;}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script><p class="pfield-wrapper required-field">  <label>Start Date</label>  <input id="datepicker1" type="text" name="s" style="width:155px;" required value=""></p><p class="p">End Date  <input id="datepicker2" type="text" name="e" style="width:155px;" value=""></p>

how to disable dates before today in jQuery datepicker

While I agree that it's weird behavior, you might be able to fake it using the onSelect event of the datepicker.

$(document).ready(function() {
$('#Date').datepicker({
onSelect: function(dateText, inst) {
//Get today's date at midnight
var today = new Date();
today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());
//Get the selected date (also at midnight)
var selDate = Date.parse(dateText);

if(selDate < today) {
//If the selected date was before today, continue to show the datepicker
$('#Date').val('');
$(inst).datepicker('show');
}
}
});
});

Basically, you handle the onSelect event.

When a date is selected, check to see if it's before today's date.

If it is, then you immediately show the datepicker again and clear out the input box attached to it.


Updated
Code sample is now completely functional. Here's a jsfiddle to demonstrate.

Disable date before today using datepicker

You need to do something like this:

$(document).ready(function(){    var date_input=$('input[name="date"]'); //our date input has the name "date"    var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";    var options={        format: 'yyyy/mm/dd',        container: container,        todayHighlight: true,        autoclose: true    };    date_input.datepicker(options).change(dateChanged).on('changeDate', dateChanged);    function dateChanged(ev) {        var $this = $(this);        $this.datepicker('hide');        var now = new Date();        var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());        var selectedDate = Date.parse($this.val());        if (selectedDate < today) {            $this.attr('disabled', true);        } else {            $this.removeAttr('disabled');        }    }
})
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script><link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<input name="date">

How to disable dates before today in jquery UI datepicker

try this

 $('#date_modified').persianDatepicker({
observer: true,
format: 'YYYY/MM/DD',
min: [1396,2,10],
max: [1396,2,20],
minDate: new Date()


}).pDatepicker('setDate', [today]);


});

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>

Jquery- How to set the date before today can't be select?

This is how I disable dates before today :

$("#chkI").datepicker({
minDate: new Date()
});

e.g. jsfiddle



Related Topics



Leave a reply



Submit