无需用户手动调整日期的Javascript DateTimePicker组件求推荐

可选组件及实现方案 #

1. Tempus Dominus Bootstrap DateTime Picker #

目前和.NET MVC Razor生态适配性最好的日期时间选择组件之一，支持Bootstrap 4/5，原生满足你的需求：

• 禁止手动修改日期：可将日期选择面板完全隐藏，仅保留时间选择交互，同时给展示用的输入框加readonly属性，禁止用户手动输入修改任何内容，只能通过时间控件调整
• 跨零点自动联动日期：组件原生支持时间调整时的日期自动计算，当时间调整跨越00:00时，会自动同步更新关联的日期值，无需额外写逻辑实现
• 兼容C# DateTime类型：可直接和Razor强类型模型绑定，表单提交时会自动将组件返回的标准时间格式序列化为后端的DateTime类型，无需额外转换

2. jQuery Timepicker Addon（基于jQuery UI扩展） #

轻量型方案，适合已经引入jQuery UI的项目，配置更简单：

• 直接配置showDatepicker: false即可隐藏日期选择面板，仅保留时间选择功能
• 原生支持时间跨零点时的日期联动，只要绑定的是完整的datetime对象即可自动更新日期
• 和Razor模型绑定逻辑和上述组件一致，提交序列化完全兼容C# DateTime类型

最简实现示例（Tempus Dominus） #

Razor视图代码 #

// 强类型模型绑定隐藏域，存储完整的DateTime值
@Html.HiddenFor(m => m.TargetDateTime)
// 展示用输入框，仅显示时间，禁止手动输入
<input type="text" id="timeOnlyPicker" readonly />

初始化JS代码 #

// 读取Razor模型的初始值初始化组件
const initValue = new Date('@Model.TargetDateTime.ToString("yyyy-MM-ddTHH:mm:ss")');
$('#timeOnlyPicker').datetimepicker({
  format: 'HH:mm', // 输入框仅展示时分
  date: initValue,
  stepping: 1, // 分钟调整步进可自定义
  useCurrent: false
}).on("change.datetimepicker", function (e) {
  // 时间调整后自动同步完整的DateTime值到隐藏域
  $('#TargetDateTime').val(e.date.format('YYYY-MM-DD HH:mm:ss'));
});

注意事项 #

• 只要组件绑定的是完整的日期时间对象而非单独的时间字符串，跨零点自动更新日期的逻辑无需额外开发，两个组件均原生支持
• 输入框设置readonly后可完全避免用户手动修改日期、时间的文本内容，仅允许通过组件的时间选择控件调整，完全满足需求

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