How to pass only date from angular 6 to web api

Question

I am passing date from my angular 6 application to web api. The problem is when I select for example 10th March 2019 from datepicker. When I get that in web api it's converting it into 9th March 6:30 pm, I think its some with the time zone, but I dont need time I just want to pass date.

Following is angular code

  getBookingList() {

    this.bookingListSubscription = this.restService.getBookingListForGrid(this.booking).subscribe(
  data => {
    setTimeout(() => {
      if (data.status = '200') { 
      this.bookingList = data;
      this.bookingList.forEach((element) => {
        element.StartDate =  this.datePipe.transform(element.StartDate, "dd/MM/yyyy"),
          element.EndDate = new Date(element.EndDate);
      });
    }, 3000)
  });
  }

And I am storing date into DateTime format in c#.

What is the expected format at WebAPI's end? i.e yyyy-MM-dd? — Prashant Pimpale
– Prashant Pimpale, Commented Mar 23, 2019 at 6:53
I need only date example if i am selecting 10/03/2019 then it should pass receive the same. In dd-mm-yyyy — Vishal
– Vishal, Commented Mar 23, 2019 at 6:54
You need to handle timezone in this case. If you do new Date(yourDate) in the backend so it will convert date according to server timezone. Please provide some piece of backend code! — Surjeet Bhadauriya
– Surjeet Bhadauriya, Commented Mar 23, 2019 at 6:55

Prashant Pimpale · Accepted Answer · 2019-03-23 07:07:58Z

4

You can use angular's DatePipe:

Import this:

import { DatePipe } from '@angular/common';

and in constructor:

constructor(private datePipe: DatePipe){}

and to change the format of selected date you can simply use transform method:

this.datePipe.transform(this.date, "your_expected_date_format"); // Format: dd/MM/yyyy OR dd-MM-yyyy OR yyyy-MM-dd

TS Code:

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';


import { DatePipe } from '@angular/common';

/** @title Select with multiple selection */
@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
   providers: [
    DatePipe
  ]
})
export class SelectMultipleExample {

  date : any;
  formatedDate : any;

  constructor(private datePipe: DatePipe){}

  onSubmit(){
   this.formatedDate =  this.datePipe.transform(this.date, "dd/MM/yyyy");
  }
}

Stackblitz

answered Mar 23, 2019 at 7:07

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

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

6 Comments

Vishal Over a year ago

getting error Type 'string' is not assignable to type 'Date'

Vishal Over a year ago

element.StartDate = this.datePipe.transform(element.StartDate, "dd/MM/yyyy"),

Vishal Over a year ago

I want it of type Date not of string which can be passed to web api and can be stored in DateTime type of c#

Prashant Pimpale Over a year ago

change it to type any C# will take that

Vishal Over a year ago

changed it to any checked in c# still getting same result date - 5:30 hrs in c#

|

wentjun · Accepted Answer · 2019-03-23 07:29:11Z

0

An alternate solution to using DatePipe would be the use of formatDate. I have passed the following values: date, time format, and locale as its parameters.

On your component.ts, you can do something like this:

import { formatDate } from '@angular/common';

export class AppComponent  {
  locale: string = 'en-US';
  format: string = 'dd-mm-yyyy'
  date: Date = new Date();

  constructor() {}

  transformDate(date) {
    console.log(formatDate(this.date, this.format, this.locale));
    return formatDate(this.date, this.format, this.locale);
  }
}

I have reproduced a demo to demonstrate the usage.

edited Mar 23, 2019 at 7:29

answered Mar 23, 2019 at 7:19

wentjun

42.9k10 gold badges108 silver badges116 bronze badges

2 Comments

Vishal Over a year ago

Getting error Type 'string' is not assignable to type 'Date'

wentjun Over a year ago

Wait, what? Oh, where did you get that error? What is your input?

Ramesh Bolla · Accepted Answer · 2023-03-01 05:10:39Z

0

I had the same issue, spent lot of time to fix.Instead of sending as datetime type, I sent to backend as a string. Since its Rest API endpoint, automatically converted to Date Time.

model.dateOfBirth = new Date(moment(model.dateOfBirth).format('MM/DD/YYYY')).toDateString();

This solved my problem.

answered Mar 1, 2023 at 5:10

Ramesh Bolla

4121 gold badge4 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to pass only date from angular 6 to web api

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related