Calendar send date incorrectly

UI Components for Angular
Post Reply
mehmetsahin
Posts: 5
Joined: 15 Aug 2018, 15:32

06 Mar 2019, 17:35

Hi. I create a new angular project by Angular CLI and I create new C# project. I didn't make any additional configuration both client and server side. And I create a form like below. But my date going to my c# class as 3 hour back. Forexample, I choose '03/28/2019' , but I'm taking as '03/27/2019 21:00.00' . I tried by `showTime` property of calendar. But, result not changed. How I can solve this problem?

.html file

Code: Select all

<form [formGroup]="myForm" (ngSubmit)="save()">
  <p-calendar formControlName="birthdate"></p-calendar>  <br><br>
  <button type="submit">Save</button>
</form>
.ts file

Code: Select all

  constructor(public fb: FormBuilder, public http: HttpClient) { }

  myForm = this.fb.group({
    birthdate: [null],
  });

  save() {
    this.http.post('http://localhost:5000/api/values', this.myForm.value).subscribe(result => {
    });
  }

C# .cs file

Code: Select all

        [HttpPost]
        public void Post([FromBody] MyObject value)
        {
        }
        
            public class MyObject
        {
            public DateTime Birthdate { get; set; }
        }
        

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

06 Mar 2019, 23:50

mehmetsahin wrote:
06 Mar 2019, 17:35
Hi. I create a new angular project by Angular CLI and I create new C# project. I didn't make any additional configuration both client and server side. And I create a form like below. But my date going to my c# class as 3 hour back. Forexample, I choose '03/28/2019' , but I'm taking as '03/27/2019 21:00.00' . I tried by `showTime` property of calendar. But, result not changed. How I can solve this problem?

.html file

Code: Select all

<form [formGroup]="myForm" (ngSubmit)="save()">
  <p-calendar formControlName="birthdate"></p-calendar>  <br><br>
  <button type="submit">Save</button>
</form>
.ts file

Code: Select all

  constructor(public fb: FormBuilder, public http: HttpClient) { }

  myForm = this.fb.group({
    birthdate: [null],
  });

  save() {
    this.http.post('http://localhost:5000/api/values', this.myForm.value).subscribe(result => {
    });
  }

C# .cs file

Code: Select all

        [HttpPost]
        public void Post([FromBody] MyObject value)
        {
        }
        
            public class MyObject
        {
            public DateTime Birthdate { get; set; }
        }
        
Hi,

I couldn't duplicated the error.There is an example for you. I hope it helps.
https://stackblitz.com/edit/github-m2mftz
Best Regards.

mehmetsahin
Posts: 5
Joined: 15 Aug 2018, 15:32

07 Mar 2019, 08:33

Thanks for your reply @yigitfindikli .

https://stackblitz.com/edit/angular-srs74j

Can you check this link please? But you should look the stackblitz console not browser console. In additionally, when I changed "<p-calendar formControlName="birthdate"></p-calendar>" by "<input type="date" formControlName="birthdate">" , then it's working perfectly. So, problem is PrimeNg calendar.

I also forked your stackbklitz in this link. https://stackblitz.com/edit/github-m2mftz-qx1lqq . It' s samely working incorrectly. You can see from stackblitz console not browser console. You're sending "this.myForm.value.birthdate". But in real life scenario, every people send "this.myForm.value" . Because, there are a lot of input in form.

mehmetsahin
Posts: 5
Joined: 15 Aug 2018, 15:32

07 Mar 2019, 15:52

I found the solution .Primeng calendar has a property "dataType" ."DataType" is "date" in default. If you set "string" instead of "date", then it's working perfectly and sending correct date to server.

https://stackblitz.com/edit/angular-xtwv43

You can see from working example from this stackblitz link.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 9 guests