Problem sending the type date with Angular

Question

When I add the date to Spring from Angular, Spring save the day before instead the date that I insert. When I tried on postman everything works so the problem is when Angular send the data. My code on Spring model is:

  @DateTimeFormat(iso = DateTimeFormat.ISO.DATE)
        private LocalDate importDate;
        @DateTimeFormat(iso = DateTimeFormat.ISO.DATE)
        private LocalDate expireDate;

in my controller:

@PostMapping("/addProduct")
        public ResponseEntity<Response> saveProduct(@RequestBody @Valid Product product) throws BadRequestException {
            log.info("Product to String: " + product);
            return ResponseEntity.ok(Response.builder()
                    .timeStamp(now())
                    .data(Map.of("product", productService.addProduct(product)))
                    .message("product added")
                    .status(CREATED)
                    .statusCode(CREATED.value())
                    .build()
            );
        }

In my component.html:

 <p-calendar appendTo="body" id="importDate" [(ngModel)]="product.importDate" placeholder={{product.importDate}} dateFormat="yy-mm-dd"></p-calendar>

In my components ts:
this.service.saveData(this.product).subscribe({
        next: (v) => this.toastMessage(v.status,v.message),
      error: (e) => this.errorMessage(e.error.message),
      complete: ()=> this.service.getData().subscribe(data=>{this.products=data})
      });

I really can't figure out why, thanks a lot who gonna reply me.

Tilman Zuckmantel · Accepted Answer · 2022-02-19 21:32:23Z

1

First correct the date to local timezone.
Append 'Z' to date for getting the correct value with local timezone.

const localDate = date + 'Z';
const dateISO = new Date(localDate).toISOString().substring(0, 10);

edited Feb 19, 2022 at 21:32

Tilman Zuckmantel

7601 gold badge6 silver badges21 bronze badges

answered Feb 18, 2022 at 20:41

Chamath Wanigasooriya

266 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aakash Garg · Accepted Answer · 2022-02-18 16:32:29Z

0

Because you are expecting date in iso string at backend which is not default when javascript converts date to string. you can use toISOString() method for this.

new Date().toISOString()

the above is just an example. toISOString can be called on any date object.

edited Feb 18, 2022 at 16:32

answered Feb 18, 2022 at 16:11

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

6 Comments

Alexander Staroselsky Over a year ago

Would it be more about updating this.product to update properties importDate and/or expireDate to be ISO date strings? new Date() may not reflect the date of those objects values.

Aakash Garg Over a year ago

you can call toISOString on those date objects. the code here is just a sample.

Alexander Staroselsky Over a year ago

Why not actually make the answer specific to their question and usage? Why just a an arbitrary sample? It could help them resolve their issue more effectively.

Aakash Garg Over a year ago

cuz the question doesn't give the data to deal with

Robs Over a year ago

Which Data do you need?

|

Collectives™ on Stack Overflow

Problem sending the type date with Angular

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related