【问题标题】:<input type="datetime-local"> How to display minutes with 15mns interval<input type="datetime-local"> 如何以 15 分钟的间隔显示分钟
【发布时间】:2020-10-19 12:24:56
【问题描述】:

我正在构建某种预订应用程序,我想向用户显示一个 datetimepicker 输入,并且只能每一刻钟进行一次预订。

例子:

  • 12:00
  • 12:15
  • 12:30
  • 12:45

我找不到使用简单 HTML 的方法。我需要一些指导。

我尝试使用“step”,但显然似乎只在单击时增加值。这不是我想要的。 我的目标是只显示四分之一值

【问题讨论】:

  • 您可以使用 2 个并排的下拉菜单。下拉 1 是小时,下拉 2 是分钟(从 00 到 45 的 4 个选项)。在 html 中是 select 标记。
  • 所以我放弃了“本地日期时间”的想法?无法设置似乎不可思议
  • 如果你想要一个库,你可以使用 npmjs.com/package/timepicker 之类的东西或在 npmjs 上搜索时间选择器。
  • I need a date AND time picker + no jquery ← AFAIK 没有功能丰富的日期时间选择器可供您在不使用 jquery 等其他支持库的情况下使用。您将需要多个基本输入来完成此操作发生或选择添加支持库以使用功能丰富的输入。
  • 现在大多数浏览器都是开源的。如果您认为可以将此功能添加到没有回归和充分测试的浏览器,我相信他们会很乐意接受拉取请求。否则,step 属性就是你得到的。

标签: javascript html forms datetimepicker


【解决方案1】:
let roundTime = (time, minutesToRound) => {

    let [hours, minutes] = time.split('.');
    hours = parseInt(hours);
    minutes = parseInt(minutes);

    // Convert hours and minutes to time in minutes
    time = (hours * 60) + minutes; 

    let rounded = Math.round(time / minutesToRound) * minutesToRound;
    let rHr = ''+Math.floor(rounded / 60)
    let rMin = ''+ rounded % 60

    //return rHr.padStart(2, '0')+'.'+rMin.padStart(2, '0')
    return rHr+'.'+rMin.padStart(2, '0')
}

用法:roundTime(String(m),15);

【讨论】:

  • 这是在什么情况下使用的?在方法的输入/内部?最后一点。这是否会改变 ui 以在本地日期时间的日历小部件上仅显示 15 分钟的间隔?
猜你喜欢
  • 2014-07-03
  • 1970-01-01
  • 2020-07-22
  • 2012-04-06
  • 1970-01-01
  • 1970-01-01
  • 2021-12-10
  • 2012-11-18
  • 2020-12-15
相关资源
最近更新 更多