คุณสมบัติ step ของ HTML DOM Input DatetimeLocal

คุณสมบัติ step ของ HTML DOM Input DatetimeLocal ใช้สำหรับกำหนดช่วงเวลาที่ถูกต้อง (legal intervals) สำหรับวินาทีหรือมิลลิวินาทีในช่อง datetime-local

ไวยากรณ์ (Syntax)

การดึงค่า (คืนค่า number)

inputDatetimeLocalObject.step

การกำหนดค่า step

inputDatetimeLocalObject.step = number

พารามิเตอร์ number (Parameters)

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

ตัวอย่างด้านล่างแสดงการเปลี่ยนค่า step ระหว่างวินาทีและมิลลิวินาที:

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal step</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-step</legend>
    <label for="datetimeLocalSelect">Local Date Time : <input type="datetime-local" id="datetimeLocalSelect" step="2"> </label>
    <input type="button" onclick="changeStep('10')" value="Step Seconds to 10">
    <input type="button" onclick="changeStep('.10')" value="Step milliseconds to .10">
    <div id="divDisplay"></div>
  </fieldset>
</form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
  function changeStep(myStep) {
    inputDatetimeLocal.step = myStep;
    if(inputDatetimeLocal.step.indexOf('.') === -1)
      divDisplay.textContent = 'Seconds step: ' + inputDatetimeLocal.step;
    else
      divDisplay.textContent = 'Milli-seconds step: ' + inputDatetimeLocal.step;
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

คลิกปุ่ม Step Seconds to 10: step = 10 วินาที (เลือกได้ทุก 10 วินาที) คลิกปุ่ม Step milliseconds to .10: step = .10 มิลลิวินาที (เลือกได้ทุก 0.1 วินาที)

ประโยชน์: ควบคุมความละเอียดของการเลือกเวลา เช่น ต้องการให้เลือกได้เฉพาะทุก 15 นาที ตั้ง step = 900 (15*60 วินาที)