如何创建独立的小时、分钟时间选择器以计算开始时间？

你可以将原有的单个TimePicker拆分为两个独立的时间选择器，分别处理小时和分钟的选择，再通过JavaScript将两者的值合并为完整的StartTime。以下是具体实现：

视图代码替换 #

<span class="value">
    <!-- 小时选择器：仅显示小时选项 -->
    @Html.Telerik().TimePickerFor(m => m.StartTime)
        .Format("HH")
        .Interval(60)
        .InputHtmlAttributes(new { id = "hourPicker", @readonly = true })
    
    <span>:</span>
    
    <!-- 分钟选择器：按间隔显示分钟选项，可调整Interval值 -->
    @Html.Telerik().TimePickerFor(m => m.StartTime)
        .Format("mm")
        .Interval(5)
        .InputHtmlAttributes(new { id = "minutePicker", @readonly = true })
    
    <!-- 隐藏字段：存储合并后的完整时间，用于模型绑定提交 -->
    @Html.HiddenFor(m => m.StartTime)
    <br>
</span>

JavaScript 合并逻辑 #

添加以下脚本，监听选择器变化并更新隐藏字段的时间值：

$(function() {
    // 页面加载时初始化时间值
    updateStartTime();
    
    // 监听小时选择器变更
    $("#hourPicker").on("change", updateStartTime);
    // 监听分钟选择器变更
    $("#minutePicker").on("change", updateStartTime);
});

function updateStartTime() {
    const hour = $("#hourPicker").val();
    const minute = $("#minutePicker").val();
    
    if (hour && minute) {
        // 这里使用当前日期作为时间的日期部分，如需固定日期可自行修改
        const baseDate = new Date();
        const fullDateTime = new Date(baseDate.getFullYear(), baseDate.getMonth(), baseDate.getDate(), hour, minute);
        // 将合并后的时间转为ISO格式，适配后端模型绑定
        $("#StartTime").val(fullDateTime.toISOString());
    }
}

关键说明 #

• 小时选择器通过Format("HH")和Interval(60)限制仅显示00-23的小时选项
• 分钟选择器的Interval参数可按需调整（如1、5、15等），控制可选的分钟间隔
• 隐藏字段StartTime是后端模型绑定的关键，确保合并后的时间能正常提交
• 若需要指定固定日期而非当前日期，可修改updateStartTime函数中的baseDate部分，比如从额外的日期选择器获取值

内容的提问来源于stack exchange，提问作者Ahmed Nassef