通过单击复选框停用日期选择器上的周末
我尝试编写一些 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,
dateFormat: "dd'.'mm'.'yy",
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true
})
} else {
$("#startdate").datepicker({
dateFormat: "dd'.'mm'.'yy",
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true
})
$("#enddate").datepicker({
dateFormat: "dd'.'mm'.'yy",
firstDay: 1,
showOtherMonths: true,
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>
尚方宝剑之说1回答
-
慕盖茨4494581
不要click在复选框上使用事件，使用changeif ($(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", firstDay: 1, showOtherMonths: true, selectOtherMonths: true }) $("#weekday").change(function() { if ($(this).is(':checked')) { $("#startdate, #enddate").datepicker('option', 'beforeShowDay', $.datepicker.noWeekends) } else { $("#startdate, #enddate").datepicker('option', 'beforeShowDay', 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>
随时随地看视频慕课网APP
相关分类
JavaScript