使用 Kendo DateTimePicker (MVVM) 舍入仅显示

如何解决使用 Kendo DateTimePicker (MVVM) 舍入仅显示

使用 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>