1. Home
  2. Forum
  3. React - EJ 2
  4. How to change the Grid Column value from Date to "dd/MM/yyyy" string?

How to change the Grid Column value from Date to "dd/MM/yyyy" string?

I am using ReactJS and want to get the datepickeredit value format is "dd/MM/yyyy".

const formatType = { type: "date", format: "dd/MM/yyyy" };

<ColumnDirective field='OrderDate' editType="datepickeredit" format={format} width='140'  />



// when editing, print the value
const actionBegin = args => {
    if (args.requestType === "save") {
      console.log(`save data: ${args.data}`);
    }
  };
When I editing the grid, the OrderDate value is "Fri Aug 07 2020 00:00:00 GMT+0800 (香港標準時間)"
but I want to get the value is "07/08/2020"

Because of my dataSource OrderDate is string of "dd/MM/yyyy"

How can I put the string "dd/MM/yyyy" to the grid and using datePicker to edit it? And get the value to become "dd/MM/yyyy" NOT "Fri Aug 07 2020 00:00:00 GMT+0800 (香港標準時間)"


3 Replies
TS Thiyagu Subramani Syncfusion Team April 9, 2020 10:05 AM UTC

Hi developer, 

Thanks for contacting Syncfusion forum. 

By default if we manage OrderDate field dataSource as string like ‘5/6/2018’, it’s considered as ‘MM/dd/yyyy’ (default format) format while defining corresponding field column type as date. So we suspect your requirement is have to set format as “dd/MM/yyyy” while editing the required column so we achieved this using edit template.  

Before saving the edited value you have to change format based on dataSource format using our formatDate method in actionComplate event. 

Please refer to the below code and sample link. 

[index.js] 
import { DatePicker } from '@syncfusion/ej2-calendars'; 
import { Internationalization } from '@syncfusion/ej2-base' 

export class NormalEdit extends SampleBase { 
  constructor() { 
    super(...arguments); 
    this.toolbarOptions = ["Add", "Edit", "Delete", "Update", "Cancel"]; 
    this.data = [ 
      { OrderID: 10248, CustomerID: "Ana Trujillo", constantType: true, otherFieldType: false, Freight: 32.38, OrderDate: '6/12/2019', ShipCountry: "Berlin" }, 
      { OrderID: 10249, CustomerID: "Antonio Moreno", constantType: false, otherFieldType: true, Freight: 11.61, OrderDate: '1/15/2019', ShipCountry: "Austria" }, 
      { OrderID: 10250, CustomerID: "Christina Berglund", constantType: true, otherFieldType: false, Freight: 65.83, OrderDate: '4/8/2019', ShipCountry: "Beligium" } 
    ];; 
. . . . . .  . 
    var datePickerObj; 
    this.datepickerTemp = { 
      create: () => { debugger; 
        this.elem = document.createElement('input'); 
        return this.elem; 
      }, 
      destroy: () => { 
        this.datePickerObj.destroy(); 
      }, 
      read: () => { 
        return this.datePickerObj.value; 
      }, 
      write: (args) => { 
        this.datePickerObj = new DatePicker({ 
          value: new Date(args.rowData[args.column.field]), 
          format : 'dd/MM/yyyy'  // Editing view 
        }); 
        this.datePickerObj.appendTo(this.elem); 
      } 
    }; 
  } 
  actionBegin(args) { 
    if (args.requestType === "save") { 
      let intl = new Internationalization(); 
      args.data.OrderDate = intl.formatDate(args.data.OrderDate, { format: "MM/dd/yyyy" }) 
      console.log(args.data); 
    } 
  } 
  render() { 
    return ( 
            <GridComponent 
              dataSource={this.data} 
            actionBegin={this.actionBegin.bind(this)} 
              . . . . . 
            > 
              <ColumnsDirective> 
                  . . . . .  
                <ColumnDirective 
                  field="OrderDate" 
                  headerText="Order Date" 
                  type='date' 
                  format='dd/MM/yyyy' // Initial view  
                  edit={this.datepickerTemp} 
                  width="160" 
                /> 
. . .  
              </ColumnsDirective> 
              <Inject services={[Page, Toolbar, Edit]} /> 
            </GridComponent> 
          </div> 
        </div> 
      </div> 
    ); 
  } 
} 
 




Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 


DE developer April 9, 2020 10:47 AM UTC

Thank you, The problem has been solved!!!

SK Sujith Kumar Rajkumar Syncfusion Team April 10, 2020 12:39 PM UTC

Hi developer, 

We are glad to hear that your problem has been resolved. Please get back to us if you require any further assistance. 

Regards, 
Sujith R 


Loader.
Up arrow icon