เมธอด stepUp() ของ HTML DOM Input DatetimeLocal

เมธอด stepUp() ของ HTML DOM Input DatetimeLocal ใช้สำหรับเพิ่มค่าของช่อง datetime-local ตามจำนวนนาทีที่ระบุ (ค่าเริ่มต้นคือ 1 นาที)

ไวยากรณ์ (Syntax)

การเรียกใช้เมธอด stepUp

inputDatetimeLocalObject.stepUp(number)

พารามิเตอร์: number - จำนวนนาทีที่ต้องการเพิ่ม (ค่าเริ่มต้น = 1)

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการเพิ่มเวลา 10 นาที และ 25 นาที:

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal stepUp()</title>
<style>
  form { width:70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin:5px; }
  input[type="button"] { border-radius: 10px; }
</style>
</head>
<body>
<form>
  <fieldset>
    <legend>Datetime-Local-stepUp()</legend>
    <label for="datetimeLocalSelect">Local Date Time : <input type="datetime-local" id="datetimeLocalSelect" value="2010-12-21T23:50"> </label>
    <input type="button" onclick="changeStep(10)" value="Increase by 10">
    <input type="button" onclick="changeStep(25)" value="Increase by 25">
    <div id="divDisplay"></div>
  </fieldset>
</form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
  function changeStep(myStepUp) {
    inputDatetimeLocal.stepUp(myStepUp);
    divDisplay.textContent = 'Current Step: ' + myStepUp;
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนคลิกปุ่ม: แสดงเวลา 23:50 คลิก Increase by 10: เวลาเปลี่ยนเป็น 00:00 (วันถัดไป) คลิก Increase by 25: เวลาเพิ่มขึ้นอีก 25 นาทีจากเวลาปัจจุบัน

การทำงาน: stepUp() จะเพิ่มค่าตามแอตทริบิวต์ step ที่ตั้งไว้ (ค่าเริ่มต้น 1 นาที) คูณกับจำนวนที่ส่งเข้าไป