According to the requirement, we need to edit the column with DateTime together and according to the documentation, we have a different field for Time and a different field for the Date.
{
field : 'start',
flex : 2,
type : 'date',
editor : {
type : 'datetimefield'
}
}
Re: [VUE] DateTime column type
Posted: Tue Apr 13, 2021 9:12 am
by Webethics
Thanks for the updates, we have tried with this code and getting some date format issues.
we are using the below code and set the format: 'MM/dd/YYYY HH:mm',, but when we edit the column and update the value then it gives the result like in the attached screenshot https://prnt.sc/11bmumr.
Basically, we just want the format like "15.10.2020 10:00" (DD/MM/YYYY HH: mm)
columns : [
{
text : 'Name',
field : 'name',
flex : 2,
editor : {
type : 'textfield',
required : true
}
},{
field : 'start',
flex : 2,
type : 'date',
format : 'MM/dd/YYYY HH:mm',
editor : {
type : 'datetimefield'
},
renderer : ({ record = '', cellElement }) => {
return record['start'] || 'N/A';
}
}
],
data : [
{name:"test",start:""}
]
});
Please update how can we get this format in edit request and save this same value in DB within the same format.
Thanks
Re: [VUE] DateTime column type
Posted: Tue Apr 13, 2021 9:40 am
by mats
This is because you use a renderer, in this case you are responsible for formatting the output as you want. record['start'] yields a Date so you get a native Date.toString() which is seen in your screenshot.
Thanks for the updates,
I have tried this but not getting any solution, it's really helpful if you provide any working example for this.
In which we get the format like "15.10.2020 10:00" (DD/MM/YYYY HH: mm) .
The condition is if the value is empty then we display "N/A" and if the user updates the value then we need to display the value in the following format "15.10.2020 10:00".
Re: [VUE] DateTime column type
Posted: Thu Apr 15, 2021 8:24 am
by mats
Here's the renderer:
renderer : ({ value }) => DateHelper.format(value, 'DD/MM/YYYY HH:mm')
Re: [VUE] DateTime column type
Posted: Thu Apr 15, 2021 8:55 am
by Webethics
Great, it's working fine.
But there is one more problem I have faced when the data is not available for that field, then it's working fine but when the data is available then it does not display the data in the column.
Display "N/A" value.
new Grid({
appendTo : 'container',
minHeight : '20em',
columns : [
{
text : 'Date',
field : 'start',
flex : 1,
type : 'date',
format : 'DD.MM.YYYY HH:mm',
editor : {type : 'datetimefield'},
renderer : ({ record = ''}) => {
return DateHelper.format(record['start'],'DD.MM.YYYY HH:mm') || 'N/A';
}
}
],
data : [
{start : "21.02.2021 05:00"},
{start : ""},
]
});
As I have defined the value for the column, but it does not display the value in the column.
Please check the attached screenshot. https://prnt.sc/11fhib0
Re: [VUE] DateTime column type
Posted: Thu Apr 15, 2021 9:01 am
by mats
Then this your code to use:
renderer : ({ value }) => value ? DateHelper.format(value, 'DD/MM/YYYY HH:mm') : 'N/A';
Re: [VUE] DateTime column type
Posted: Thu Apr 15, 2021 9:17 am
by Webethics
I have tried with your code, but it's not working for me.
Now getting one more issue and the issue is after using the above code when we try to again edit the field which has already data gives me some missing function error.