当前时间最接近半小时，下一小时时间

Question

I have two textbox with value to set start time and end time. If user has selected these times then it will be display those value. But, if user is creating a new appointment then by default it should display nearest half an hour time to current one and end time should be next hour duration.

For example,

The current time is 4:37PM then the start time should be 5:00PM and end time should be 6:00PM If the current time is 7:31AM then the start time should be 8:00AM and end time should be 9:00AM. If the current time is 11:45AM then the start time should be 12:00PM and end time should 01:00PM

Answer 1

I updated the example a bit, so that when the user sets in 8:00 it stays at 8:00, anything else goes to the next 30 minutes (which you could easily change)

A downside of this approach is that setting 8:30 makes it 9:00 as well, whereas you could possibly argue that 8:30 is valid as well, as it is at 30 minutes intervals

 window.addEventListener('load', function() { const startElement = document.querySelector('#startTime'); const endElement = document.querySelector('#endTime'); const detailsElement = document.querySelector('#appointment_details'); function createTimeString( hours, minutes ) { if (hours < 0 || minutes < 0) { throw 'argument exception'; } console.log( 'original input ' + hours + ':' + minutes ); while (parseInt(hours) >= 24) hours = +hours - 24; while (parseInt(minutes) >= 60) { minutes = +minutes - 60; hours = +hours + 1; } return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0'); } function handleStartTimeChanged( e ) { const timeValue = e.target.value; let [hours,minutes] = timeValue.split(':'); if (Math.round( parseInt( minutes ) / 60.0) === 1) { hours = parseInt(hours) + 1; minutes = 0; } else if (parseInt( minutes ) !== 0) { // anything else is same hour but 30 minutes past minutes = 30; } setAppointmentDetails( createTimeString( hours, minutes ), createTimeString( +hours + 1, minutes ) ); } function handleEndTimeChanged( e ) { const timeValue = e.target.value; let [hours,minutes] = timeValue.split(':'); if (Math.round( parseInt( minutes ) / 60.0) === 1) { hours = parseInt(hours) + 1; minutes = 0; } else if (parseInt( minutes ) !== 0) { // anything else is same hour but 30 minutes past minutes = 30; } setAppointmentDetails( createTimeString( hours - 1, minutes ), createTimeString( hours, minutes ) ); } function setAppointmentDetails( startTime, endTime ) { detailsElement.innerHTML = `${startTime} till ${endTime}`; } startElement.addEventListener('change', handleStartTimeChanged ); endElement.addEventListener('change', handleEndTimeChanged ); } );

 <div class="line"> <span class="label">Appointment start:</span> <span class="field"><input type="time" id="startTime" /></span> <span class="label">Appointment end:</span> <span class="field"><input type="time" id="endTime" /></span> </div> <div id="appointment_details"> </div>

Answer 2

This involves some fairly simple calculations, and Math.ceil :

 const secsPerHalfHour = 1000 * 60 * 30 const nextHalfHour = () => new Date (Math .ceil (new Date() .getTime() / secsPerHalfHour) * secsPerHalfHour) const next90Mins = () => new Date (Math .ceil ((new Date() .getTime() / secsPerHalfHour) + 2) * secsPerHalfHour) console .log (`start: ${nextHalfHour()}`) console .log (`end: ${next90Mins()}`)