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
Input Date Format With Dd/Mm/Yyyy in the Input Field
How to Download File in React Js
How to Restrict Past Dates in Html5 Input Type Date
How to Refresh Form Page After Post Request
React Button Onclick Redirect Page
How to Detect Browser Refresh Using Angular
How to Move Focus on Next Field When Enter Is Pressed
Stringified Json Has Unwanted Double Quotes
Javascript Function Not Defined Error (But It Is Defined)
How to Detect Browser Back Button Click Event Using Angular
How to Tell If a String Contains a Certain Character in JavaScript
How to Download Fetch Response in React as File
How to Make New Line or Break in Array
How to Convert Jquery Code to JavaScript
The Use of the Triple Exclamation Mark
How to Reload Datatables from Another Ajax Request With Onclick