วันจันทร์ที่ ๒๐ กรกฎาคม พ.ศ. ๒๕๕๒

javascript กำหนด textbox ให้รับค่า time (hh:mm)

สมมติผมมี textbox id="txtTime" และต้องการให้ user สามารถคืย์ข้อมูลเฉพาะเวลา โดยให้ format = hh:mm (23:59) ครับ
ก่อนอื่นก็ต้อง register event handler ให้กับ textbox ก่อน


$(function() {
$("#txtTime").keypress(function(e) {txtTime_OnKeyPress(this,e)});
$("#txtTime").blur(function() { ValidateTime(this) });
});


จะเห็นว่าผมสร้าง function สำหรับจัดการ keypress event กับ blur event ให้ textbox ครับ สำหรับ txtTime_OnKeyPress สำหรับกำหนดให้ user สามารถคีย์เฉพาะ d(2).d(2) คือตัวเลขสองตัว ตามด้วยจุดและตัวเลขอีกสองตัว ส่วน ValidateTime สำหรับตรวจสอบว่าค่าที่คีย์ตรงกับ format ที่ต้องการหรือเปล่า


function txtTime_OnKeyPress(sender, e) {
var myTime = sender.value;
if(myTime.length>4) {
event.keyCode = 0;
return false;
}
var charCode = (e.which) ? e.which : e.keyCode
switch (myTime.length) {
case 0:
if (charCode < 48 || charCode > 50) event.keyCode = 0;
break;
case 1:
if (charCode<48||(myTime == 2&&charCode > 51)) event.keyCode = 0;
break;
case 2:
if (charCode != 46) event.keyCode = 0;
break;
case 3:
if (charCode<48||charCode > 53) event.keyCode = 0;
break;
default:
if (charCode < 48 || charCode > 57) event.keyCode = 0;
}
}

function ValidateTime(sender) {
if (sender.value.length == 0) return false;
var regEx = /^(\d{2}).(\d{2})$/;
var arrMatch = sender.value.match(regEx);
if (arrMatch == null) {
alert("Invalid time.");
sender.value = "";
return false;
}
var hh = arrMatch[1];
var mm = arrMatch[2];
if (hh >= 24 || mm >= 60) {
alert("Invalid time.");
sender.value = "";
return false;
}
return true;
}


ทดสอบกับ IE ได้ผล OK ครับ ใครจะนำไปใช้ก็ทดสอบกันก่อนนะ ว่างๆผมจะมาแก้ function ให้สามารถกำหนด format ของเวลาได้ เผื่อบางทีต้องใช้แบบ 11:59 A.M. แต่ตอนนี้ใช้แค่นี้ก่อนละกันครับ

1 ความคิดเห็น:

oO Nuch Oo กล่าวว่า...

เรื่องเวลาเนี่ย สุดยอดค่ะ เจอปัญหาบ่อยมาก แต่ก็พอทีวิธีแก้ อย่างฮา ว่าแล้ว program ไม่ได้ผิด user เองไม่ผิด ทดสอบ แล้ว ทดสอบอีก ก้อว่า โอ แล้ว ..