将 datepicker 和 timepicker 值与 ngx-bootstrap 组合

Question

我在 Angular 5 项目中使用 ngx-bootstrap。有谁知道如何组合Datepicker with Timepicker？当我 select 一个时间时，它总是包含今天的日期。我想在 Datepicker.

中使用日期 selected

如果可能的话，最好在同一型号上安装它。这个想法是将其传递给接受 datetime 属性(c#).

的 webapi

提前致谢！

Answer 1

Datepicker 和 Timepicker 的值都是 Date.

类型

因此您可以在将结果发送到服务器之前简单地组合它们的值。

例如，假设您将 Datepicker 的值存储在 date 变量中，将 Timepicker 的值存储在 time 变量中，您可以执行以下操作：

date.setHours(time.getHours(), time.getMinutes(), time.getSeconds());

现在 date 包含来自日期选择器的日期和来自时间选择器的时间，因此您现在可以将 date 发送到服务器（以您需要的任何格式）。

Answer 2

或者，您可以将日期和时间选择器组合成一个自定义 ControlValueAccessor 并抽象出在每个项目的基础上组合单独的日期和时间值的需要。

下面的代码是自以为是的意思是：

它要求日期和时间。
它消除了微调器箭头以创建更多 "even aesthetic"。
假设您希望日期字段随着视口的增长而增长。

但它很容易修改，应该为完成这项任务奠定良好的基础。

组件

// datetime-picker.component.ts
import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormGroup, FormControl, Validators } from '@angular/forms';

interface DateAndTime {
  date: Date;
  time: Date;
}

@Component({
  selector: 'datetime-picker',
  templateUrl: './datetime-picker.component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => DatetimePickerComponent),
    multi: true
  }]
})
export class DatetimePickerComponent implements ControlValueAccessor {
  private onChange: (value: Date) => void;

  public datetime: Date = new Date();
  public form: FormGroup;

  constructor() {
    this.form = new FormGroup({});
    this.form.addControl('date', new FormControl(this.datetime, Validators.required));
    this.form.addControl('time', new FormControl(this.datetime, Validators.required));
    this.onChanges();
  }

  private onChanges(): void {
    // listen for changes, and recombinate internal datetime when they occur
    this.form.valueChanges.subscribe((f: DateAndTime) => this.setDatetime(f));
  }

  private setDatetime(d: DateAndTime) {
    this.datetime.setFullYear(d.date.getFullYear(), d.date.getMonth(), d.date.getDate());
    this.datetime.setHours(d.time.getHours(), d.time.getMinutes(), 0, 0);

    this.onChange(this.datetime);
  }

  /*
   * Control Value Accessor
   */
  writeValue(value: Date): void {
    // This method is called with the `null` value when the form resets.
    // A component's responsibility is to restore to the initial state.
    if (value === null) {
      value = new Date();
    }

    this.datetime = value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void { }

  setDisabledState?(isDisabled: boolean): void { }
}

查看

// datetime-picker.component.html
<div class="d-flex" [formGroup]="form">
  <div class="flex-grow-1 pr-3">
    <input type="text" class="form-control" formControlName="date" bsDatepicker />
  </div>
  <div>
    <timepicker formControlName="time" [showSpinners]="false"></timepicker>
  </div>
</div>

将 datepicker 和 timepicker 值与 ngx-bootstrap 组合

Combine datepicker and timepicker values with ngx-bootstrap

ngx-bootstrap

angular

angular5

组件

查看