We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid DatePicker different format when editing

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


1 Reply

JC Joseph Christ Nithin Issack Syncfusion Team March 13, 2023 07:43 PM UTC

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.


Loader.
Live Chat Icon For mobile
Up arrow icon