1

Using the Kendo DateTimePicker (MVVM) How can I round time to the nearest minute.

For example the data holds the date/time as 12/07/2021 06:59:59 but I would like my HTML template to show this value rounded up to 12/07/2021 07:00 is this possible?

Craig
  • 29
  • 4

1 Answers1

1

You can round the the nearest minute by listening to the change event and setting the value to the rounded Date. There are various questions on Stack Overflow regarding rounding to the nearest minute. Here is one example I incorporated.

Simply change the seconds value and see the time update.

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>
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
  • Thanks for your reply, unfortunately this example will change the value of the control I would like to keep the value just display a rounded version, so is there some type of formatting which can do this? – Craig Jul 27 '21 at 16:57