如何使 Jquery datepicker 验证适用于默认值
Posted
技术标签:
【中文标题】如何使 Jquery datepicker 验证适用于默认值【英文标题】：how to make the Jquery datepicker validations to work on for default values 【发布时间】：2017-08-07 03:36:43 【问题描述】：我需要验证开始日期和结束日期，如下所示： 问题是开始日期和结束日期在 html 本身具有默认日期，如下所示：
Start Date: <input type="text" id="startDate" value="2017-03-13"/>
End Date: <input type="text" id="endDate" value="2017-03-13"/>
当我为该开始日期和结束日期添加 datepicker 和一些验证时，验证不适用于 html 代码中给出的默认值，我怎样才能使开始日期和结束日期验证适用于日期在 html 值中也给出了。
$(document).ready(function()
$("#startDate").datepicker(
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
).bind("change", function()
var minValue = $(this).val();
minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
minValue.setDate(minValue.getDate() + 1);
$("#endDate").datepicker("option", "minDate", minValue);
);
$("#endDate").datepicker(
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
).bind("change", function()
var maxValue = $(this).val();
maxValue = $.datepicker.parseDate("yy-mm-dd", maxValue);
maxValue.setDate(maxValue.getDate() - 1);
$("#startDate").datepicker("option", "maxDate", maxValue);
);
$(".ui-datepicker").css(
"font-size": "12px"
);
$("#startDate").keydown(function(e)
e.preventDefault();
);
function validateQty(event)
var key = window.event ? event.keyCode : event.which;
if (event.keyCode == 8 || event.keyCode == 46 ||
event.keyCode == 37 || event.keyCode == 39)
return true;
else if (key < 48 || key > 57)
return false;
else return true;
;
);<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
</head>
<body>
Start Date: <input type="text" id="startDate" value="2017-03-13"/>
End Date: <input type="text" id="endDate" value="2017-03-23" onkeypress='return validateQty(event);'/>
<input type="submit"/>
</body>
</html>我已经添加了如下的jsfiddle代码：[在此处输入链接描述][1]
https://jsfiddle.net/Manishankarg/ncgg8t9x/1/
【问题讨论】：
您的链接将我带到jsfiddle.net的主页。
请立即查看。
所以，我删除了很多重复的代码，并同时应用了 prevent 默认值。那是你想要的吗？ jsfiddle.net/nfnneil/ncgg8t9x/4
太好了，您将我的代码减少了一半，谢谢，但我的问题是您提供的验证第一次不起作用，即..，每当您运行应用程序时，如果您检查开始日期，日期选择器应限制用户添加的时间不超过结束日期。
【参考方案1】：
所以，我发现了代码的问题。您没有检查页面首次加载的时间。我修复了选择区域的代码。所以，这是新版本。我在页面加载时调用了输入事件，这样我们就可以立即运行我们的验证脚本。
https://jsfiddle.net/nfnneil/ncgg8t9x/6/
$(document).ready(function()
$("#startDate, #endDate").datepicker(
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
).bind("change", function()
if ($(this).is("#startDate"))
var minValue = $(this).val();
minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
minValue.setDate(minValue.getDate() + 1);
$("#endDate").datepicker("option", "minDate", minValue);
else
var maxValue = $(this).val();
maxValue = $.datepicker.parseDate("yy-mm-dd", maxValue);
maxValue.setDate(maxValue.getDate() - 1);
$("#startDate").datepicker("option", "maxDate", maxValue);
);
$(".ui-datepicker").css(
"font-size": "12px"
);
$("#startDate, #endDate").keydown(function(e)
e.preventDefault();
);
$("#startDate, #endDate").trigger("change");
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Start Date: <input type="text" id="startDate" value="2017-03-13"/>
End Date: <input type="text" id="endDate" value="2017-03-23" onkeypress='return validateQty(event);'/>
<input type="submit"/>【讨论】：
感谢您的帮助，您发送的代码运行良好。以上是关于如何使 Jquery datepicker 验证适用于默认值的主要内容，如果未能解决你的问题，请参考以下文章
使用 jquery 验证和 jquery-ui datepicker
如何使 jquery datepicker 默认日期为 mm-yyyy（字面意思）