<input type="datetime-local"> How to display minutes with 15mns interval

user_7857994 0
Viewed 2942

I'm building some kind of booking app and I want to display to the user a datetimepicker input with only the possibility to book every quarter of an hour.

Example:

  • 12:00
  • 12:15
  • 12:30
  • 12:45

I couldn't find a way to do it with simple HTML. I need some guidance for this.

I tried to used "step" but apparently seem to only increment the value when clicking. This is not what I want. My goal is to display only quarter values

datetimepicker forms html javascript
1 Answers
let roundTime = (time, minutesToRound) => {

    let [hours, minutes] = time.split('.');
    hours = parseInt(hours);
    minutes = parseInt(minutes);

    // Convert hours and minutes to time in minutes
    time = (hours * 60) + minutes; 

    let rounded = Math.round(time / minutesToRound) * minutesToRound;
    let rHr = ''+Math.floor(rounded / 60)
    let rMin = ''+ rounded % 60

    //return rHr.padStart(2, '0')+'.'+rMin.padStart(2, '0')
    return rHr+'.'+rMin.padStart(2, '0')
}

usage: roundTime(String(m),15);

user_3079630
Related