CODEWITHSUNDEEP
htmlforms
dhool
dhool

Reputation: 301

Formatting the time input field with html

I have a simple operating booking system using php. I give the user an option to select a data and time from date and time input fields. Now for the booking system I only want the user to be able to select in hour blocks but the current format of the time picker is hours:minutes:seconds in the format 00:00:00. Is there any way to disable the minutes and seconds? My current code is as follows, just the default for the time picker.

    <input type="time" name="time" id="time" />

Any help would be great if possible, I know its hard to format the date and time pickers and varies alot on web browser so i'm using google chrome latest version 48.0.2564.116. Thanks!

Upvotes: 2

Views: 3794

Answers (4)

int32_t
int32_t

Reputation: 6150

Add step attribute.

<input type="time" name="time" id="time" step="3600"/>

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

The HTML5 specification states that valid type=time input elements must have a valid time string which must have:

  1. Two ASCII digits, representing hour, in the range 0 ≤ hour ≤ 23
  2. A ":" (U+003A) character
  3. Two ASCII digits, representing minute, in the range 0 ≤ minute ≤ 59

The seconds themselves are already optional (that's part 4, but I didn't quote that above). However this does mean that the value of these elements wouldn't be valid without the minute entry.

Perhaps you'd be better off with a type=number input element instead, with a min of 0 and a max of 11 or 23 depending on your preference:

<input type=number min=0 max=23 value=0 />

Upvotes: 2

Golden_flash
Golden_flash

Reputation: 492

Use JSON.stringify() to convet the time to string.

Then use the following function 

  var time = str.substring(0, 3);

This will display time in hours only

Upvotes: 1

schnawel007
schnawel007

Reputation: 4020

This will help you formatting the timepicker of chrome: http://www.html5tutorial.info/html5-date.php

So you can see, that the steps, you could choose, doesn't contain n "Hour" step.

Best solution would be an html timepicker and/or a Javascriptfunction

Upvotes: -1

Related Questions