求助：实现PST时间输入转本地时区时间功能（附现有代码）

Hey Wayne! Let's figure out how to add that PST-to-local-time conversion feature you need. I get that reversing your existing logic (local → PST to PST → local) can feel tricky, especially with daylight saving time (DST) considerations. Here's a step-by-step breakdown and working code to make this happen:

Key Background to Get Right #

First, let's clarify Pacific time offsets to avoid mistakes:

• PST (Pacific Standard Time) = UTC-8 (used roughly November–March)
• PDT (Pacific Daylight Time) = UTC-7 (used roughly April–October)
  We need our conversion to automatically handle both, since users will likely mean "Pacific time" overall, not just PST year-round.

Step 1: Build the PST-to-Local Conversion Function #

This function will take a user-input time (like "09:00"), parse it as Pacific Time, then convert it to the user's local time zone:

function convertPstToLocal(inputTime) {
  // Split input into hours and minutes (assumes valid HH:MM format)
  const [hours, minutes] = inputTime.split(':').map(Number);
  
  // Create a date for the current day in Pacific Time (handles PST/PDT automatically)
  const pacificDate = new Date(new Date().toLocaleString("en-US", {
    timeZone: "America/Los_Angeles",
    year: "numeric",
    month: "2-digit",
    day: "2-digit"
  }));
  
  // Set the input hours and minutes on the Pacific date
  pacificDate.setHours(hours, minutes, 0, 0);
  
  // Format the result to the user's local time zone
  const displayOptions = { 
    weekday: "short", 
    year: "numeric", 
    month: "short", 
    day: "numeric", 
    hour: "numeric", 
    minute: "numeric" 
  };
  
  return pacificDate.toLocaleString("en-US", displayOptions);
}

Step 2: Add HTML for User Input & Display #

Add these elements to your HTML to let users input a PST time and see the local result:

<label for="pstInput">Enter PST/PDT Time (HH:MM):</label>
<input type="time" id="pstInput" placeholder="HH:MM">
<div id="localTimeOutput" style="margin-top: 10px;"></div>

Step 3: Connect Input to Conversion #

Add an event listener to trigger the conversion whenever the user types a valid time:

// Listen for input changes in the PST time field
document.getElementById('pstInput').addEventListener('input', function() {
  const pstTime = this.value;
  const outputElement = document.getElementById('localTimeOutput');
  
  if (pstTime) {
    const localTime = convertPstToLocal(pstTime);
    outputElement.textContent = `Your Local Time: ${localTime}`;
  } else {
    outputElement.textContent = '';
  }
});

Why This Works #

• Using timeZone: "America/Los_Angeles" lets the browser handle PST/PDT transitions automatically—no manual DST checks needed (unlike your existing code's dst() function).
• We first anchor the input time to the current day in Pacific Time, which handles edge cases like cross-day time differences (e.g., 23:00 PST might be the next day in a time zone ahead of UTC).
• Calling toLocaleString without a timeZone parameter defaults to the user's local time zone, so it automatically converts the Pacific time to their local time.

Quick Tweaks if Needed #

• If you want to let users pick a specific date (not just today), add a date input field and adjust the pacificDate creation to use that date instead of the current one.
• You can modify the displayOptions to include seconds or change the date format to match your existing UI.

Let me know if you need help fitting this into your existing code structure!

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