Formatting & Validating Time using Javascript
Posted: Sat Sep 16, 2006 7:55 am
So, I have been working with Javascript lately, and I created a function that formats the time into HH:MM AM/PM. Below is the function, any critique on the code or maybe someone can make it simpler, I would really appreciate it. And if you're going to use it, please use it. I am glad that it might be helpful for others too.
Explanation:
function formatTime will format time to be 09:00 AM, but in order to achieve this, the user must enter 0900, the user has to be specific in their entry....because 9 o'clock could mean 09:45, or even 09:59 !
function AMPM() will decide if it's am or pm, based on the user's entry. If the user has entered 0700, it will display as ouput: 07:00 AM, and if 1900, it will display as 19:00 PM. Function AMPM() would also alert errors if the user accidentally entered for example 25 as the hours.
function checkHours() will validates user entry on hours. There can't be more than 24 hours, nor less than 0 ? For example, if the user entered 25, it will display an error, then force the user to edit the hour again. And if the user has entered 24, it will automatically formatted as 00, and this happens at line:
function checkMinutes() will validates user entry on minutes. There can't be more than 60 minutes, nor less than 0. Now, it does work when the user enters 19115...it will display an error telling that there are NO MINUTES MORE THAN 60, which in this case is 115 and it's more than 60. But, when the users entered 19000....the program would just ignore it and assumes that it's correct! In order to prevent this, I added another else if, exactly at this line in checkMinutes():
That line will prevent users by accidentally input: 19000, or 190000, or 1900000, 19000000.
Note: I have tested it in Firefox, IE, and Netscape, but haven't tested it in OPERA.
Cheers,
Chris
Explanation:
function formatTime will format time to be 09:00 AM, but in order to achieve this, the user must enter 0900, the user has to be specific in their entry....because 9 o'clock could mean 09:45, or even 09:59 !
function AMPM() will decide if it's am or pm, based on the user's entry. If the user has entered 0700, it will display as ouput: 07:00 AM, and if 1900, it will display as 19:00 PM. Function AMPM() would also alert errors if the user accidentally entered for example 25 as the hours.
function checkHours() will validates user entry on hours. There can't be more than 24 hours, nor less than 0 ? For example, if the user entered 25, it will display an error, then force the user to edit the hour again. And if the user has entered 24, it will automatically formatted as 00, and this happens at line:
Code: Select all
else if (h == 24) {...}Code: Select all
else if (m == "000" || m == "0000" || m == "00000" || m == "000000") {...}Note: I have tested it in Firefox, IE, and Netscape, but haven't tested it in OPERA.
Cheers,
Chris
Code: Select all
/**
* @author: christian_phpbeginner
* @method name : formatTime
* @param : formName, fieldName
* @description :
* Function to format time as to be HH:MM AM/PM
* @see :
* This function should be combined with AMPM(), checkHours(), checkMinutes()
* @how-to :
* 1. Specify the formName and fieldName in the parameter
* 2. Always include the function AMPM(), checkHours(), and checkMinutes()
* 3. You can customize the error message by changing the variable value msgError
* @example :
* <input type="text" onblur = "javascript:formatTime('yourformname', 'yourfieldname');/>
*/
function formatTime (formName, fieldName) {
var form = window.document.forms[formName];
var input = form.elements[fieldName].value;
var re = new RegExp ('[0-9]{4}');
var hours;
var minutes;
var formattedInput;
var msgError = "An Error Has Occured.\n\n" +
"What are the causes ?\n\n" +
"1. YOU DIDN'T ENTER THE MINUTES:\n" +
" For example:\n" +
" a. If you are about to enter 09:00, please enter: 0900.\n" +
" b. If your are about to enter 19:00, please enter only: 1900.\n" +
" It will be formated automatically.\n\n" +
"2. YOU HAVE ENTERED A NON NUMERICAL VALUE: abc, a dot(.) sign, or a colon ( : ) sign\n\n" +
"3. YOU MIGHT HAVE ACCIDENTALLY ENTERED TOO MANY ZERO(0)";
var matchInput = input.search(re);
if (matchInput == -1 && input != "") {
alert(msgError);
form.elements[fieldName].focus();
return false;
} else if (matchInput != -1) {
hours = input.substring(0, 2);
minutes = input.substring(2);
//checkHours, checkMinutes, and AMPM before being stored in the variable
formattedInput = checkHours(hours, formName, fieldName) + ":" + checkMinutes(minutes, formName, fieldName) + " " + AMPM(hours, formName, fieldName);
form.elements[fieldName].value = formattedInput;
return false;
}
return true;
}
/**
* @author: christian_phpbeginner
* @method name : AMPM
* @param : h, formName, fieldName. h = hours
* @description :
* Function to decide whether it's AM or PM
* @see :
* This function should be combined with formatTime(), checkHours(), checkMinutes()
* @how-to :
* 1. Specify the hours, formName and fieldName in the parameter
* 2. Always include the function formatTime(), checkHours(), and checkMinutes()
* @example :
* 1. In HTML Code: <input type="text" onblur = "javascript:AMPM('hourVariable', 'yourformname', 'yourfieldname');/>
* 2. Within another function: Please see function formatTime()
*/
function AMPM(h, formName, fieldName) {
var form = window.document.forms[formName];
if (h <= 12 && h >= 0){
return "AM";
} else if (h >= 12 && h <= 24) {
return "PM";
} else if (h < 0) {
alert("AMPM ERROR: Can't decide AM or PM !!\n\nReason:\n\nThere are no clock less than 0, please re-enter !!");
form.elements[fieldName].focus();
return form.elements[fieldName].value = "";
} else if (h > 24) {
alert("AMPM ERROR: Can't decide AM or PM !!\n\nReason:\n\nThere are no clock more than 24, please re-enter !!");
form.elements[fieldName].focus();
return form.elements[fieldName].value = "";
}
return false;
}
/**
* @author: christian_phpbeginner
* @method name : checkHours
* @param : h, formName, fieldName. h = hours
* @description :
* Function to validates hour in order to prevent the hour more than 24, and not less than 0
* @see :
* This function should be combined with AMPM(), formatTime(), checkMinutes()
* @how-to :
* 1. Specify the hours, formName and fieldName in the parameter
* 2. Always include the function AMPM(), formatTime(), and checkMinutes()
* @example :
* 1. In HTML Code: <input type="text" onblur = "javascript:checkHours('hourVariables', 'yourformname', 'yourfieldname');/>
* 2. Within another function: Please see function formatTime()
*/
function checkHours(h, formName, fieldName) {
var form = window.document.forms[formName];
if (h < 0) {
alert("HOURS ERROR: Can't entry value !\n\nReason:\n\nThere are no clock less than 0, please re-enter !!");
form.elements[fieldName].focus();
return form.elements[fieldName].value = "";
} else if (h > 24) {
alert("HOURS-ERROR: Can't entry value !\n\nReason:\n\nThere are no hours more than 24, please re-enter !!");
form.elements[fieldName].focus();
return form.elements[fieldName].value = "";
} else if (h == 24) {
return h = "00";
} else {
return h;
}
}
/**
* @author: christian_phpbeginner
* @method name : checkMinutes
* @param : m, formName, fieldName. m = minutes
* @description :
* Function to validates minutes in order to prevent the minutes more than 60, and not less than 0
* @see :
* This function should be combined with AMPM(), formatTime(), checkHours()
* @how-to :
* 1. Specify the minutes, formName and fieldName in the parameter
* 2. Always include the function AMPM(), formatTime(), and checkHours()
* @example :
* 1. In HTML code:
* <input type="text" NAME = "txtExample" onblur = "javascript:checkMinutes('minutesVariable', 'yourformname', 'txtExample');/>
* 2. Within another function: Please see function formatTime() for an example
*/
function checkMinutes(m, formName, fieldName) {
var form = window.document.forms[formName];
if (m > 60) {
alert("MINUTES-ERROR: Can't entry value !\n\nReason:\n\nThere are no minutes more than 60, please re-enter!!");
form.elements[fieldName].focus();
return form.elements[fieldName].value = "";
} else if (m < 0) {
alert ("MINUTES-ERROR: Can't entry value !\n\nReason:\n\nThere are no minutes less than 0, please re-enter!!");
form.elements[fieldName].focus();
return form.elements[fieldName].value = "";
} else if (m == "") {
alert ("MINUTES-ERROR: Can't find value !\n\nReason:\n\No minutes has been entered!!");
form.elements[fieldName].focus();
return form.elements[fieldName].value = "";
} else if (m == "000" || m == "0000" || m == "00000" || m == "000000") {
alert ("MINUTES-ERROR: Can't entry value !\n\nReason:\n\You might have accidentally entered too many ZEROs(0). Please enter only two ZEROs(0)!!");
form.elements[fieldName].focus();
return form.elements[fieldName].value = "";
} else {
return m;
}
}