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

Posted 2023-05-08

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

【英文标题】：DateTimePicker - How to set interval of time to be 20 minutes, specific days allowed in the week and times during the day?

【发布时间】：2021-10-03 14:07:36

【问题描述】：

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

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

我希望将时间间隔设置为 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>

【问题讨论】：

对于初学者，请检查您的控制台是否有脚本错误并修复任何语法错误。

嗨，Jasen，抱歉，这些语法错误不应该出现在这个发布的版本中。现在要编辑

我已经完全删除了代码，因为我又搞砸了 2 个小时，但仍然无法正常工作

【参考方案1】：

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

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

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

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

【讨论】：

Siddharth Bhansali 我尝试实现此功能，但我的日期和时间选择器无法正常工作。我试过的代码是这样的： $(function () $('#datepicker').datetimepicker( minuteStep: 20, daysOfWeekDisabled: [0, 6] ); );