Question

我在Angular 5项目中使用ngx-bootstrap。有谁知道如何将Datepicker和Timepicker结合起来？当我选择一个时间它总是包括今天的日期。我想使用Datepicker中选择的日期。

如果可能的话，更好的方法是将它放在同一型号上。我的想法是将其传递给webapi，它接受datetime属性（c＃）。

提前致谢！

Answer 1

Datepicker和Timepicker的值都是Date类型。

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

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

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

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

Answer 2

或者，您可以将日期和时间选择器组合到自定义的ControlValueAccessor中，并消除对每个项目组合单独的日期和时间值的需要。

以下代码在以下意义上是 opinionized ：

它需要日期和时间。
它消除了旋转箭头，从而创建了更“均匀的美学”。
假设您希望日期字段随着视口的增长而增长。

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

组件

// 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结合使用

2 个答案:

组件

查看