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


#1

Hello,

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

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

  1. In the page load event add a Set property action. Set Name to date and Value to new Date()
  2. Add another action of Execute JavaScript type. Set code to ${date}.setHours(0, 0, 0)
  3. 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


#2

Hi @Heinz,

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

  1. In the page load event add a Set property action. Set Name to date and Value to new Date()
  2. Add another action of Execute JavaScript type. Set code to ${date}.setHours(0, 0, 0)
  3. 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()
    )
  )
  1. Set the Value property of your DatePicker to ${utcDate}


#3

OK, this works. Thank you.


#4

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"


#5

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.


#6

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.


#7

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.


#8

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.


#9

This issue should be addressed by Radzen 2.10.7 released today.


#10

Amazing job, Thank You.