问题描述
使用 Kendo DateTimePicker (MVVM) 如何将时间四舍五入到最接近的分钟。
例如,数据将日期/时间保存为 12/07/2021 06:59:59 但我希望我的 HTML 模板显示这个值四舍五入到 12/07/2021 07:00 这可能吗?
解决方法
您可以通过侦听 change
事件并将值设置为舍入后的 Date
来舍入最近的分钟。 Stack Overflow 上有各种关于四舍五入到最接近分钟的问题。这是我合并的一个例子。
只需更改秒值并查看时间更新。
const MINUTE_IN_MILLIS = 6e4;
// // https://stackoverflow.com/a/10789415/1762224
const roundToNearest = (date,coefficient) =>
new Date(Math.round(date.getTime() / coefficient) * coefficient);
const roundToNearestMinute = (date) => roundToNearest(date,MINUTE_IN_MILLIS);
$('#date-time-picker').kendoDateTimePicker({
format: 'MM/dd/yyyy hh:mm:ss tt',value: new Date(),dateInput: true,change: function() {
this.value(roundToNearestMinute(this.value()));
}
});
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: top;
margin-top: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js
"></script>
<link href="http://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2021.2.616/styles/kendo.blueopal.min.css" rel="stylesheet" />
<div>
<input id="date-time-picker" />
</div>