I tried to use datepicker for a form on my website from a following link. I want to disable previous dates and only allow user to select date from current date and onward. http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox
$(document).ready(function () {
$('#sandbox-container input').datepicker({
format: "dd/mm/yyyy",
clearBtn: true,
minDate: 0,
maxDate: "+1M +10D",
daysOfWeekDisabled: "0,6"
});
});
I add following code minDate: 0,maxDate: "+1M +10D"
to achieve this, but its not working. Also I need to add time in this datepicker if it is possible.
Please use $('#sandbox-container')
instead of $('#sandbox-container input')
.
jQuery(document).ready(function() { $('#sandbox-container').datepicker({ format: "dd/mm/yyyy", clearBtn: true, minDate: 0, maxDate: "+1M +10D", daysOfWeekDisabled: "0,6" }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> Date : <input id="sandbox-container" type="text">
Please visit below links:
Try this is disable past dates
var dateToday = new Date();
$(document).ready(function () {
$('#sandbox-container input').datepicker({
format: "dd/mm/yyyy",
clearBtn: true,
minDate: dateToday,
daysOfWeekDisabled: "0,6"
});
});
Simplest solution is to set today's date as minDate in datepicker as below. This will block all the dates prior to today's date.
$('#sandbox-container input')
.datepicker({
format: "dd/mm/yyyy",
minDate: new Date(),
});
Above is sample code just to illustrate how can you set minDate
Try this
$('#sandbox-container input')
.datepicker({
format: "dd/mm/yyyy",
minDate: new Date(),
});
Please find the details
Html code for date
<input type="text" id="dateRange" />
JS code
$("#dateRange").datepicker({
changeMonth: true,
changeYear: true,
hideIfNoPrevNext: true,
dateFormat: "mm/dd/yy",
minDate: 0
});
The will disable all the dates less current date
jQuery(document).ready(function() { $('#sandbox-container').datepicker({ format: "dd/mm/yyyy", clearBtn: true, minDate: 0, maxDate: "+1M +10D", daysOfWeekDisabled: "0,6" }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> Date : <input id="sandbox-container" type="text">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.