使用jquery中的数据报警器使开始日期小于结束日期，并且不允许选择周末。
使用jquery中的数据报警器使开始日期小于结束日期，并且不允许选择周末。
提问于 2020-07-28 07:01:13
我是jQuery和JSP的新手。我正在尝试做一个预订系统，其中有两个日期-开始日期和结束日期。我要求将下列功能包括在系统中。
weekdays.
- Format
- 开始日期应小于结束日期，结束日期应大于开始日期。
- 预订只允许在dd-mm-yy上进行。我能够单独实现所有这些功能，但当我合并它们时，它们中的任何一个都不起作用。下面是开始日期的jQuery代码应该小于结束日期，结束日期应该大于开始日期。
<script>
$(document).ready(function () {
$("#datepick").datepicker({
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate());
$("#datepick1").datepicker("option", "minDate", dt);
}
});
$("#datepick1").datepicker({
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate());
$("#datepick").datepicker("option", "maxDate", dt);
}
});
});
</script>这是用于禁用周末和更改日期格式的jQuery代码。
<script>
$(document).ready(function () {
$("#datepick").datepicker({
dateFormat: "dd-mm-yy",
beforeShowDay: $.datepicker.noWeekends
});
$("#datepick1").datepicker({
dateFormat: "dd-mm-yy",
beforeShowDay: $.datepicker.noWeekends
});
});
</script>我尝试将这两种功能组合在一起，但其中任何一种功能都不起作用。提前谢谢！
回答 1
Stack Overflow用户
发布于 2020-07-28 10:19:13
只需一点CSS就可以轻松地实现这一目标：
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
pointer-events: none;
opacity: 0.5;
}这将以datepicker类周末为目标，并将其设置为不可点击和不透明，与使用datepicker时相同。
要了解不起作用的日期格式，请使用以下内容：
var res = selected.split("-");
var newdate = [];
newdate.push(res[2],res[1],res[0] ); 除2015-03-25之外的数据发送者，并在selected中输出这种格式
2015-03-25T12:00:00-06:30因此，当您设置日期格式时，它不会产生正确的日期格式。因此，您拆分您的格式，并在您的情况下重新安排它从：22-07-2020到2020-07-22，然后数据报童新日期函数重新开始工作。
因此，现在您可以像以前一样使用日期范围函数，只需添加上面的dateFormat: "dd-mm-yy",和代码。示例：
$(document).ready(function() {
$("#datepick").datepicker({
dateFormat: "dd-mm-yy",
onSelect: function(selected) {
var res = selected.split("-");
var newdate = [];
newdate.push(res[2],res[1],res[0] );
var dt = new Date(newdate);
dt.setDate(dt.getDate());
$("#datepick1").datepicker("option", "minDate", dt);
}
});
$("#datepick1").datepicker({
dateFormat: "dd-mm-yy",
onSelect: function(selected) {
var res = selected.split("-");
var newdate = [];
newdate.push(res[2],res[1],res[0] );
var dt = new Date(newdate);
dt.setDate(dt.getDate());
$("#datepick").datepicker("option", "maxDate", dt);
}
});
});th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
pointer-events: none;
opacity: 0.5;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<input type="text" id="datepick" name="date"><input type="text" id="datepick1" name="date">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63128650
复制相关文章
相似问题
腾讯云开发者
