Angular 5项目中如何结合ngx-bootstrap的Datepicker与Timepicker？

刚好在Angular 5项目里折腾过ngx-bootstrap的Datepicker和Timepicker结合的场景，分享下亲测有效的方案，完美契合你绑定同一模型、对接C# WebAPI的需求：

ngx-bootstrap的Datepicker和Timepicker本质上都是操作JavaScript Date对象：Datepicker会返回一个带当日00:00时间的Date，而Timepicker会直接修改这个Date对象的时分秒部分。所以我们只需要把两个组件绑定到同一个模型上，就能自动实现“选日期+选时间=完整DateTime”的效果，完全不用手动拼接。

1. 模板代码（HTML） #

把Datepicker和Timepicker都绑定到同一个[(ngModel)]，同时可以根据需求配置组件的显示格式：

<div class="form-group mb-3">
  <label class="form-label">选择日期</label>
  <input 
    type="text" 
    class="form-control" 
    bsDatepicker 
    [(ngModel)]="selectedDateTime"
    [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD', containerClass: 'theme-default' }"
    placeholder="点击选择日期">
</div>

<div class="form-group mb-3">
  <label class="form-label">选择时间</label>
  <input 
    type="text" 
    class="form-control" 
    bsTimepicker 
    [(ngModel)]="selectedDateTime"
    [showMeridian]="false"  <!-- 设为true可以显示12小时制 -->
    [minuteStep]="15"      <!-- 可选：设置分钟步长，比如15分钟 -->
    placeholder="点击选择时间">
</div>

<!-- 可选：实时展示合并后的完整日期时间 -->
<p class="text-muted">当前选择：{{ selectedDateTime | date: 'yyyy-MM-dd HH:mm:ss' }}</p>

2. 组件逻辑（TypeScript） #

定义一个Date类型的模型，初始化可以设为当前时间或者null，提交时直接传给WebAPI即可：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-datetime-picker',
  templateUrl: './datetime-picker.component.html'
})
export class DatetimePickerComponent {
  selectedDateTime: Date = new Date(); // 初始化默认值，也可以设为null

  constructor(private http: HttpClient) {}

  // 提交到C# WebAPI的方法
  submitDateTime() {
    // 可选：添加校验，确保用户同时选择了日期和时间
    if (!this.selectedDateTime) {
      alert('请选择日期和时间');
      return;
    }

    // Angular的HttpClient会自动把Date对象序列化为ISO 8601格式的字符串
    // 比如："2024-05-20T14:30:00.000Z"，C#的DateTime类型可以直接解析
    this.http.post('/api/your-endpoint', { eventDateTime: this.selectedDateTime })
      .subscribe(
        res => console.log('提交成功！'),
        err => console.error('提交失败：', err)
      );
  }
}

3. C# WebAPI接收端 #

直接用DateTime类型接收即可，ASP.NET Core默认支持解析ISO格式的时间字符串：

using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("api")]
public class DateTimeController : ControllerBase
{
    [HttpPost("your-endpoint")]
    public IActionResult ReceiveDateTime([FromBody] DateTimeRequest request)
    {
        // request.EventDateTime就是前端传入的完整日期时间
        // 这里可以直接进行业务处理
        return Ok($"接收的日期时间：{request.EventDateTime}");
    }
}

// 接收模型
public class DateTimeRequest
{
    public DateTime EventDateTime { get; set; }
}

• 版本兼容：Angular 5对应的ngx-bootstrap版本是2.x，别装成更高版本（比如3.x+适配Angular 6+），避免出现兼容性问题。
• 时区处理：如果前端和服务器时区不同，建议统一用UTC时间。前端可以在提交前转换：this.selectedDateTime.toUTCString()，或者后端在接收时处理时区转换。
• 空值处理：如果允许用户不选择日期时间，记得把模型设为Date | null，并在提交前做空值判断。

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