Hướng dẫn get am/pm from date javascript - nhận sáng / chiều từ ngày javascript

Hy vọng rằng câu trả lời này dễ đọc hơn một chút so với các câu trả lời khác (đặc biệt là đối với những người mới đến).

Đây là giải pháp tôi đã triển khai trong một số trang web của tôi để thông báo lần cuối cùng mã trang web được sửa đổi. Nó thực hiện thời gian AM/pm thông qua tham số options của date.toLocaleDateString (xem tài liệu Mozilla liên quan).

// Last time page code was updated/changed
const options = {
    year: "numeric",
    month: "long",
    weekday: "long",
    day: "numeric",
    hour: "numeric",
    minute: "numeric",
    second: "numeric",
    hour12: true // This is the line of code we care about here
    /*
        false: displays 24hs format for time
        true: displays 12, AM and PM format
    */
};

let last = document.lastModified;
let date = new Date(last);
let local = date.toLocaleDateString("en-US", options);
let fullDate = `${local}`;
document.getElementById("updated").textContent = fullDate;

Đầu ra nào ở định dạng:

Saturday, May 28, 2022, 8:38:50 PM

Đầu ra này sau đó được hiển thị trong mã HTML sau:

Last update: _update_date_goes_here

Lưu ý: Trong trường hợp sử dụng này, document.lastModified có một số hành vi kỳ lạ tùy thuộc vào việc chạy cục bộ hay trên máy chủ bên ngoài (xem câu hỏi tràn ngăn xếp này). Mặc dù nó hoạt động chính xác khi tôi chạy nó trong trang GitHub của tôi (bạn sẽ thấy nó hoạt động trong trang web ở chân trang).

Định dạng thời gian để am pm javascript với các ví dụ mã

Trong bài đăng này, chúng tôi sẽ kiểm tra cách giải quyết thời gian định dạng để AM JavaScript vấn đề bằng cách sử dụng các ví dụ từ ngôn ngữ lập trình.

const formatAMPM = (date) => {
  let hours = date.getHours();
  let minutes = date.getMinutes();    
  const ampm = hours >= 12 ? 'pm' : 'am';

  hours %= 12;
  hours = hours || 12;    
  minutes = minutes < 10 ? `0${minutes}` : minutes;

  const strTime = `${hours}:${minutes} ${ampm}`;

  return strTime;
};

console.log(formatAMPM(new Date()));

Dòng mã sau đây phác thảo các phương pháp khác nhau có thể được sử dụng để tìm giải pháp cho thời gian định dạng cho AM JavaScript vấn đề.

var suffix = hour >= 12 ? "PM":"AM";
var hours = ((hour + 11) % 12 + 1) + suffix

Sử dụng nhiều ví dụ, chúng tôi đã học được cách giải quyết thời gian định dạng để giải JavaScript.

Xem thảo luận

Cải thiện bài viết

Lưu bài viết

  • Đọc
  • Bàn luận
  • Xem thảo luận

    Cải thiện bài viết

    Lưu bài viết

    Đọc

    Bàn luận
    In this approach, we will change the DateTime format by only using native methods. Simply put, we will apply modulo “%” operator to find the hour in 12-hour format and use conditional “?:” operator to apply “AM” or “PM”.

    Program:

    Saturday, May 28, 2022, 8:38:50 PM
    
    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    1
    Saturday, May 28, 2022, 8:38:50 PM
    
    2

    JavaScript sử dụng định dạng 24 giờ làm mặc định cho DateTime. Tuy nhiên, ban ngày trong JavaScript có thể được hiển thị ở định dạng 12 giờ AM/PM bằng cách sử dụng một số phương pháp. Chúng tôi sẽ xem xét một cặp vợ chồng trong bài viết này.

    Saturday, May 28, 2022, 8:38:50 PM
    
    6
    Saturday, May 28, 2022, 8:38:50 PM
    
    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    8
    Saturday, May 28, 2022, 8:38:50 PM
    
    2

    Cách tiếp cận 1: Theo cách tiếp cận này, chúng tôi sẽ thay đổi định dạng DateTime bằng cách chỉ sử dụng các phương thức gốc. Nói một cách đơn giản, chúng tôi sẽ áp dụng nhà điều hành modulo,%, để tìm giờ ở định dạng 12 giờ và sử dụng điều kiện?

    Last update: _update_date_goes_here

    7

    Last update: _update_date_goes_here

    8

    Last update: _update_date_goes_here

    9
    const formatAMPM = (date) => {
      let hours = date.getHours();
      let minutes = date.getMinutes();    
      const ampm = hours >= 12 ? 'pm' : 'am';
    
      hours %= 12;
      hours = hours || 12;    
      minutes = minutes < 10 ? `0${minutes}` : minutes;
    
      const strTime = `${hours}:${minutes} ${ampm}`;
    
      return strTime;
    };
    
    console.log(formatAMPM(new Date()));
    
    0

    Last update: _update_date_goes_here

    2
    Saturday, May 28, 2022, 8:38:50 PM
    
    2

    Last update: _update_date_goes_here

    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    0
    const formatAMPM = (date) => {
      let hours = date.getHours();
      let minutes = date.getMinutes();    
      const ampm = hours >= 12 ? 'pm' : 'am';
    
      hours %= 12;
      hours = hours || 12;    
      minutes = minutes < 10 ? `0${minutes}` : minutes;
    
      const strTime = `${hours}:${minutes} ${ampm}`;
    
      return strTime;
    };
    
    console.log(formatAMPM(new Date()));
    
    5
    Saturday, May 28, 2022, 8:38:50 PM
    
    2

    Last update: _update_date_goes_here

    7
    const formatAMPM = (date) => {
      let hours = date.getHours();
      let minutes = date.getMinutes();    
      const ampm = hours >= 12 ? 'pm' : 'am';
    
      hours %= 12;
      hours = hours || 12;    
      minutes = minutes < 10 ? `0${minutes}` : minutes;
    
      const strTime = `${hours}:${minutes} ${ampm}`;
    
      return strTime;
    };
    
    console.log(formatAMPM(new Date()));
    
    8

    Last update: _update_date_goes_here

    7
    var suffix = hour >= 12 ? "PM":"AM";
    var hours = ((hour + 11) % 12 + 1) + suffix
    0

    Last update: _update_date_goes_here

    9
    const formatAMPM = (date) => {
      let hours = date.getHours();
      let minutes = date.getMinutes();    
      const ampm = hours >= 12 ? 'pm' : 'am';
    
      hours %= 12;
      hours = hours || 12;    
      minutes = minutes < 10 ? `0${minutes}` : minutes;
    
      const strTime = `${hours}:${minutes} ${ampm}`;
    
      return strTime;
    };
    
    console.log(formatAMPM(new Date()));
    
    0
    const formatAMPM = (date) => {
      let hours = date.getHours();
      let minutes = date.getMinutes();    
      const ampm = hours >= 12 ? 'pm' : 'am';
    
      hours %= 12;
      hours = hours || 12;    
      minutes = minutes < 10 ? `0${minutes}` : minutes;
    
      const strTime = `${hours}:${minutes} ${ampm}`;
    
      return strTime;
    };
    
    console.log(formatAMPM(new Date()));
    
    5
    Saturday, May 28, 2022, 8:38:50 PM
    
    2

    Last update: _update_date_goes_here

    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    0___

    Last update: _update_date_goes_here

    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    0
    dateObject.toLocaleString([locales[, options]])
    
    6
    Saturday, May 28, 2022, 8:38:50 PM
    
    2

    dateObject.toLocaleString([locales[, options]])
    
    8
    dateObject.toLocaleString([locales[, options]])
    
    9

    dateObject.toLocaleString([locales[, options]])
    
    8options1

    dateObject.toLocaleString([locales[, options]])
    
    8options3

    dateObject.toLocaleString([locales[, options]])
    
    8options5options6 options7

    options8options9

    dateObject.toLocaleString([locales[, options]])
    
    8date.toLocaleDateString1

    options8date.toLocaleDateString3

    dateObject.toLocaleString([locales[, options]])
    
    8date.toLocaleDateString5___

    dateObject.toLocaleString([locales[, options]])
    
    8document.lastModified1 date.toLocaleDateString77____83 document.lastModified4

    Last update: _update_date_goes_here

    0document.lastModified6

    Last update: _update_date_goes_here

    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    0document.lastModified9 0

    Last update: _update_date_goes_here

    42

    Last update: _update_date_goes_here

    75

    Last update: _update_date_goes_here

    9
    const formatAMPM = (date) => {
      let hours = date.getHours();
      let minutes = date.getMinutes();    
      const ampm = hours >= 12 ? 'pm' : 'am';
    
      hours %= 12;
      hours = hours || 12;    
      minutes = minutes < 10 ? `0${minutes}` : minutes;
    
      const strTime = `${hours}:${minutes} ${ampm}`;
    
      return strTime;
    };
    
    console.log(formatAMPM(new Date()));
    
    0document.lastModified9
    Saturday, May 28, 2022, 8:38:50 PM
    
    2

    Các

    Last update: _update_date_goes_here

    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    0
    dateObject.toLocaleString([locales[, options]])
    
    6
    Saturday, May 28, 2022, 8:38:50 PM
    
    2

    dateObject.toLocaleString([locales[, options]])
    
    8
    Saturday, May 28, 2022, 8:38:50 PM
    
    14

    dateObject.toLocaleString([locales[, options]])
    
    8
    Saturday, May 28, 2022, 8:38:50 PM
    
    16

    dateObject.toLocaleString([locales[, options]])
    
    8
    Saturday, May 28, 2022, 8:38:50 PM
    
    18

    options8options3

    options8

    Saturday, May 28, 2022, 8:38:50 PM
    
    22

    options8

    Saturday, May 28, 2022, 8:38:50 PM
    
    24

    options8

    Saturday, May 28, 2022, 8:38:50 PM
    
    26

    options8

    Saturday, May 28, 2022, 8:38:50 PM
    
    28

    options8

    Saturday, May 28, 2022, 8:38:50 PM
    
    30

    options8

    Saturday, May 28, 2022, 8:38:50 PM
    
    32

    options8

    Saturday, May 28, 2022, 8:38:50 PM
    
    34

    options8

    Saturday, May 28, 2022, 8:38:50 PM
    
    36

    options8

    Saturday, May 28, 2022, 8:38:50 PM
    
    38options6
    Saturday, May 28, 2022, 8:38:50 PM
    
    40

    options8

    Saturday, May 28, 2022, 8:38:50 PM
    
    42
    Saturday, May 28, 2022, 8:38:50 PM
    
    43
    Saturday, May 28, 2022, 8:38:50 PM
    
    44

    Saturday, May 28, 2022, 8:38:50 PM
    
    45document.lastModified3
    Saturday, May 28, 2022, 8:38:50 PM
    
    47

    dateObject.toLocaleString([locales[, options]])
    
    8
    Saturday, May 28, 2022, 8:38:50 PM
    
    49

    Last update: _update_date_goes_here

    0document.lastModified6

    Saturday, May 28, 2022, 8:38:50 PM
    
    52
    const formatAMPM = (date) => {
      let hours = date.getHours();
      let minutes = date.getMinutes();    
      const ampm = hours >= 12 ? 'pm' : 'am';
    
      hours %= 12;
      hours = hours || 12;    
      minutes = minutes < 10 ? `0${minutes}` : minutes;
    
      const strTime = `${hours}:${minutes} ${ampm}`;
    
      return strTime;
    };
    
    console.log(formatAMPM(new Date()));
    
    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    8
    Saturday, May 28, 2022, 8:38:50 PM
    
    2

    const formatAMPM = (date) => {
      let hours = date.getHours();
      let minutes = date.getMinutes();    
      const ampm = hours >= 12 ? 'pm' : 'am';
    
      hours %= 12;
      hours = hours || 12;    
      minutes = minutes < 10 ? `0${minutes}` : minutes;
    
      const strTime = `${hours}:${minutes} ${ampm}`;
    
      return strTime;
    };
    
    console.log(formatAMPM(new Date()));
    
    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    4
    Saturday, May 28, 2022, 8:38:50 PM
    
    2

    const formatAMPM = (date) => {
      let hours = date.getHours();
      let minutes = date.getMinutes();    
      const ampm = hours >= 12 ? 'pm' : 'am';
    
      hours %= 12;
      hours = hours || 12;    
      minutes = minutes < 10 ? `0${minutes}` : minutes;
    
      const strTime = `${hours}:${minutes} ${ampm}`;
    
      return strTime;
    };
    
    console.log(formatAMPM(new Date()));
    
    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    1
    Saturday, May 28, 2022, 8:38:50 PM
    
    2

    Before:

    Hướng dẫn get am/pm from date javascript - nhận sáng / chiều từ ngày javascript

    After:

    Hướng dẫn get am/pm from date javascript - nhận sáng / chiều từ ngày javascript

    Cách tiếp cận 2: Theo cách tiếp cận này, chúng tôi sẽ sử dụng một phương thức sẵn có Tolocalestring () để thay đổi định dạng của ngày đã cho thành định dạng AM-PM.
    In this approach, we will utilize an inbuilt method toLocaleString() to change the format of given date into AM-PM format.

    tolocalestring (): nó trả về một biểu diễn chuỗi của đối tượng ngày. 2 đối số địa phương và các tùy chọn cho phép tùy chỉnh hành vi của phương thức. It returns a string representation of the date Object. The 2 arguments Locale and options allow for customization of the behavior of the method.

    Syntax:

    dateObject.toLocaleString([locales[, options]])
    

    Program:

    Saturday, May 28, 2022, 8:38:50 PM
    
    63

    Saturday, May 28, 2022, 8:38:50 PM
    
    64

    Saturday, May 28, 2022, 8:38:50 PM
    
    6
    Saturday, May 28, 2022, 8:38:50 PM
    
    66

    Last update: _update_date_goes_here

    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    68

    Last update: _update_date_goes_here

    5
    Saturday, May 28, 2022, 8:38:50 PM
    
    70

    Last update: _update_date_goes_here

    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    72

    Last update: _update_date_goes_here

    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    74
    dateObject.toLocaleString([locales[, options]])
    
    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    76

    Last update: _update_date_goes_here

    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    78

    dateObject.toLocaleString([locales[, options]])
    
    8
    Saturday, May 28, 2022, 8:38:50 PM
    
    80
    Saturday, May 28, 2022, 8:38:50 PM
    
    81
    Saturday, May 28, 2022, 8:38:50 PM
    
    82
    Saturday, May 28, 2022, 8:38:50 PM
    
    83

    dateObject.toLocaleString([locales[, options]])
    
    8
    Saturday, May 28, 2022, 8:38:50 PM
    
    80
    Saturday, May 28, 2022, 8:38:50 PM
    
    86
    Saturday, May 28, 2022, 8:38:50 PM
    
    87
    Saturday, May 28, 2022, 8:38:50 PM
    
    88
    Saturday, May 28, 2022, 8:38:50 PM
    
    89
    Saturday, May 28, 2022, 8:38:50 PM
    
    90

    options8options9

    dateObject.toLocaleString([locales[, options]])
    
    8
    Saturday, May 28, 2022, 8:38:50 PM
    
    80
    Saturday, May 28, 2022, 8:38:50 PM
    
    95
    Saturday, May 28, 2022, 8:38:50 PM
    
    87
    Saturday, May 28, 2022, 8:38:50 PM
    
    88
    Saturday, May 28, 2022, 8:38:50 PM
    
    89
    Saturday, May 28, 2022, 8:38:50 PM
    
    99

    options8date.toLocaleDateString3

    dateObject.toLocaleString([locales[, options]])
    
    8
    Saturday, May 28, 2022, 8:38:50 PM
    
    80

    Last update: _update_date_goes_here

    04

    Last update: _update_date_goes_here

    05

    Last update: _update_date_goes_here

    06

    dateObject.toLocaleString([locales[, options]])
    
    8

    Last update: _update_date_goes_here

    08

    Last update: _update_date_goes_here

    09

    Last update: _update_date_goes_here

    10

    Last update: _update_date_goes_here

    0document.lastModified6

    Last update: _update_date_goes_here

    0

    Last update: _update_date_goes_here

    142
    Saturday, May 28, 2022, 8:38:50 PM
    
    2

    Last update: _update_date_goes_here

    75

    Last update: _update_date_goes_here

    9

    Last update: _update_date_goes_here

    20

    Last update: _update_date_goes_here

    0

    Last update: _update_date_goes_here

    22
    Saturday, May 28, 2022, 8:38:50 PM
    
    05

    Last update: _update_date_goes_here

    24

    Last update: _update_date_goes_here

    0
    Saturday, May 28, 2022, 8:38:50 PM
    
    78

    dateObject.toLocaleString([locales[, options]])
    
    8
    Saturday, May 28, 2022, 8:38:50 PM
    
    80

    Last update: _update_date_goes_here

    29
    Saturday, May 28, 2022, 8:38:50 PM
    
    82
    Saturday, May 28, 2022, 8:38:50 PM
    
    83

    dateObject.toLocaleString([locales[, options]])
    
    8
    Saturday, May 28, 2022, 8:38:50 PM
    
    80

    Last update: _update_date_goes_here

    34

    dateObject.toLocaleString([locales[, options]])
    
    8

    Last update: _update_date_goes_here

    36

    Last update: _update_date_goes_here

    37

    options8

    Saturday, May 28, 2022, 8:38:50 PM
    
    80

    Last update: _update_date_goes_here

    40
    Saturday, May 28, 2022, 8:38:50 PM
    
    82
    Saturday, May 28, 2022, 8:38:50 PM
    
    83

    options8

    Saturday, May 28, 2022, 8:38:50 PM
    
    80

    Last update: _update_date_goes_here

    45

    Last update: _update_date_goes_here

    46

    Last update: _update_date_goes_here

    47

    Last update: _update_date_goes_here

    48

    Last update: _update_date_goes_here

    49

    Last update: _update_date_goes_here

    46

    Last update: _update_date_goes_here

    51

    Last update: _update_date_goes_here

    48

    options8

    Last update: _update_date_goes_here

    54

    options8

    Last update: _update_date_goes_here

    56
    Saturday, May 28, 2022, 8:38:50 PM
    
    05

    Last update: _update_date_goes_here

    58

    dateObject.toLocaleString([locales[, options]])
    
    8
    Saturday, May 28, 2022, 8:38:50 PM
    
    49

    Last update: _update_date_goes_here

    0document.lastModified6

    Saturday, May 28, 2022, 8:38:50 PM
    
    52

    Last update: _update_date_goes_here

    64

    Last update: _update_date_goes_here

    65

    Last update: _update_date_goes_here

    66

    Before:

    Hướng dẫn get am/pm from date javascript - nhận sáng / chiều từ ngày javascript

    After:

    Hướng dẫn get am/pm from date javascript - nhận sáng / chiều từ ngày javascript


    Làm thế nào để bạn viết AM và PM trong JavaScript?

    var bây giờ = ngày mới (); Var giờ = bây giờ ...
    ([\ d]+: [\ d] {2}) - giờ: phút ..
    (: [\ d] {2}) - giây ..
    (. *) - Không gian và khoảng thời gian (thời gian là tên chính thức của AM/PM).

    Làm thế nào tôi có thể nhận được sáng trong thời điểm?

    Bạn nên sử dụng DDD để viết tắt tên của ngày trong tuần, DD cho ngày của tháng, MMM để viết tắt tên tháng, Yyy cho năm, HH trong 1-12 giờcho AM/PM.Xem Khoảnh khắc (Chuỗi, Chuỗi) Tài liệu.Lưu câu trả lời này.use ddd for an abbreviation of the name of day of the week, DD for day of the month, MMM for an abbreviation of the month's name, YYYY for the year, hh for the 1-12 hour, mm for minutes and A for AM/PM . See moment(String, String) docs. Save this answer.

    Làm cách nào để hiển thị là PM ở định dạng ngày?

    Có hai mẫu mà chúng ta có thể sử dụng trong SimpleDateFormat để hiển thị thời gian.Mẫu HH HH: MM AA, và HH: MM AA, ở đây HH được sử dụng cho định dạng 24 giờ mà không có AM/pm và HH được sử dụng cho định dạng 12 giờ với AM/PM.AA - đánh dấu AM/PM.Trong ví dụ này, chúng tôi đang hiển thị ngày và giờ hiện tại với điểm đánh dấu AM/PM.Pattern “hh:mm aa” and “HH:mm aa”, here HH is used for 24 hour format without AM/PM and the hh is used for 12 hour format with AM/PM. aa – AM/PM marker. In this example we are displaying current date and time with AM/PM marker.

    Làm cách nào để định dạng một ngày trong JavaScript?

    Các định dạng ngày JavaScript ưa thích là: Chỉ ngày-Yyyy-MM-DD.Ngày với thời gian-Yyyy-mm-ddthh: MM: SSZ ...
    Mm - tháng từ 01 đến 12 ..
    MMM - Chữ viết tắt tháng từ tháng 1 đến tháng 12 ..
    DD - Ngày từ 01 đến ngày cuối cùng của tháng (khác nhau).
    Yyyy-Năm là một số 4 chữ số ..