CODEWITHSUNDEEP
angulartypescriptngx-bootstrap
theserver
theserver

Reputation: 39

Date Range Picker

Framework which I use (Angular) and ngx-bootstrap 2.0.5

I want to make reactive form and prepare data to send over API. But I have problem with Data Range Picker component.

Rest API model except JSON data like this.(for example)

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

I have prepared all data but when I want to use Data Picker Range I cannot separate date from array to 2 objects. For Example data from the data picker range

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

And I need that data set to 2 object, one in startDate and another in endDate.

Could you please help me with that?

Upvotes: 0

Views: 1820

Answers (2)

Ole
Ole

Reputation: 1

TypeScript

  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>

Upvotes: 0

Antoniossss
Antoniossss

Reputation: 32517

Having

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

you can simply

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

Idk why your API requires custom format, insteed of ISO but you will have to convert those dates to API required format - thats relatively easy to google out how to format Date objects

Upvotes: 1

Related Questions