使用 Kendo DateTimePicker (MVVM) 如何将时间四舍五入到最接近的分钟。
例如,数据将日期/时间保存为 12/07/2021 06:59:59 但我希望我的 HTML 模板显示此值四舍五入到 12/07/2021 07:00 这可能吗?
使用 Kendo DateTimePicker (MVVM) 如何将时间四舍五入到最接近的分钟。
例如,数据将日期/时间保存为 12/07/2021 06:59:59 但我希望我的 HTML 模板显示此值四舍五入到 12/07/2021 07:00 这可能吗?
change
您可以通过侦听事件并将值设置为 rounded 来舍入最近的分钟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>