02.<html>
03.<head>
04.<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
05.<title>jQuery Time Entry</title>
06. <meta name="Generator" content="EditPlus">
07. <meta name="Author" content="Unidentifier-thaicreate.com">
08. <meta name="Keywords" content="">
09. <meta name="Description" content="">
10. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
11.<style type="text/css">
12.@import "jquery.timeentry.css";
13.</style>
14.<script type="text/javascript" src="jquery-1.7.2.js"></script>
15.<script type="text/javascript" src="jquery.timeentry.js"></script>
16.<script type="text/javascript">
17.$(function () {
18. $('#defaultEntry').timeEntry();
19. $('#defaultEntry').change(function(){
20. var rawTime = $(this).val();
21. var period = rawTime.substr(5,2);
22. var onlyTime = rawTime.substr(0,5);
23. var times = onlyTime.split(":");
24. if(period == "PM")
25. times[0] = parseInt(times[0])+parseInt(12);
26. $("#24hrs").val(times[0]+":"+times[1]);
27. });
28.});
29.</script>
30.</head>
31.<body>
32.<p>สามารถใช้ arrow key up/down เพื่อเพิ่มหรือลดเวลาได้</p>
33.<p>สามารถใช้ arrow key left/right เพื่อเลื่อนไปตำแหน่งก่อนหน้าหรือถัดไปได้</p>
34.<p>กรุณาป้อนเวลา: <input type="text" id="defaultEntry" size="10"></p>
35.<p>ดัดแปลงเวลาแบบ AM/PM ให้เป็น 24 ชม. <input type="text" id="24hrs" size="10" readonly="readonly" /></p>
36.</body>
37.</html>
