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

Question

使用 Kendo DateTimePicker (MVVM) 如何将时间四舍五入到最接近的分钟。

例如，数据将日期/时间保存为 12/07/2021 06:59:59，但我希望我的 HTML 模板显示此值四舍五入到 12/07/2021 07:00 这可能吗？

Answer 1

您可以通过侦听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>