โจทย์ของวันนี้คือ ผู้ใช้ต้องการเลือกวันเริ่ม และให้โปรแกรมมันคำนวนวันสิ้นสุดให้อัตโนมัติ ไม่ต้องมากดเลือกเอง ซึ่งในระบบเป็นวันที่ผู้ป่วยเข้ารักษาในระบบ Home Isolation, Community Isolation (HI/CI) ที่ต้องคำนวนวันที่รักษาและวันกักตัว รวมกัน 10 วัน นับจากวันที่ผลตรวจ ATK หรือ RT-PCR เป็น Positive
ซึ่งลักษณะการ “คำนวนวันที่” นั้นก็มีใช้อยู่ในระบบอื่น ๆ ยกตัวอย่างเช่น ระบบ booking ของโรงแรม ที่อาจจะกำหนดให้จองขั้นต่ำ 2 วัน เป็นต้น ซึ่งก็มีอยู่ด้วยกันหลายวิธี ไม่ว่าจะไปเพิ่มในฝั่ง front-end, back-end, database ก็ทำได้เหมือนกัน ซึ่งในที่นี้จะยกตัวอย่างของ Javascript เนื่องจากง่ายและเห็นผลลัพท์ในทันที
HTML
ตัวอย่าง input date ง่าย ๆ มีวันที่ start date และ end date
<h1>Increase 10 days from start date</h1>
<label for="startDate">Start Date</label>
<input type="date" name="startDate" id="startDate">
<label for="endDate">End Date</label>
<input type="date" name="endDate" id="endDate">
JavaScript
เก็บค่า start date และ setDate โดยบวกวันที่ start ไป 10 วัน และเซ็ตค่า endDate ซึ่งตัว endDate มันจะแสดงผลแบบ “2022-04-11T00:00:00.000Z" เลยนะ ให้เติม toISOString() เพื่อเปลี่ยนจาก date object เป็น string จากนั้นเอาไป spilt หรือแบ่งด้วย “T” เพื่อตัดเอามาแต่วันที่ โดยกำหนด array key [0] เข้าไปต่อท้าย เท่านี้เราก็จะได้วันที่ในรูปแบบ "YYYY-MM-DD"
// 10 day increment
let increment = 10;
// Set End Date
let date_start = document.getElementById("startDate");
date_start.addEventListener("change", () => {
let startDate = new Date(date_start.value);
let endDate = new Date(startDate.setDate(startDate.getDate() + increment));
document.getElementById("endDate").value = endDate
.toISOString()
.split("T")[0];
});Result
มาดูผลลัพท์กันเลย
ส่งท้าย
ไปดูตัวอย่างกันใน Codepen https://codepen.io/MoreMeng/pen/NWXMvvJ
