Computer >> Máy Tính >  >> Lập trình >> Javascript

Đối tượng ngày trong JavaScript:Cách so sánh ngày

Một điều chúng ta có thể làm khi giải quyết các vấn đề về mã hóa là sử dụng Đối tượng Ngày để so sánh ngày và giờ để hiển thị một cách có điều kiện một số logic nhất định trong mã của chúng ta. Bài viết này xem xét cách sử dụng Đối tượng Ngày để so sánh hai ngày để xem ngày nào là ngày muộn hơn (hoặc sớm hơn).

Thiết lập

JavaScript có Đối tượng ngày được tích hợp sẵn mà chúng ta có thể sử dụng để truy cập các phương pháp có thể hỗ trợ chúng ta thực hiện logic dựa trên dấu thời gian. Để thiết lập điều này, hãy khởi tạo Ngày mới bằng cách mã hóa như sau:

const date = new Date("09-20-2020"); //2020-09-20T07:00:00.000Z

Nếu bạn nhập console.log(date) , thời gian (chuỗi con sau chữ T) sẽ khác nhau tùy theo nơi bạn sống theo mặc định. Nếu bạn muốn làm việc với thời gian UTC, hãy xóa Z và thêm +HH:MM hoặc -HH:MM thay thế.

Biết cách thiết lập điều này rất quan trọng khi chúng ta làm việc với hàm so sánh trong phần tiếp theo.

Tiếp theo, hãy xem các phương thức được cung cấp cho chúng ta khi sử dụng hàm tạo Ngày. Một trong những phương thức như vậy là getTime() . Chúng tôi sử dụng phương pháp này để thay đổi Đối tượng Ngày của chúng tôi thành một số để có thể dễ dàng so sánh.

Phương pháp cụ thể này chuyển đổi ngày thành số mili giây kể từ khi kỷ nguyên bắt đầu (kỷ nguyên bắt đầu vào ngày 1 tháng 1 năm 1970). Đây là phương pháp getTime của chúng tôi:

const date = new Date("09-20-2020")
   date.getTime(); //1600585200000

Vì ngày được khởi tạo dưới dạng một Đối tượng Ngày mới, chúng ta có thể sử dụng ký hiệu dấu chấm để truy cập vào hàm getTime.

Tôi khuyên bạn nên kiểm tra tài liệu về tất cả các loại phương pháp khác nhau mà bạn có thể sử dụng trên Đối tượng Ngày cho logic của mình. Bây giờ chúng tôi đã sẵn sàng để giải quyết lời nhắc của mình.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Lời nhắc

Cho trước hai chuỗi và một toán tử so sánh, trả về một ngày là ngày nhỏ nhất hoặc lớn nhất phụ thuộc vào toán tử đã cho. Nó được đảm bảo rằng hai chuỗi được truyền vào có thể được chuyển đổi thành một Đối tượng Ngày.

Các bước giải quyết

  1. Thay đổi hai chuỗi thành Đối tượng Ngày mới. Đừng quên tìm hiểu cách chuyển các tham số vào hàm tạo Ngày của bạn!
  2. Sử dụng getTime() để tạo một số mili giây đã trôi qua kể từ ngày 1 tháng 1 năm 1970.
  3. Sử dụng câu lệnh có điều kiện hoặc số ba để tìm ra ngày cần thiết như được chỉ ra bởi toán tử so sánh đã chuyển.
  4. Chuyển đổi mili giây thành chuỗi ngày có thể đọc được và trả lại.

Hãy cố gắng tự giải quyết nó trước khi tham khảo giải pháp! 

<!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"> &lt; </label>
      <input name="compare" type="radio" id="more" checked value=""/>
          <label for="more"> &gt;= </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>

Ngày trong JavaScript thoạt đầu có thể gây nhầm lẫn, nhưng với một chút thực hành, bạn sẽ hiểu được ngày tháng ngay lập tức. Ở đây, chúng ta đã xem xét cách thiết lập một ngày mới trong JavaScript và truy cập một phương thức trên phương thức khởi tạo của nó. Chúng tôi cũng đã xem xét cách so sánh hai ngày để xem ngày nào lớn nhất hoặc ít nhất tùy thuộc vào toán tử được chuyển vào hàm.

Khi bạn đã xử lý được vấn đề này, tôi khuyên bạn nên xem cách sắp xếp một mảng các mục theo ngày chúng được thêm vào mảng, tăng dần hoặc giảm dần. Hãy vui vẻ và giữ nó!