Bryntum Support Forums

Hello

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.

But we want something like a screenshot.
https://prnt.sc/1180ky0

We followed the below links.
https://www.bryntum.com/docs/grid/#Grid/column/DateColumn
https://www.bryntum.com/docs/grid/#Grid/column/TimeColumn

Please let us know is this possible or not.

Thanks

We have DateTimeField, so you can configure your date column to use this editor: https://bryntum.com/docs/scheduler/#Core/widget/DateTimeField

{
            field  : 'start',
            flex   : 2,
            type : 'date',
            editor : {
                type     : 'datetimefield'
            }
        }

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

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.

You can use https://bryntum.com/docs/scheduler/#Core/helper/DateHelper#function-format-static to format the date easily.

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".

Here's the renderer:

            renderer : ({ value }) => DateHelper.format(value, 'DD/MM/YYYY HH:mm')

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

Then this your code to use:

renderer : ({ value }) => value ? DateHelper.format(value, 'DD/MM/YYYY HH:mm') : 'N/A';

I have tried with your code, but it's not working for me.

Then I try with this and it's working for me.

return DateHelper.format(DateHelper.parse(record['start'],'DD.MM.YYYY HH:mm'),'DD.MM.YYYY HH:mm') || 'N/A';

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.

Please check screenshot
https://prnt.sc/11fj5pk
https://prnt.sc/11fjajz

Thanks

Ok, this is probably since your data / column / model is not configured correctly. To work with dates:

1. Add the 'start' field to your model class and set its format (important) describing the incoming date format. https://bryntum.com/docs/grid/#Core/data/field/DateDataField#config-format

2. Configure the column with its format for how you want the date visualized

If you face issues, please upload your current code as a simple test case and we'll have a look