Reformat Date from Datepicker

Hi, I am pretty new to Radzen and still learning, so bear with me.

I have created a form with two datepickers (date only, no time) and a submit button. I need to take the dates that were selected and pass them to a stored procedure as a text string in the "yyyy-mm-dd" format. The two datepickers are defined with page properties of "billDate" and "dueDate".

If I pass ${billDate} to the stored procedure (SP), I get something like "2021-08-16T00:00:00Z"
If I pass ${billDate.toString().split('T')[0]} to the SP, I get "2021-08-16", which is actually what I want.

Here's the problem. If I try passing both dates with the ".toString().toString().split('T')[0]" method the first date parameter gets passed as "2021-08-16", but the second date parameter (dueDate) is passed as "Wed Aug 18 2021 19:00:00 GM". To fix this, I found that I could use ${dueDate.toISOString().split('T')[0]} for the second date while still using ".toString().toString().split('T')[0]" for the first date and then both would get passed in the correct format of "2021-08-16".

So even though I have a working solution, I do not feel confident that it will continue to work consistently. Is there a better way that I should use to convert the date from the datepicker to the string used for the parameter?

Hi @rbock,

You have picked Radzen.Blazor component as a thread category however you are pasting JavaScript code with Radzen expressions. What technology are you using? How are your billDate and dueDate properties declared?

Hi @korchev,

Sorry for picking the wrong category. I have created a Radzen Angular app where billDate and dueDate properties are declared by simply setting them in the Page Load event - I am setting them to the value of parameters passed to the page.



to be continued....

I am then trying to run a stored procedure from the submit button.

It seems that one of the properties is created as a Date object whereas the other is a string hence the discrepancy. How are those page parameters set?

So I have a page with a datagrid created from CRUD - both dates are columns on the datagrid. The table from which they come from has them both defined as "date" type fields. The RowSelect event of the datagrid includes this:

So the user selects a row in the datagrid, then they can click a button which pulls up the page that calls the SP. It passes both dates as a parameter to pre-populate the next page. The Click event of the button looks like this:

Then on the Load event of the page that calls the SP, I set the Page parameters:

Honestly I have no idea why one of the properties gets converted to Date object. They should both be strings. You can try debugging the application to see when the conversion happens.

So I think I found the issue. I pass the date to the page parameter as "2021-07-31T00:00:00Z". If I do not change the datepicker, then it passes the date to the SP in the exact same format. But if I click on the datepicker and change the date, then the date that gets passed to my SP is in the "Thu Jul 29 2021 19:00:00 GMT-0500 (Central Daylight Time)" format.

How can I fix the datepickers to always give me the same date format back, no matter if they have been clicked on?

The DatePicker always creates a Date object when you change its date. A simple fix of your issue is to use toISOString() conditionally e.g. ${dueDate.toISOString ? dueDate.toISOString() : dueDate}

Found a solution by initializing the date using the "new Date()" constructor. This made the page property consistently into a Date object.