CODEWITHSUNDEEP
javascriptjqueryhtmlinput
Rod
Rod

Reputation: 81

Input formatting

I'm using an input type="number"to allow users to put a duration time on a post. The format is days hours:minutes:seconds as the backend provides the format.

What I need to do is to give that format to the input. Is this possible?

Upvotes: 2

Views: 69

Answers (3)

jcubic
jcubic

Reputation: 66488

You can use input type text with pattern:

<form>
<input type="text" pattern="^\d{1,3} \d{1,2}:\d{1,2}:\d{1,2}$" placeholder="days hours:minutes:seconds"/>
  <input type="submit"/>
</form>

It will validate the text using 1-3 digits for days and 1-2 for hours minutes and seconds.

You can also restrict typing of no digits and colons and space using jQuery:

$(function() {
    $('input').keydown(function(e) {
        console.log(e.which);
        if (!((e.which >= 48 && e.which <= 57) || (e.which == 186 && e.shiftKey) || e.which == 32)) {
            return false;
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" pattern="^\d{1,3} \d{1,2}:\d{1,2}:\d{1,2}$" placeholder="days hours:minutes:seconds"/>
  <input type="submit"/>
</form>

Upvotes: 3

Sachithra Dilshan
Sachithra Dilshan

Reputation: 105

you can use also

<input type="datetime">

Upvotes: 0

Emil S. J&#248;rgensen
Emil S. J&#248;rgensen

Reputation: 6366

If you have jQuery, then take a look at:

http://jonthornton.github.io/jquery-timepicker/

Upvotes: 0

Related Questions