Hướng dẫn code html thời gian
Phần template của ứng dụng các bạn có thể tham khảo tại đây : https://github.com/buihien0109/calendar-javascript/tree/master/calendar-start Show Các bạn có thể quan sát thấy, ứng dụng của chúng ta bao gồm 1 số chức năng như sau :
Bây giờ thì cùng bắt đầu triển thôi nào 😁 Hiển thị tháng và nămCông việc đầu tiên mình sẽ làm là hiển thị tháng và năm, cái nào đơn giản thì mình làm trước vậy ^^ Mặc định thì khi vào vừa trang thì mình sẽ hiển thị tháng và năm tại thời điển hiện tại
Ở trên mình có truy cập vào nơi hiển thị tháng và năm trên giao diện và lưu vào 2 biến monthEle và yearEle. Để về sau, khi chúng ta có dữ liệu về tháng và năm thì dựa vào 2 biến này để hiển thị lên trên giao diện currentMonth, currentYear là 2 biến lưu trữ thông tin về tháng và năm hiện tại. Có 1 lưu ý rằng currentMonth hiện tại đang có giá trị từ 0 -> 11 (sử dụng getMonth()) nhưng điều mình mong muốn là hiển thị tháng theo tên tiếng anh (ví dụ : January, February, ...)
Tiếp theo trong function displayInfo() mình sẽ hiển thị tháng và năm hiện tại ra ngoài giao diện Đối với việc hiển thị năm thì không có gì để bàn rồi, nhưng riêng đối với tháng thì có hơi khác 1 chút, chúng ta cần phải convert tháng hiện tại từ number -> date string. Rất may là Javascript có sẵn phương thức toLocaleString() để giúp chúng ta có thể làm điều này Ngoài ra, nếu các bạn không muốn sử dụng build-in method toLocaleString(), thì có thể sử dụng switch - case để thay thế
Để hiển thị được thì cần gọi function displayInfo(). Ở đây mình lắng nghe sự kiện onload() để gọi function này Và đây là kết quả ban đầu của chúng ta Hiển thị số ngày trong tháng
Function getDaysInMonth() giúp chúng ta có thể lấy được số ngày trong tháng currentMonth Tiếp theo mình định nghĩa function renderDate(), function này có tác dụng hiển thị danh sách ngày lên trên giao diện
Đầu tiên để biết tháng hiện tại có bao nhiêu ngày, chúng ta gọi function getDaysInMonth() vừa định nghĩa ở trên và lưu giá trị và biến daysInMonth
Vì mình có fix cứng code HTML trong giao diện ban đầu để có bạn có thể quan sát xem số ngày trong tháng được hiển thị như thế nào. Nhưng bây giờ chúng ta cần phải hiển thị linh động số ngày theo tháng hiện tại (currentMonth), nên trước khi render, chúng ta cần clear hết nội dung html fix cứng trước đó để chuẩn bị render nội dung mới
|