日期范围选择器答案

【问题标题】：Date Range Picker日期范围选择器
【发布时间】：2018-06-26 19:35:44
【问题描述】：

我使用的框架（Angular）和 ngx-bootstrap 2.0.5

我想制作响应式表单并准备数据以通过 API 发送。但我对数据范围选择器组件有疑问。

像这样的 JSON 数据除外的其余 API 模型。（例如）

{
  "firstName": "John",
  "lastName": "Baily",
  "startDate": "01/01/2018",
  "endDate": "01/06/2018"
}

我已经准备好所有数据，但是当我想使用数据选择器范围时，我无法将日期从数组中分离为 2 个对象。例如数据选择器范围内的数据

"range": [
    "2018-06-03T18:51:51.000Z",
    "2018-07-01T18:51:51.000Z"
  ]

我需要将该数据设置为 2 个对象，一个在 startDate，另一个在 endDate。

你能帮我解决这个问题吗？

【问题讨论】：

标签： angular typescript ngx-bootstrap

【解决方案1】：

拥有

"range"= [ "2018-06-03T18:51:51.000Z", "2018-07-01T18:51:51.000Z" ]

你可以简单

{ "firstName": "John", "lastName": "Baily", "startDate": range[0], "endDate": range[1] }

我知道为什么您的 API 需要自定义格式，而不是 ISO，但您必须将这些日期转换为 API 所需的格式 - 用谷歌搜索如何格式化 Date 对象相对容易

【讨论】：

【解决方案2】：

打字稿

  Form: FormGroup;

  const r1 = this.Form.get('range').value[0];
  const r2 = this.Form.get('range').value[1];

  const fromDate = new Date(r1);
  const toDate = new Date(r2);

HTML

  <form [formGroup]="Form">
    <div class="form-group">
      <input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker formControlName="range">
    </div>

  </form>

【讨论】：

谢谢你，但我创建了表单构建器，并在该表单构建器中准备了这样的数据。 this.formGroup = this.fb.group({ firstName: [''], lastName: [''], startDate: [''], endDate: [''] });那么这意味着我在表单控件中导入了新对象，我可以避免向表单控件添加新对象吗？
你没有在这里准备任何东西，你只是定义你的表单。显然你不应该在这里使用 startDate endDate 因为你的小部件不支持单独的 bingings。你应该绑定到像dates 这样的东西，然后当你想使用形式上的数据时，转换它。表单不适用于数据建模。