使用Moment.js计算日期时间差时出现‘Invalid Date’错误的解决方案

Let's break down why you're hitting that "Invalid Date" error and fix it step by step:

Key Issues in Your Code #

• Unnecessary String Conversion: You’re converting the current time to a string with .format() first, then parsing it back into a moment object. This is redundant and creates opportunities for formatting mismatches.
• Mismatched Format Strings:
  • Your now variable uses the format "Do MMM YYYY, h:mm A" (3-letter month abbreviation like Apr plus a comma), but when parsing it back, you use "Do MM YYYY, h:mm A" (2-digit month code instead of the 3-letter abbreviation).
  • Your newTime string is "19th Apr 2021 9:30 PM" (no comma after the year), but your parse format includes a comma—this tiny mismatch is a major cause of the invalid date error.
• Incorrect Duration Handling: Using moment.utc() with a negative diff value (since your future time is later than now) can lead wonky results; moment.duration() is the proper tool for working with time spans in Moment.js.

Corrected Code Example #

// Get current time directly as a moment object (no need to format first!)
const now = moment();
// Your target future date string
const newTime = "19th Apr 2021 9:30 PM";
// Parse the future time with a format string that EXACTLY matches the string structure
const futureMoment = moment(newTime, "Do MMM YYYY h:mm A");

// Calculate the time difference in milliseconds
const diffMs = futureMoment.diff(now);
// Create a duration object to handle the time span properly
const duration = moment.duration(diffMs);

// Format to show hours and minutes (adjust as needed for days/seconds)
const timeLeft = `${Math.floor(duration.asHours())}:${duration.minutes().toString().padStart(2, '0')}`;

console.log('Time Left', timeLeft);

Extra Tips for Better Duration Display #

• If you want to include days in the output:

  const timeLeft = `${duration.days()}d ${Math.floor(duration.hours())}h ${duration.minutes()}m`;
  

• For a user-friendly, natural language string (like "2 days" or "5 hours"), use:

  console.log('Time Left', duration.humanize());
  

• Always verify that your parse format string perfectly matches the structure of the date string you’re parsing—even a missing comma or wrong month code will trigger "Invalid Date" errors.

内容的提问来源于stack exchange，提问作者Pranav