gpt4 book ai didi

javascript - 在 JQuery UI 日期选择器中禁用当前日期之前的日期

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:14:27 24 4
gpt4 key购买 nike

我想在日期选择器中禁用当前日期之前的日期。如何做到这一点?

$(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: "\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>

Equivalent JsFiddle

最佳答案

使用 minDate JQuery UI 日期选择器 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>

Equivalent JsFiddle

另请注意,您只需在脚本中使用一个文档就绪事件。

关于javascript - 在 JQuery UI 日期选择器中禁用当前日期之前的日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28892720/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com