JavaScript实现datetime-local输入框自动添加45分钟的日期时间联动及TypeError问题解决

Hey there! I see exactly what's going wrong here. The value you get from the datetime-local input is a string (like "2024-05-20T14:30"), not a JavaScript Date object—so trying to call getMinutes() on it directly throws that TypeError. Let's fix this step by step.

The Solution: Convert the String to a Date First #

We just need to turn the input's string value into a valid Date object, perform the 45-minute addition, then convert it back to the format the datetime-local input expects.

Here's the corrected full code:

// Initialize start date with current local time (your original logic is good here!)
var now = new Date();
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
document.getElementById('date').value = now.toISOString().slice(0,16);

// Initialize end date with +45 minutes from start
now.setMinutes(now.getMinutes() + 45);
document.getElementById('end_date').value = now.toISOString().slice(0,16);

// Add change listener for start date input
document.getElementById('date').addEventListener('change', (e) => {
  // Step 1: Convert the input string to a Date object
  const startDate = new Date(e.target.value);
  
  // Step 2: Add 45 minutes to the start date
  startDate.setMinutes(startDate.getMinutes() + 45);
  
  // Step 3: Convert back to datetime-local compatible format and set end date
  document.getElementById('end_date').value = startDate.toISOString().slice(0,16);
});

Key Fixes Explained: #

• Convert string to Date: new Date(e.target.value) takes the input's string value and creates a proper Date object we can manipulate.
• Safe date manipulation: Now we can safely call setMinutes() on the Date object to add 45 minutes.
• Format for input: toISOString().slice(0,16) gives us the exact YYYY-MM-DDTHH:mm format that datetime-local inputs require.

How to Test: #

1. Load your page—start date will be set to current local time, end date to current time +45 minutes.
2. Pick a new start time in the first input—you'll see the end date automatically update to that time plus 45 minutes, no errors!

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