สิ่งหนึ่งที่เราสามารถทำได้เมื่อแก้ปัญหาการเข้ารหัสคือใช้ Date Object เพื่อเปรียบเทียบวันที่และเวลาเพื่อแสดงตรรกะบางอย่างในโค้ดของเราตามเงื่อนไข บทความนี้กล่าวถึงวิธีใช้ออบเจ็กต์วันที่เพื่อเปรียบเทียบวันที่สองวันเพื่อดูว่าวันใดเป็นวันที่หลัง (หรือก่อนหน้า)
การตั้งค่า
JavaScript มีอ็อบเจ็กต์วันที่ในตัวที่เราสามารถใช้เพื่อเข้าถึงเมธอดที่สามารถช่วยเราทำตรรกะตามการประทับเวลาได้ ในการตั้งค่านี้ ให้สร้างอินสแตนซ์ Date ใหม่โดยเข้ารหัสข้อมูลต่อไปนี้:
const date = new Date("09-20-2020"); //2020-09-20T07:00:00.000Z
หากคุณต้องป้อน console.log(date) เวลา (สตริงย่อยหลัง T) จะแตกต่างกันไปตามสถานที่ที่คุณอาศัยอยู่โดยค่าเริ่มต้น หากคุณต้องการทำงานกับเวลา UTC ให้ลบ Z และเพิ่ม +HH:MM หรือ -HH:MM แทนที่.
การทราบวิธีตั้งค่านี้มีความสำคัญเมื่อเราใช้งานฟังก์ชันเปรียบเทียบในหัวข้อถัดไป
ต่อไป ให้ดูวิธีการที่ให้เราเมื่อใช้ตัวสร้างวันที่ วิธีหนึ่งคือ getTime() . เราใช้วิธีนี้เพื่อเปลี่ยน Date Object เป็นตัวเลขเพื่อให้สามารถเปรียบเทียบได้ง่าย
วิธีการเฉพาะนี้จะแปลงวันที่เป็นจำนวนมิลลิวินาทีนับตั้งแต่ยุคเริ่มต้น (ยุคเริ่มต้นเมื่อวันที่ 1 มกราคม 1970) นี่คือวิธี getTime ของเรา:
const date = new Date("09-20-2020")
date.getTime(); //1600585200000
เนื่องจากวันที่สร้างอินสแตนซ์เป็นวัตถุวันที่ใหม่ เราจึงสามารถใช้เครื่องหมายจุดเพื่อเข้าถึงฟังก์ชัน getTime
ฉันแนะนำให้ตรวจสอบเอกสารสำหรับวิธีการประเภทต่างๆ ทั้งหมดที่คุณสามารถใช้บนออบเจ็กต์วันที่สำหรับตรรกะของคุณ ตอนนี้เราพร้อมแล้วที่จะจัดการกับความต้องการของเรา
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
พร้อมรับคำ
ระบุสองสตริงและตัวดำเนินการเปรียบเทียบ ให้ส่งกลับวันที่ที่น้อยที่สุดหรือมากที่สุดขึ้นอยู่กับตัวดำเนินการที่ให้มา รับประกันได้ว่าสตริงที่ส่งผ่านทั้งสองสายสามารถเปลี่ยนเป็น Date Object ได้
ขั้นตอนในการแก้ปัญหา
- เปลี่ยนสตริงทั้งสองเป็น Date Objects ใหม่ อย่าลืมตรวจสอบวิธีส่งพารามิเตอร์ไปยังตัวสร้างวันที่ของคุณ!
- ใช้
getTime()วิธีสร้างจำนวนมิลลิวินาทีที่ผ่านไปตั้งแต่วันที่ 1 มกราคม 1970 - ใช้คำสั่งแบบมีเงื่อนไขหรือ ternary เพื่อหาวันที่ที่ต้องการตามที่ระบุโดยตัวดำเนินการเปรียบเทียบที่ส่งผ่าน
- แปลงมิลลิวินาทีเป็นสตริงวันที่ที่อ่านได้และส่งคืน
พยายามแก้ปัญหาด้วยตัวเองก่อนที่จะอ้างอิงถึงวิธีแก้ปัญหา!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: 'Roboto', Courier, monospace
}
</style>
</head>
<body>
<h1>Date Comparison</h1>
<label for="comparison">Comparison (Choose One)</label>
<div id="comparison" value="more.value">
<input name="compare" type="radio" id="less" value=""/>
<label for="less"> < </label>
<input name="compare" type="radio" id="more" checked value=""/>
<label for="more"> >= </label>
</div>
<br/>
<label for="date-1">Date 1:</label>
<input id="date-1" value="" type="date" name="date1" />
<label for="date-2">Date 2:</label>
<input id="date-2" value="" type="date" name="date2" />
<input id="submit-button" type="submit" />
<div id="demo"></div>
<script>
const handleSubmit = (date1, date2, compare) => {
//to compare : getTime of each date
date1Arr = date1.split("-");
date2Arr = date2.split("-");
//year, month (month is zero-based), day
let d1 = new Date(date1Arr[0], date1Arr[1] - 1, date1Arr[2]).getTime();
let d2 = new Date(date2Arr[0], date2Arr[1] - 1, date2Arr[2]).getTime();
// getTime gets the number of milliseconds since Jan 1 1970. So the higher the number, the later the date.
//use conditional or ternary to return Comparison
let timeDisplay;
if(compare === ">=") {
timeDisplay = d1 >= d2 ? d1 : d2;
} else {
timeDisplay = d1 < d2 ? d1 : d2;
}
let timetoDisplay = new Date(timeDisplay);
document.getElementById("demo").innerHTML = timetoDisplay.toDateString();
}
let date_1 = document.getElementById("date-1");
let date_2 = document.getElementById("date-2");
document.getElementById("submit-button").addEventListener("click", (e) => handleSubmit(date_1.value, date_2.value, more.checked ? '>=' : '<'))
</script>
</body>
</html>
วันที่ใน JavaScript อาจสร้างความสับสนในตอนแรก แต่ด้วยการฝึกฝนเพียงเล็กน้อย คุณจะได้รับมันในเวลาไม่นาน ที่นี่ เราได้ดูวิธีตั้งค่าวันที่ใหม่ใน JavaScript และเข้าถึงวิธีการบนตัวสร้าง นอกจากนี้เรายังได้ดูวิธีเปรียบเทียบวันที่สองวันเพื่อดูว่าวันใดมีค่ามากที่สุดหรือน้อยที่สุดโดยขึ้นอยู่กับโอเปอเรเตอร์ที่ส่งผ่านไปยังฟังก์ชัน
เมื่อคุณเข้าใจสิ่งนี้แล้ว ฉันขอแนะนำให้ดูวิธีจัดเรียงอาร์เรย์ของรายการตามวันที่ที่เพิ่มลงในอาร์เรย์ จากน้อยไปมากหรือมากไปหาน้อย ขอให้สนุกและทำมันต่อไป!
