DatePicker set current date problem (saved day is -1)

Heinz · January 23, 2019, 12:31pm

Hello,

I want to set the current date as default when datepicker is shown

I have done the following (found on the forum) :

In the page load event add a Set property action. Set Name to date and Value to new Date()

Add another action of Execute JavaScript type. Set code to ${date}.setHours(0, 0, 0)

Set the Value property of your DatePicker to ${date}

When I open the page the datepicker does show the current date, so this works.

But when I save the page I will save the date minus 1 day to database.

The page is a template and I use Radzen V 2.10.2

enchev · January 23, 2019, 1:08pm

Hi @Heinz,

The date in this case is not in UTC format. Here is how to create and bind UTC date:

In the page load event add a Set property action. Set Name to date and Value to new Date()
Add another action of Execute JavaScript type. Set code to ${date}.setHours(0, 0, 0)
Add another Set property action. Set Name to utcDate and Value to :

new Date(
    Date.UTC(
      this.date.getFullYear(),
      this.date.getMonth(),
      this.date.getDate(),
      this.date.getHours(),
      this.date.getMinutes(),
      this.date.getSeconds(),
      this.date.getMilliseconds()
    )
  )

Set the Value property of your DatePicker to ${utcDate}

Heinz · January 23, 2019, 1:18pm

OK, this works. Thank you.

joshwilliam · January 31, 2019, 5:42pm

I am having this issue as well. I tried the above solution but it did not fix the issue. This happens to me on two separate pages, an Add page as well as the Edit page. I am not storing the data as a UTC, it is simply a date field in SQL not datetime. I tried to simply uncheck UTC and the control then operates correctly (does not subtract a day), but it will not save the record. I get at 400 bad request with the error stating " The Input was not valid"

korchev · January 31, 2019, 6:08pm

Hi Josh,

Can you show us how the HTTP POST request looks like? We need the Request Payload (available in the Network tab):

By the way there was an issue with the datepicker which has been fixed. Just in case make sure there isn't a client\node_modules directory in your application. If there is delete it and restart the application.

Also if the issue can be reproduced in the files that you have sent us over email before - do tell us what page that is.

joshwilliam · January 31, 2019, 8:51pm

Yes it can be reproduced. It is on the Add Deal page and the Edit Deal New page. The field is BL_Date. I have updated to the most current version. I do see a node_modules directory while the application is running but looks to be a shortcut. When I stop debug it is gone. I have made several changes to the app since I sent it but nothing to this field I believe.

joshwilliam · January 31, 2019, 9:09pm

I have pulled the code out on the Add Deal page and left the UTC checkbox not checked and now the control is not losing a day. The Edit page on the other hand is still not working even when I uncheck or recheck the UTC box. This issue is very confusing lol.

korchev · January 31, 2019, 9:54pm

I may have found the cause of this but need more time to find a fix.

If you can move everything in the same TemplateForm you can probably use a workaround. Instead of setting the Deal parameter of the updateDeal method to ${formData} use ${event} (in the TemplateForm's Submit event handler). Leave the Utc property set to true otherwise the wrong date will end up in the database.

Update: this workaround will not work.

All those date issues are caused by a nasty JavaScript quirk. Browser dates are always in the local timezone however when sending them over the wire to the server they are converted to UTC format. The server also returns dates in UTC format. If we don't do anything all dates will appear in the future or in the past (depending on your timezone). Radzen tries to mitigate that by treating all dates as UTC. Unfortunately the DatePicker doesn't handle this case properly and we have to fix it.

korchev · February 1, 2019, 1:19pm

This issue should be addressed by Radzen 2.10.7 released today.

joshwilliam · February 1, 2019, 2:54pm

Amazing job, Thank You.

joshwilliam · February 28, 2019, 4:24pm

This issue is happening again. My edit page is subtracting a day again. It is a date only field not using UTC.

korchev · February 28, 2019, 5:32pm

We will need more info in order to reproduce this.

joshwilliam · February 28, 2019, 6:04pm

I have an edit page that uses a Template Form with a date value called BL_Date. It is not a UTC date format.

On screen load I am invoking the getDealByID data source method and setting the property "formData" to ${result}. The BL Date field value is set to ${formData.BL_Date}.

The add form version of this form works fine and is also a template form.

korchev · February 28, 2019, 6:08pm

Thanks! Will try to replicate that and update this thread.

korchev · February 28, 2019, 7:20pm

I think I found something and I've sent you a private message with a private hotfix build to test.

enchev · March 1, 2019, 1:21pm

Radzen 2.11.3 was just released with fix for the problem!

Ajay_Singh · October 23, 2019, 1:33pm

Hi,

I see a date parameter passed to a page but it shows a day behind as you can see the URL has 10/01/2019 but on the page it shows 9/30/19, can you please let me know?

http://localhost:8000/customer-project-cfo/24605/2017/A/1/HUB/asinghcfo/2019-10-01T00:00:00Z/C/17

Sujoy_Mondal · May 3, 2021, 6:21am

I faced same problem in angular 8 for bs datepicker. but fixed it. you can try below code :
formatDate(your_date ,"yyyy-MM-dd", "en-US", "")