使用滑块的 PrimeNG select 小时

Question

我想编辑 PrimeNG slider 以便我可以 select 一个时间段。

当用户打开应用程序时，滑块应设置在 12:00。但是随后用户可以将 selection 从 00:00 一直扩展到 23:59。

但是我在文档中找不到任何关于从滑块更改值的内容。它只是设置从 1 到 100。

Answer 1

不要相信您可以使用数字以外的任何东西作为滑块。 min和max都是数字

Answer 2

您可以使用 0 作为最小值，2359 作为最大值。然后是基于 rangeValues

的自定义格式

Answer 3

我知道这已经晚了几年，但我一直在寻找方法来做到这一点并想出了这个...

您需要将十进制数转换为时间。有许多优秀的在线计算器可以执行此操作。 This one 恰好也显示了这样做的方程式。只要确保将单位时间设置为分钟（或更改为您需要使用的任何内容...）

对于午夜到午夜，您需要 min=0 和 max=1440。 1440 就是 60 * 24（一天中的分钟数）。您可以根据需要进行调整。

但是，这意味着现在您的滑块只显示 0-1440，这不是您想要的。您需要将数字插入一个函数，该函数打印出一个格式化为时间的字符串。

convertDecimalToTime(decimal: number) {
    let running, hours, minutes;

    running = decimal / 60;
    hours = Math.floor(running);
    running = running - hours;
    minutes = Math.round(running * 60);
    
    return hours + ':' + minutes;
}

您现在应该有一个输出时间的滑块。

使用滑块的 PrimeNG select 小时

PrimeNG select hours with the slider

angular

primeng