I'm having trouble with formatting and validating a time field (asp:textbox) using only javascript, no JQuery. I want the user to input 6 numbers into the textbox and if they are valid, to insert colons, but not allow the user to input invalid numbers. So, if the time inserted is 235959, either after leaving the field or in real time, format to 23:59:59. Or if the numbers entered are invalid, like 25 is entered for hour, user would not even be able to input the 5 in 25. I haven't really dealt with time at all and am really struggling.
I must admit, I thought this would be easier. I have mostly scoured forums online and am able to achieve only parts of the solution, like I am able to insert colons, but not validate the numbers as well. Example: If 24 is entered as hour, change to 00. I can do this easily separately, but I think I'm struggling with getting all of the pieces to work together. Hopefully I am explaining myself adequately. I also tried a series of if statements to validate time, but that got really messy.
I found this colon insertion function online, but can't get it to work with number validation.
Update1: Just tried nesting the intFieldLength inside the intValidNum, so if the first two numbers are less than 24, then do intFieldLength, but that isn't working. Still trying!
Update2: Removed intFieldLength var just for my readability. Added some code to attempt to force users to enter the correct hour and also if they enter 24 as hour, it will convert to 00. Trying to do similar to minutes and seconds currently...
Update3: Added a slice to select the mm and a "< 60" condition. Trying to add a "== 60" condition so that if the mm is 60, return 00.
<asp:TextBox ID="txtEndTime" runat="server" MaxLength="8" placeholder="HH:MM:SS" onkeypress="formatTime(this)" />
function formatTime(timeInput) {
intValidNum = timeInput.value;
if (intValidNum < 24) {
if (intValidNum.length == 2) {
timeInput.value = timeInput.value + ":";
return false;
}
}
if (intValidNum == 24) {
if (intValidNum.length == 2) {
timeInput.value = timeInput.value.length - 2 + "0:";
return false;
}
}
if (intValidNum > 24) {
if (intValidNum.length == 2) {
timeInput.value = "";
return false;
}
}
//Here is where I had trouble targeting the
//mm and ss in order to add conditions (see hh above).
//I used slice to assist me.
//Please let me know if any of you have suggestions/enhancements/corrections.
if (intValidNum.length == 5 && intValidNum.slice(-2) < 60) {
timeInput.value = timeInput.value + ":";
return false;
}
if (intValidNum.length == 5 && intValidNum.slice(-2) > 60) {
timeInput.value = timeInput.value.slice(0, 2) + ":";
return false;
}
if (intValidNum.length == 5 && intValidNum.slice(-2) == 60) {
timeInput.value = timeInput.value.slice(0, 2) + ":00:";
return false;
}
if (intValidNum.length == 8 && intValidNum.slice(-2) > 60) {
timeInput.value = timeInput.value.slice(0, 5) + ":";
return false;
}
if (intValidNum.length == 8 && intValidNum.slice(-2) == 60) {
timeInput.value = timeInput.value.slice(0, 5) + ":00";
return false;
}
} //end function<input id="txtStartTime" type="text" placeholder="HH:MM:SS" onkeypress="formatTime(this)" MaxLength="8" />I'm having trouble with formatting and validating a time field (asp:textbox) using only javascript, no JQuery. I want the user to input 6 numbers into the textbox and if they are valid, to insert colons, but not allow the user to input invalid numbers. So, if the time inserted is 235959, either after leaving the field or in real time, format to 23:59:59. Or if the numbers entered are invalid, like 25 is entered for hour, user would not even be able to input the 5 in 25. I haven't really dealt with time at all and am really struggling.
I must admit, I thought this would be easier. I have mostly scoured forums online and am able to achieve only parts of the solution, like I am able to insert colons, but not validate the numbers as well. Example: If 24 is entered as hour, change to 00. I can do this easily separately, but I think I'm struggling with getting all of the pieces to work together. Hopefully I am explaining myself adequately. I also tried a series of if statements to validate time, but that got really messy.
I found this colon insertion function online, but can't get it to work with number validation.
Update1: Just tried nesting the intFieldLength inside the intValidNum, so if the first two numbers are less than 24, then do intFieldLength, but that isn't working. Still trying!
Update2: Removed intFieldLength var just for my readability. Added some code to attempt to force users to enter the correct hour and also if they enter 24 as hour, it will convert to 00. Trying to do similar to minutes and seconds currently...
Update3: Added a slice to select the mm and a "< 60" condition. Trying to add a "== 60" condition so that if the mm is 60, return 00.
<asp:TextBox ID="txtEndTime" runat="server" MaxLength="8" placeholder="HH:MM:SS" onkeypress="formatTime(this)" />
function formatTime(timeInput) {
intValidNum = timeInput.value;
if (intValidNum < 24) {
if (intValidNum.length == 2) {
timeInput.value = timeInput.value + ":";
return false;
}
}
if (intValidNum == 24) {
if (intValidNum.length == 2) {
timeInput.value = timeInput.value.length - 2 + "0:";
return false;
}
}
if (intValidNum > 24) {
if (intValidNum.length == 2) {
timeInput.value = "";
return false;
}
}
//Here is where I had trouble targeting the
//mm and ss in order to add conditions (see hh above).
//I used slice to assist me.
//Please let me know if any of you have suggestions/enhancements/corrections.
if (intValidNum.length == 5 && intValidNum.slice(-2) < 60) {
timeInput.value = timeInput.value + ":";
return false;
}
if (intValidNum.length == 5 && intValidNum.slice(-2) > 60) {
timeInput.value = timeInput.value.slice(0, 2) + ":";
return false;
}
if (intValidNum.length == 5 && intValidNum.slice(-2) == 60) {
timeInput.value = timeInput.value.slice(0, 2) + ":00:";
return false;
}
if (intValidNum.length == 8 && intValidNum.slice(-2) > 60) {
timeInput.value = timeInput.value.slice(0, 5) + ":";
return false;
}
if (intValidNum.length == 8 && intValidNum.slice(-2) == 60) {
timeInput.value = timeInput.value.slice(0, 5) + ":00";
return false;
}
} //end function<input id="txtStartTime" type="text" placeholder="HH:MM:SS" onkeypress="formatTime(this)" MaxLength="8" />- Did you try to use TextMode="Time" format="HH:mm" ? – danywalls Commented Apr 22, 2019 at 14:34
- I did try that, but it won't work with my asp:TextBox. I believe it is because it is implicitly defined as text maybe? – Jujucat Commented Apr 22, 2019 at 14:43
3 Answers
Reset to default 5Looks like I answered my question, but would love suggestions/corrections/enhancements!
function formatTime(timeInput) {
intValidNum = timeInput.value;
if (intValidNum < 24 && intValidNum.length == 2) {
timeInput.value = timeInput.value + ":";
return false;
}
if (intValidNum == 24 && intValidNum.length == 2) {
timeInput.value = timeInput.value.length - 2 + "0:";
return false;
}
if (intValidNum > 24 && intValidNum.length == 2) {
timeInput.value = "";
return false;
}
if (intValidNum.length == 5 && intValidNum.slice(-2) < 60) {
timeInput.value = timeInput.value + ":";
return false;
}
if (intValidNum.length == 5 && intValidNum.slice(-2) > 60) {
timeInput.value = timeInput.value.slice(0, 2) + ":";
return false;
}
if (intValidNum.length == 5 && intValidNum.slice(-2) == 60) {
timeInput.value = timeInput.value.slice(0, 2) + ":00:";
return false;
}
if (intValidNum.length == 8 && intValidNum.slice(-2) > 60) {
timeInput.value = timeInput.value.slice(0, 5) + ":";
return false;
}
if (intValidNum.length == 8 && intValidNum.slice(-2) == 60) {
timeInput.value = timeInput.value.slice(0, 5) + ":00";
return false;
}
} //end function<input id="txtStartTime" type="text" placeholder="HH:MM:SS" onkeypress="formatTime(this)" MaxLength="8" />You may have seen this already. But just in case, I believe this is what you're looking for.
Enter IN TIME and OUT TIME in HH:MM format
One thing to note with how you're doing it, is you may need to read a whole integer >-1 and <240000, pass it to a string, and string slice it to what you're looking for.
Try this
String dateString = dateTextBox.Text;
String formats = "MM/dd/yyyy";
DateTime dateValue;
if (DateTime.TryParseExact(dateString, formats,
new CultureInfo("en-US"),
DateTimeStyles.None,
out dateValue))
{
// That means the value of the date is in the specified format..
}
Dont forget using System.Globalization;