Datepicker with localized date format within Grid
4 Replies
Hi Stephan,
Thanks for contacting Syncfusion support.
Query: The date is displayed within every row, everything seems fine.But when I enter edit mode the date field is empty and the datepicker is not set to the current value.
What can I do?
We have checked your attached code example and found that you have used the date values as string data instead of date objects. So, to format and access the date values properly with DatePicker components, we suggest you return the date values as date object instead of date strings from the server side.
Screenshot:
Use date objects instead of date strings for the above date fields.
Please refer the above screenshot for date object.
If you still face any issue, then please share the below details to validate further on your requirement.
- Share the complete Grid code example.
- Please let us know that have you used remote data in your Grid application.
- Share the screenshot or video demonstration of the reported issue.
- Share the Syncfusion package version.
Regards,
Ajith G.
Hi Stephan,
We are glad to hear that your initial query has been resolved.
And for this query – “But changed data of the date is not sent to the server. This happens either with crudUrl and with updateUrl.”, with the provided information we could see that you are reporting that the current updated date value is - ‘2021-08-23T...’, but the date value being set to the server is - ‘2021-08-22T...’. Based on this we would like to let you know that it is occurring due to server time zone problem. We have explained this in detail below,
By default, on saving the record in the Grid the data will be stringified in order to be sent to the controller. And while stringifying the JSON’s stringify method will decrease the time difference from the date time value based on the current Time-zone by default. So because of this the time value received in the server will be reduced. Please check below screenshot image for reference where stringifying the date value reduces 5.30 hrs(for GMT+5.30),
Then when this date value is returned back to the grid from the server the value will be parsed back which will convert it to the initially set value. This is the default behavior for this case.
If you need to overcome the time zone problem to receive the originally selected date time value in your server method, we suggest you to achieve it by adding the time zone value to the edited date time value before it is sent to the controller in the Grid’s actionBegin event handler. This is demonstrated in the below code snippet,
|
<script>
// Grid’s actionBegin event handler
function actionBegin(args) {
if (args.requestType == "save") {
var grid = document.getElementById("Grid").ej2_instances[0];
var cols = grid.columns;
for (var i = 0; i < cols.length; i++) {
if (cols[i].type == "date" || cols[i].type == "datetime") {
var date = args.data[cols[i].field];
args.data[cols[i].field] = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getMilliseconds()));
}
}
}
}
</script> |
On using the above code the selected date value will be sent to the server as displayed in the below image,
Now as mentioned above for this case, the time zone in the date value will be reduced before sending updated data to the server from the Grid by default and so while it is updated back to the Grid it adds back the time zone which will update the proper selected value. But on using the above code the time zone will already be added to the date value while sending to the server and the Grid also will add the time zone(on parsing) on the returned value from the server which will cause wrong value to be updated in the Grid. So to overcome this you need to reduce the time zone from the value returned back to the Grid from the server so that the selected value will be properly updated.
Let us know if you have any concerns.
Regards,
Sujith R
SIGN IN To post a reply.
