[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Format Time textbox with Javascript

Posted on 2010-09-14
15
Medium Priority
?
317 Views
Last Modified: 2012-05-10
Hi all,

I have a textbox which I made numbers only with Javascript.
My intention is to make this a time textbox but I can't seem to find how to do this.

TimeTextbox:
- first number may max be 2
- second number may max be 3 (or 0 to 9 if the first number is 0 or 1)
- third number may max be 5
- fourth number may max be 9

So tha max value allowed is 2359. I want to add that between entering the second and third number an double point is automaticially entered.
It would format like this:
23:59

I now use this code to allow only digits. How can I check if the number entered does fullfill it's requirements?

I C# you could check on what place the entered value is and then do what ever you want, but how to do this with Javascript.

Can someone point me in the right direction?

Thx
function onlyNumbers(evt)
{
    var e = event || evt; // for trans-browser compatibility
    var charCode = e.which || e.keyCode;

    if (charCode < 48 || charCode > 57 )
        return false;

    return true;
}

Open in new window

0
Comment
Question by:Pit76
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 5
15 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33673639
<input type="text" onkeydown="onlyTime(event, this)">

function onlyTime(event, thisObj)
{
   var value = parseInt(thisObj.value);
    var e = event || evt; // for trans-browser compatibility
    var charCode = e.which || e.keyCode;

    if (charCode < 48 || charCode > 57 )
        return false;

    switch(value.length)
   {
        case 1:
          if (value > 2)
             return false
          break;    
        case 2:
          if (value > 23)
             return false
          break;    
        case 3:
          if (value%10 > 6)
             return false
          break;    
        case 4:
          if (value%100 > 59)
             return false
   }

    return true;
}
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33674233
I suggest 2 dropdowns
Impossible to enter wrong data.

0
 

Author Comment

by:Pit76
ID: 33675734
Hi,

The script isn't working. I have added an alert just above the switch and this is the result:
[object Event] -> e
undefined  -> value.length

The value.length is undefined.

This is my HTML part:
<input type="Text" id="workTime" maxlength="5" size="3" value="00:00" onkeydown="onlyTime(event, this)">
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33675964
try this

<script>
function onlyTime(event, thisObj)
{
   var value = parseInt(thisObj.value);
    var e = event || evt; // for trans-browser compatibility
    var charCode = e.which || e.keyCode;

    if (charCode < 48 || charCode > 57 )
        return false;
      var valStr = value + "";
    switch(valStr.length)
   {
        case 1:
          if (value > 2)
              thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
             return false;
          break;    
        case 2:
          if (value > 23)
              thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
             return false;
          break;    
        case 3:
          if (value%10 > 6)
              thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
             return false;
          break;    
        case 4:
          if (value%100 > 59)
              thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
             return false;
   }

    return true;
}
</script>
<body>
<input type="text" onkeyup="onlyTime(event, this)">
</body>

0
 

Author Comment

by:Pit76
ID: 33676917
Hi,

That seems to work, except ffor this part:

   if (charCode < 48 || charCode > 57 )
      {
        return false;
      }

Everything I type is shown. (hjkhklhklh) I added an alert just before the If to show the charcode, and it shows the correct code, it only doesn't execute the If.

Any ideas?

Thx.
0
 

Author Comment

by:Pit76
ID: 33677038
Ok;

I changed it to:
 if (charCode < 48 || charCode > 57 )
      {
            thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
        return false;
      }

Now it works fine :)
0
 

Author Comment

by:Pit76
ID: 33677055
I forgot,

can you explain what this does?

if (value%10 > 6)

and

if (value%100 > 59)
0
 

Author Comment

by:Pit76
ID: 33677295
Sry, not yet what I need. Now I've got this. After the second number it adds a : to it.
When my time is complete 00:00 and I then hit some keys strange things happen.

Can you try with this code?

Thx!


function onlyTime(event, thisObj)
{
   var value = thisObj.value;
    var e = event || evt; // for trans-browser compatibility
    var charCode = e.which || e.keyCode;
	 var valStr = value + "";
	//alert (charCode);
    if (charCode < 48 || charCode > 57)
	{
		thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
        return false;
	}
	
    switch(valStr.length)
   {
        case 1:
          if (value > 2)
              thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
             return false;
          break;    
        case 2:
          if (value > 23)
              thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
			  thisObj.value = thisObj.value + ":";
             return false;
          break;
		// case 3:
		      // thisObj.value = thisObj.value + ":";
          // break;		  
        case 4:
          if (value%10 > 6)
              thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
             return false;
          break;    
        case 5:
		//alert (valStr.length + "\n\r" + valStr);
          if (value%100 > 59)
              thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
             return false;
		default:
			return true;
   }
   
    return true;
}

Open in new window

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33679394
It is because once you have entered a colon ':' into the value, it cannot be parse into integer.
replace line 3-12 with

var valStr = thisObj.value;
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;
var value = parseInt(value.replace(":","") );
if (charCode < 48 || charCode > 57)
{
        thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
        return false;
}
0
 

Author Comment

by:Pit76
ID: 33680844
I get error (undefined is null or not an object)on the following line
var value = parseInt(value.replace(":","") );

Do you get errors when you execute this script?

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33681050
ohh sorry :)
it should be
var value = parseInt(valStr.replace(":","") );
0
 

Author Comment

by:Pit76
ID: 33682973
Lol, now everything I enter dissapears from the first number.
If I enter 0 or 1 or 2 the number is deleted again and the box stays empty.
Can't go to the second number.

I appreciate your help on this! I've been a pain in the ass I guess :)
0
 

Author Comment

by:Pit76
ID: 33683138
I found it has something todo with the difference in charcode between numpad numbers and regular numbers.

I added this to the if but it's not entirely correct, it will always be true
if ( (charCode < 96 || charCode > 105) || (charCode < 48 || charCode > 57))

Any idea how I can make this condition correct?

Second, when all numbers are entered, like eg. 12:54 and I press a letter, it deletes the last number, so I guess that I need to check somewhere if the length of the texbox is 5?

Almost there :)
0
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 1500 total points
ID: 33689112
This has worked for me, please check
<script>
function onlyTime(event, thisObj)
{
	var valStr = thisObj.value;
	var e = event || evt; // for trans-browser compatibility
	var charCode = e.which || e.keyCode;
	var value = parseInt(valStr.replace(":","") );
	if (charCode < 48 || charCode > 57)
	{
			thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
			return false;
	}

    switch(valStr.length)
   {
        case 1:
			if (value > 2)
			{
				thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
				return false;
			}
			break;    
        case 2:
			if (value > 23)
			{
				thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
				return false;
			}
			thisObj.value = thisObj.value + ":";
          break;    
        case 4:
			if (value%10 > 6)
			{
				thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
				return false;
			}
          break;    
        case 5:
			if (value%100 > 59)
			{
				thisObj.value = thisObj.value.substring(0, thisObj.value.length-1);
				return false;
			}
	}

    return true;
}
</script>
<body>
<input type="text" onkeyup="onlyTime(event, this)" maxlength="5">
</body>

Open in new window

0
 

Author Closing Comment

by:Pit76
ID: 33734693
there is still a problem when using backspace after the last digit is entered.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question