DateTimePicker - 如何将时间间隔设置为 20 分钟、一周中允许的特定日期和一天中的时间？

Question

我一直在网上寻找自定义日期和时间选择器。我已经尝试了很多方法来让它工作，但它不会工作。

日期和时间选择器将起作用，但在使用步进、选择天数范围以及最后的时间范围方面。

• 我希望将时间间隔设置为 20 分钟（9,20, 9.40 等）。
• 我希望确保您只能选择星期一到 周五
• 我希望确保您只能在 晚上 9 点到 5 点之间。

我确实注意到，当我使用禁用功能时，它确实禁用了某些日子，但不是星期六或星期日。

谁能帮我解决这个问题？

这是我的代码

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
    
    <script>
        $(function () {
  

      
            });
    </script>



}

Answer 1

您可以在初始化 datetimepicker 时使用必要的选项：

1. 对于 20 分钟的步骤，添加选项 minuteStep: 20
2. 要禁用周末，请添加选项 daysOfWeekDisabled: [0,6]，其中 0 是星期日，6 是星期六。
3. Bootstrap DateTimePicker 的文档中不存在更改一天的开始和结束时间的选项，如果我找到任何方法，将更新答案。

您可以通过以下方式使用选项：

$("#date-time-element").datetimepicker({minuteStep: 20, ...});