Grid DatePicker different format when editing

[Hector]

Hello.

Im having some problems with the datePickerEdit type in the grid.

The format Im using for my date is 'dd/MM/yyyy', which renders fine in the Grid. The problem is, when I enter the edit mode, the datePicker input uses the format 'MM/dd/yyyy'. I would like to make it 'dd/MM/yyyy' as well.

Example:

Normal format:

 

Format in edit mode:

My code:

<GridComponent dataSource={getDataManager()}

                      ref={grid => gridInstance = grid}

                      toolbar={toolbarOptions}                    

                      gridLines='Both'

                      allowPaging={true}                      

                      editSettings={editSettings}

                      pageSettings={pageSettings}

                      allowSorting={true}

                      allowFiltering={true}

                      filterSettings={{type: "CheckBox"}}

                      actionFailure={onActionFailure}    

                      actionComplete={onActionComplete}                                                      

                >              

        <ColumnsDirective>

          <ColumnDirective type='checkbox' width='50'></ColumnDirective>

          <ColumnDirective field='id' headerText='id' width='140' isPrimaryKey={true} visible={false} ></ColumnDirective>  

          <ColumnDirective field='fecha' headerText="Fecha" editType='datePickerEdit' type='date' format='dd/MM/yyyy' width='100' textAlign='Center' visible={true} allowFiltering={true}>

          </ColumnDirective>                                      

          <ColumnDirective field='moneda' headerText="Moneda" width='180' textAlign='Center' visible={false} allowFiltering={true}

          foreignKeyValue='descripcion' foreignKeyField='moneda' dataSource={monedas}>

          </ColumnDirective>                                      

          <ColumnDirective field='comprador' type='number' editType='numericEdit' headerText="Comprador" width='80' textAlign='Center' visible={true} allowEditing={true}

                           allowFiltering={false}>                            

          </ColumnDirective>

          <ColumnDirective field='vendedor' type='number' editType='numericEdit' headerText="Vendedor" width='140' allowFiltering={true}>                                  

          </ColumnDirective>  

          <ColumnDirective field='comentario' headerText="Comentario" width='80' textAlign='Right' visible={true} allowEditing={true}>

          </ColumnDirective>                

        </ColumnsDirective>

        <Inject services={[Page, Toolbar, Edit, Sort, ForeignKey, Filter, Resize, Selection]} />

      </GridComponent>

Thank you for your time

[Joseph Christ Nithin Issack]

Hi Hector,

  Greetings from Syncfusion support.

  Based on your query, you want to change the format of the date displayed in the datepicker while editing. Your requirement can be achieved by customizing the editors using the params. Please refer the below documentation for more details on customizing the behavior of the components based on the datatype of the column.

Documentation: https://ej2.syncfusion.com/react/documentation/grid/editing/edit-types#customize-editors-using-params

Regards,

Joseph I.