为 2 Datepicker 开始日期和结束日期设置验证 javascript
Posted
技术标签:
【中文标题】为 2 Datepicker 开始日期和结束日期设置验证 javascript【英文标题】：Set Validation for 2 Datepicker Start Date and End Date javascript 【发布时间】：2015-06-29 22:35:57 【问题描述】：好的，我有这个问题。我有两个日期选择器，一个是开始日期，另一个是结束日期。
我想要执行 javascript 验证，其中结束日期不能早于开始日期，例如，如果用户单击开始日期并选择 2015 年 4 月 2 日，那么当用户单击结束日期时，它会自动使日期显示在日历不得早于开始日期。
我正在附上我的 plunkr 代码。 http://plnkr.co/edit/nsf6o2hlYrt3pFfJCFn2
javascript.js
$(document).ready(function()
$('#activity-customer-start-period').datepicker(
format: 'dd M yyyy',
autoclose: true,
minDate: 0,
onSelect: function(selected)
console.log(selected)
$("#activity-customer-end-period").datepicker("option","minDate", selected);
);
$('#activity-customer-end-period').datepicker(
format: 'dd M yyyy',
autoclose: true,
onSelect: function(selected)
console.log(selected)
$("#activity-customer-start-period").datepicker("option","maxDate", selected);
);
)
index.html
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<h5>Start Time </h5>
<input id="activity-customer-start-period" name="start_period" placeholder="" type="text">
<br/>
<h5>End Time</h5>
<input id="activity-customer-end-period" name="end_period" placeholder="" type="text">
</body>
</html>
任何帮助表示赞赏。
【问题讨论】：
添加了一个小提琴文件也许你可以从这里帮我解决它？ 【参考方案1】：您需要在结束日期字段中添加以下选项。
minDate: $('#activity-customer-start-period').val(),
这样做：
*$('#activity-customer-end-period').datepicker(
format: 'dd M yyyy',
autoclose: true,
minDate: $('#activity-customer-start-period').val(),
onSelect: function(selected)
console.log(selected)
$("#activity-customer-start-period").datepicker("option","maxDate", selected);
);
这对你有用。
【讨论】：
jsfiddle.net/boyfunky/oqxxmrru我有一个小提琴文件也许你可以帮我从这里解决它？ 您还没有在小提琴中添加库。并且字段名称不正确。您可以在此处查看工作示例：jsfiddle.net/f7j6kn3b【参考方案2】：试试下面的方法
HTML 部分：
<div class="start_date"></div>
<div class="end_date"></div>
JS部分：
var dates = jQuery('.start_date, .end_date').datepicker("option", "onSelect",
function(selectedDate)
var $this = $(this),
option = $this.hasClass("start_date") ? "minDate" : "maxDate",
adjust = $this.hasClass("start_date") ? 1 : -1,
base_date = new Date(selectedDate),
new_date = new Date();
new_date.setDate(base_date.getDate() + (1 * adjust));
dates.not(this).datepicker("option", option, new_date);
);
Demo希望对你有帮助
【讨论】：
以上是关于为 2 Datepicker 开始日期和结束日期设置验证 javascript的主要内容，如果未能解决你的问题，请参考以下文章
Datepicker jQuery 和 Gravity 表单的开始和结束日期
当值设置为超过最大日期时，Kendo Datepicker 显示错误的格式
jquery-ui datepicker 设置开始结束时间选择范围
将 DatePicker 日期转换为 UTC 格式返回 NULL