BSDATEPICKER。与TimePicker，如何删除AM/PM

Question

我使用Angular 12和NGX-Bootstrap 7.1.2 当将datepicker与TimePicker一起使用时，如何格式化钟表？ 在这种情况下，我想从中删除AM/PM，并允许用户以24小时格式选择时间。

这是我正在使用的代码，

<div class="text">   
    <input id="dpReview"
           name="dpReview"
           type="text"
           required
           #allocationDatepicker
           class="form-control"
           bsDatepicker
           placeholder="Select an assignment date"
           [(ngModel)]="allocDate"
           [bsConfig]="{withTimepicker: true, dateInputFormat: 'MMMM DD YYYY, HH:mm'}"/>
</div>

谢谢

Answer 1

我也遇到了这个问题，显然，datePicker不支持配置在内部集成的钟贴，即使TimePicker本身实际上确实支持它（甚至具有@input）。

我将Angular 15与。

我能够通过某种技巧解决问题来解决我的问题。让我清楚地说，这不是推荐的解决方案，因为它取决于datepicker和timepicker的某些内部功能。如果内部变更（例如私有属性或方法名称），解决方法将停止工作，或者（虽然不可能）可以在datepicker或timepicker中引入故障。
我本人仅使用它来暂时解决这个问题，但最终我将用自定义实施替换datepicker。

DatePicker具有事件发射器开头，可用于执行一些初始化。就我而言，它正在访问其中的钟贴组件，并覆盖负责呈现时间的私人方法。

<input id="dpReview"
       name="dpReview"
       type="text"
       bsDatepicker
       #allocationDatepicker="bsDatepicker"
       (onShown)="initDatepicker(allocationDatepicker)"
       .../>

// TODO fix me properly!
// hack timepicker to show 24h instead of 12h format
initDatepicker(dp: BsDatepickerDirective): void {
  // defer execution until reference to datepicker container is initialized
  setTimeout(() => {
    const timepicker = (dp as any)._datepickerRef.instance.startTimepicker!;
  
    // override rendering method
    const originalMethod = timepicker._renderTime as (value?: string | Date) => void;
    const newMethod = (value?: string | Date) => {
      // set the "showMeridian" property to false and call original method
      timepicker.showMeridian = false;
      originalMethod.call(timepicker, value);
      // reset back to true to avoid an infinite loop
      timepicker.showMeridian = true;
    };
    timepicker._renderTime = newMethod;

    // re-render time in case it's initialized with a 00 or 12+ hour
    timepicker._store.select((state: TimepickerState) => state.value)
      .pipe(take(1))
      .subscribe((value: Date | undefined) => {
        newMethod(value);
        timepicker._cd.markForCheck();
      });
  });
}

如您所见，Showmeridian属性是负责渲染12h格式的属性，请参见 github上的timepicker代码。
此骇客仅将其简要介绍为false，然后在渲染后再次返回到true。请注意，我尝试在初始化时尝试设置timepicker.showmeridian = false，但这导致了奇怪的行为，渲染方法被无休止地称为，有效地停止了页面的工作。

虽然此示例有效，但我会长期阻止其使用情况，而建议您实现自己的datepicker（也许只是通过将bootstrap datepicker和timepicker组合起来）或完全使用其他库。