如何用JavaScript将datetimepicker与timepicker的时间值相加？

这个需求其实挺常见的，咱们一步步来实现日期加时长的功能，完美匹配你想要的效果：

1. 先把日期时间字符串转成可操作的Date对象 #

注意你的日期格式是DD.MM.YYYY HH:mm:ss，JavaScript原生的Date构造函数没法直接识别这种格式，所以得手动拆分各个部分：

function parseDateTime(dateStr) {
  // 拆分日期和时间部分
  const [datePart, timePart] = dateStr.split(' ');
  // 拆分日、月、年（注意月份在Date里是0开始的，后面要减1）
  const [day, month, year] = datePart.split('.').map(Number);
  // 拆分时、分、秒
  const [hours, minutes, seconds] = timePart.split(':').map(Number);
  return new Date(year, month - 1, day, hours, minutes, seconds);
}

2. 把时长字符串转换成可计算的分钟数 #

你的timepicker值是"小时:分钟"的格式，咱们把它转成总分钟数，这样加起来更方便：

function parseDuration(timeStr) {
  const [hours, minutes] = timeStr.split(':').map(Number);
  // 转成总分钟数，后续直接加给日期对象的分钟数即可
  return hours * 60 + minutes;
}

3. 把日期加时长后，再格式化成你需要的输出格式 #

加完时长后，咱们把Date对象再转成DD.MM.YYYY HH:mm:ss的字符串：

function formatDate(date) {
  // 用padStart保证两位数，比如1变成01
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份要加1转成正常格式
  const year = date.getFullYear();
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  
  return `${day}.${month}.${year} ${hours}:${minutes}:${seconds}`;
}

4. 整合所有函数，实现最终功能 #

现在把这些函数拼起来，处理你的现有变量：

// 你的现有变量
var datetime = $("#appoimentDate").val(); // 示例值："26.03.2018 08:15:00"
var time = $("#timepicker").val(); // 示例值："2:00"

// 解析原始日期和时长
const originalDate = parseDateTime(datetime);
const durationMinutes = parseDuration(time);

// 给日期加上时长（直接操作分钟数，自动处理日期进位，比如跨天的情况）
originalDate.setMinutes(originalDate.getMinutes() + durationMinutes);

// 格式化并得到结果
const result = formatDate(originalDate);
console.log(result); // 输出："26.03.2018 10:15:00"

额外提示 #

• 如果你的timepicker可能返回带秒的时长（比如"2:00:30"），可以修改parseDuration函数，加上秒的解析：

  function parseDuration(timeStr) {
    const parts = timeStr.split(':').map(Number);
    let totalMinutes = 0;
    if (parts.length === 3) {
      totalMinutes = parts[0] * 60 + parts[1] + parts[2]/60;
    } else if (parts.length === 2) {
      totalMinutes = parts[0] * 60 + parts[1];
    }
    return totalMinutes;
  }
  

• 可以加一些输入校验，比如判断字符串格式是否正确，避免程序报错。

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