如何解决通过单击复选框取消日期选择器上的周末
我尝试编写一些JavaScript代码列表,但现在遇到了日期选择器问题。目标是:选中“仅在工作日内”复选框时,必须禁用日期选择器上的周末日期(星期六和星期日)。我尝试过,但到目前为止没有奏效。这是我的HTML和JavaScript代码。谁能帮我这个?谢谢!
$(function() {
$( "#weekday" ).click(function() {
if ($(this).is('checked')) {
$("#startdate").datepicker({
beforeShowDay: $.datepicker.noWeekends,dateFormat: "dd'.'mm'.'yy",firstDay: 1,showOtherMonths: true,selectOtherMonths: true
})
$("#enddate").datepicker({
beforeShowDay: $.datepicker.noWeekends,selectOtherMonths: true
})
} else {
$("#startdate").datepicker({
dateFormat: "dd'.'mm'.'yy",selectOtherMonths: true
})
$("#enddate").datepicker({
dateFormat: "dd'.'mm'.'yy",selectOtherMonths: true
})
}
})
})
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<input type="checkbox" id="weekday" name="weekday" value="weekday">
<label for="weekday">Only during working days</label><br>
<p>Start Date: <br><input type="text" id="startdate" name="startdate"></p>
<p>End Date: <br><input type ="text" id="enddate" name="enddate"></p>
<p>Quantity: <br><input type="text" id="quantity" name="quantity"><br></p>
<br>
<input type="submit" value="Calculate">
</body>
解决方法
-
不要在复选框上使用
click
个事件,请使用change
-
if ($(this).is('checked')) {
-它是is(':checked')
-
不要在复选框处理程序中初始化日期选择器,而应与之分开初始化
-
不要重新初始化它们,而是使用
option
方法来更改特定设置
$(function() {
$("#startdate").datepicker({
dateFormat: "dd'.'mm'.'yy",firstDay: 1,showOtherMonths: true,selectOtherMonths: true
})
$("#enddate").datepicker({
dateFormat: "dd'.'mm'.'yy",selectOtherMonths: true
})
$("#weekday").change(function() {
if ($(this).is(':checked')) {
$("#startdate,#enddate").datepicker('option','beforeShowDay',$.datepicker.noWeekends)
} else {
$("#startdate,null)
}
})
})
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<input type="checkbox" id="weekday" name="weekday" value="weekday">
<label for="weekday">Only during working days</label><br>
<p>Start Date: <br><input type="text" id="startdate" name="startdate"></p>
<p>End Date: <br><input type="text" id="enddate" name="enddate"></p>
<p>Quantity: <br><input type="text" id="quantity" name="quantity"><br></p>
<br>
<input type="submit" value="Calculate">
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。