拆分日期时间字段为独立日期与时间——uib-datepicker适配问题

我来帮你搞定这个问题！你之前用字符串拆分的方法行不通，核心原因是uib-datepicker绑定的是Date对象，不是字符串，直接调用split()方法自然会报错——毕竟Date对象没有这个字符串方法。

uib-datepicker的ngModel绑定值是标准的Date类型，而不是你示例里的"2018-04-24 10:00:00"这类字符串。所以我们得换用Date对象的原生API来提取日期和时间信息。

下面是直接接收Date对象作为参数的函数，完美适配你的需求：

提取日期（YYYY-MM-DD格式） #

function returnDate(date) {
  // 先校验输入是否为有效Date对象
  if (!(date instanceof Date) || isNaN(date.getTime())) return '';
  
  const year = date.getFullYear();
  // 月份是0-11，要加1后补零到两位
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  
  return `${year}-${month}-${day}`;
}

提取时间（12小时制带AM/PM） #

延续你原来的12小时制转换逻辑，直接基于Date对象处理：

function returnTime(date) {
  if (!(date instanceof Date) || isNaN(date.getTime())) return '';
  
  const hours24 = date.getHours();
  // 转换为12小时制
  const hours = ((hours24 + 11) % 12) + 1;
  // 分钟补零到两位
  const minutes = String(date.getMinutes()).padStart(2, '0');
  // 判断上午/下午
  const amPm = hours24 >= 12 ? 'PM' : 'AM';
  
  // 返回如"10:00 AM"的格式，若只需纯时间可去掉amPm部分
  return `${hours}:${minutes} ${amPm}`;
}

假设你的uib-datepicker绑定的变量是selectedDate，在Angular模板里直接调用函数即可：

<div>拆分后的日期：{{ returnDate(selectedDate) }}</div>
<div>拆分后的时间：{{ returnTime(selectedDate) }}</div>

• 加入isNaN(date.getTime())校验是为了避免无效Date对象（比如new Date('无效字符串')）导致的错误
• 如果需要24小时制时间，直接使用hours24并补零即可，去掉12小时制转换逻辑就行

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