CODEWITHSUNDEEP
javascriptjqueryhtmljquery-inputmaskinput-mask
Code Guy
Code Guy

Reputation: 3198

Jquery input mask for time duration exceeding 24 hrs

I need a input mask textbox which can store the time duration. I have tried with HH:MM:SS but that will restrict me to store only 23:59:59 and not exceeding 24:00:00

I need to store 7036:10:04 which is a duration

I have tried with

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  
</head>
<body>
  <input type="text" id="endTime">
  <script>
    $(function(){
      
      $('input[id$="endTime"]').inputmask(
        "hh:mm:ss", {
        placeholder: "HH:MM:SS", 
        insertMode: false, 
        showMaskOnHover: false,
        //hourFormat: 12
      }
      );
      
      
    });
  </script>
</body>
</html>

Upvotes: 0

Views: 2790

Answers (2)

shrys
shrys

Reputation: 5960

As indicated in the comments you could use custom definitions, I've defined 5 definition for minutes and seconds:

$(function() {
  $('input[id$="endTime"]').inputmask(
    "9999:59:59", {
      placeholder: "HHHH:MM:SS",
      insertMode: false,
      showMaskOnHover: false,
      //hourFormat: 12,
      definitions: {
        '5': {
          validator: "[0-5]",
          cardinality: 1
        }
      }
    }
  ).val('70361004');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<input type="text" id="endTime">

Upvotes: 2

strek
strek

Reputation: 1230

Is this what you are expecting ? In the place holder part mention the number of digits you need in hours. and it will work for that much digits.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  
</head>
<body>
  <input type="text" id="endTime">
  <script>
    $(function(){
      
      $("#endTime").inputmask(
        "9999:99:99", {
        placeholder: "HHHHH:MM:SS", 
        insertMode: false, 
        showMaskOnHover: false,
        //hourFormat: 12
      }
      ).val('7036:10:04');;
      
      
    });
  </script>
</body>
</html>

Upvotes: 0

Related Questions