javascript 在 JQuery UI 日期选择器中禁用当前日期之前的日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28892720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-28 09:43:21 来源:igfitidea点击:
Disable date before current date in JQuery UI datepicker
提问by user3386779
I want to disable the date before current date in date picker. How to do this?
我想在日期选择器中禁用当前日期之前的日期。这个怎么做？
$(function() {
var $dp1 = $("#datepicker1");
$(document).ready(function() {
$dp1.datepicker({
changeYear: true,
changeMonth: true,
dateFormat: "yy-m-dd",
yearRange: "-100:+20",
});
});
});
$(function() {
var $dp2 = $("#datepicker2");
$(document).ready(function() {
$dp2.datepicker({
changeYear: true,
changeMonth: true,
yearRange: "-100:+20",
dateFormat: "yy-m-dd",
});
});
});p.pfield-wrapper input {
float: right;
}
p.pfield-wrapper::after {
content: "<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>
a0$(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",
});
});
a0 "; /* keeps spacing consistent */
float: right;
}
p.required-field::after {
content: "*";
float: right;
margin-left: -3%;
color: red;
}$(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",
});
});回答by Frebin Francis
Use the minDateproperty in JQuery UI datepicker API.
在 JQuery UI datepicker API 中使用minDate属性。
p.pfield-wrapper input {
float: right;
}
p.pfield-wrapper::after {
content: "<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>
a0 $dp1.datepicker({
changeYear: true,
changeMonth: true,
dateFormat: "yy-m-dd",
yearRange: "-100:+20",
minDate: '0'
});
a0 "; /* keeps spacing consistent */
float: right;
}
p.required-field::after {
content: "*";
float: right;
margin-left: -3%;
color: red;
}javascript
$(document).ready(function() {
$('#Date').datepicker({
onSelect: function(dateText, inst) {
var today = new Date();
today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());
var selDate = Date.parse(dateText);
if(selDate < today) {
$('#Date').val('');
$(inst).datepicker('show');
}
}
});
});
<input type="text" id="Date" value="" />
<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>
Also note that you need to use only one document ready event in your script.
另请注意，您只需在脚本中使用一个文档就绪事件。
回答by Arun P Johny
You can use the minDateoption
您可以使用minDate选项
$(function () {
var $dp1 = $("#datepicker1");
$(document).ready(function () {
$dp1.datepicker({
changeYear: true,
changeMonth: true,
minDate: '0',
dateFormat: "yy-m-dd",
yearRange: "-100:+20",
});
});
});
$(function () {
var $dp2 = $("#datepicker2");
$dp2.datepicker({
changeYear: true,
changeMonth: true,
minDate: '0',
yearRange: "-100:+20",
dateFormat: "yy-m-dd",
});
});
Demo: Fiddle
演示：小提琴
回答by Arunprasanth K V
<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>
html
html
$('#datepicker1').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
$('#datepicker1').val('');
$(inst).datepicker('show');
}
}
});
$('#datepicker2').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
$('#datepicker2').val('');
$(inst).datepicker('show');
}
}
});
NOTE:or use minDate: 0
注意：或使用 minDate: 0
As per your example :
根据您的示例：
Method1
方法一
html
html
$(document).ready(function(){
$("#txtFromDate").datepicker({
minDate: '0',
onSelect: function(selected) {
$("#txtToDate").datepicker("option","minDate", selected)
}
});
$("#txtToDate").datepicker({
minDate: '0',
onSelect: function(selected) {
$("#txtFromDate").datepicker("option","maxDate", selected)
}
});
});
JS
JS
##代码##METHOD2
方法二
html
html
##代码##js
js
##代码##回答by shafi7468
try this if you have start date and end date
如果您有开始日期和结束日期，请尝试此操作
##代码##