在JQuery UI日期选择器中禁用当前日期之前的日期
Disable date before current date in JQuery UI datepicker
我想在日期选择器中禁用当前日期之前的日期。如何做到这一点?
$(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>
等效Js报价
在JQuery UI日期选择器API中使用minDate属性。
$(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>
等效Js报价
还要注意,您只需要在脚本中使用一个文档就绪事件。
您可以使用minDate选项
$dp1.datepicker({
changeYear: true,
changeMonth: true,
dateFormat: "yy-m-dd",
yearRange: "-100:+20",
minDate: '0'
});
演示:Fiddle
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');
}
}
});
});
html
<input type="text" id="Date" value="" />
演示
注意:或使用minDate:0
根据您的示例:
方法1
html
<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>
JS
$(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",
});
});
演示
方法2
html
<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>
js
$('#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');
}
}
});
DEMO
如果您有开始日期和结束日期,请尝试此操作
$(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)
}
});
});
相关文章:
- 如何在JavaScript中延长当前日期
- 使用当前日期生成随机id
- 使用linq.js按当前日期订购一组momentjs日期
- 算法:从数组(javascript/angular)中按当前日期获取上一个和下一个事件
- 获取给定lat-long的javascript中的当前日期和时间
- 生成并格式化当前日期和时间
- 如何在选择当前日期和年数后自动填写日期
- Javascript:根据当前日期检查格式化的日期值
- 如何使用PhoneGap在Sqlite中存储当前日期和时间
- 将硬编码日期与当前日期进行比较
- 如何限制用户只能在日期选择器jquerymobile中选择两天前的日期和当前日期
- 如何将日期与当前日期进行比较以应用逻辑
- Javascript - 从当前日期开始的上个月计算
- 默认情况下,引导日期时间选取器当前日期和当前时间
- 使用日期.js分析方法,而不是当前日期
- 如何使用javascript以操纵的UTC格式获取当前日期
- 在JQuery UI日期选择器中禁用当前日期之前的日期
- JavaScript:获取MySQL时间戳和当前日期之间的天数差
- 如何在JavaScript中返回两个日期(当前日期和输入日期)之间的字符串差异
- 输入日期-当前日期函数很接近,但不完全正确