Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

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

คุณสมบัติ max ของ HTML DOM Input DatetimeLocal ใช้สำหรับดึงหรือกำหนดค่าแอตทริบิวต์ max (ค่าสูงสุด) ของช่องกรอกวันที่และเวลาในท้องถิ่น

ไวยากรณ์ (Syntax)

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

inputDatetimeLocalObject.max

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

inputDatetimeLocalObject.max = YYYY-MM-DDThh:mm:ss

รูปแบบค่า String (String Values)

ส่วนคำอธิบาย
YYYYปี (เช่น 2006)
MMเดือน (เช่น 06 สำหรับเดือนมิถุนายน)
DDวัน (เช่น 17)
Tตัวคั่นระหว่างวันที่และเวลา
hhชั่วโมง (เช่น 02)
mmนาที (เช่น 21)
ssวินาที (เช่น 40)

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

ตัวอย่างด้านล่างแสดงการต่ออายุประกันภัยโดยการเปลี่ยนค่า max และอัปเดตค่า value ให้เท่ากับ max ใหม่:

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal max</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-max</legend>
    <label for="datetimeLocalSelect">Insurance Expiration: <input type="datetime-local" id="datetimeLocalSelect" value="2019-07-01T23:59:59" max="2019-08-01T23:59:59" disabled> </label>
    <input type="button" onclick="renewInsurance()" value="Renew Insurance">
    <div id="divDisplay"></div>
  </fieldset>
</form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
  function renewInsurance() {
    inputDatetimeLocal.max = '2029-07-01T23:59:59';
    inputDatetimeLocal.value = inputDatetimeLocal.max;
    divDisplay.textContent = 'Renewed Insurance: ' + inputDatetimeLocal.value;
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนคลิกปุ่ม: ช่อง datetime-local ถูก disabled แสดงวันหมดอายุเดิม หลังคลิกปุ่ม Renew Insurance: max ถูกเปลี่ยนเป็น 10 ปีข้างหน้า และ value ก็อัปเดตตามไปด้วย