Custom Format for date in data Grid In Vue

[Shivani]

Hello,

I want to give a custom date format in Datagrid in Vue. When user choose a date from date picker at that time I want 'yyyy-MM-dd' format.
I am referring to this document.

https://ej2.syncfusion.com/vue/documentation/datepicker/date-format/

but can not get the result that I want.
If possible then please share an example in Vue

import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars";

Vue.use(DatePickerPlugin);

<e-column field='DateClosed' :headerText='localizedArray.Lbl.dateClosed' :validationRules='dateCloseRules' editType= 'datepickeredit' :format='dateFormat' ></e-column>

export default {

data: function() {

    return {

     dateFormat: "yyyy-MM-dd",

};},}

[Prasanna Kumar Viswanathan]

Hi Shivani, 

 

Thanks for contacting Syncfusion support. 

 

Based on your query you need to display the value in custom format when you choose a date from date picker when the grid in editing state. To achieve the mentioned query we suggest you to use editParams property of column API. Using editParams property we can customize the editType component. 

 

Please find the code example and sample: 

 

<ejs-grid :dataSource="data" :editSettings='editSettings'> 

    <e-columns> 

        <e-column field="EmployeeID" headerText="Employee ID" width="125" textAlign="Right"></e-column> 

        <e-column field="FirstName" headerText="Name" width="120"></e-column> 

        <e-column field='BirthDate' :headerText="BirthDate" editType= 'datepickeredit' :format='dateFormat' :edit='dateParams'></e-column> 

        <e-column field="ReportsTo" headerText="Reports To" width="120" textAlign="Right"></e-column> 

    </e-columns> 

</ejs-grid> 

 

---------------------------------------------------------------- 

 

data: () => { 

    return { 

      data: employeeData, 

      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

      dateFormat: { type: 'date', format: 'yyyy-MM-dd' }, 

      dateParams: { params: {format: 'yyyy-MM-dd' } }, 

    }; 

  }, 

 

  

Sample: https://codesandbox.io/s/277551-template-mofified-lpncj?file=/src/App.vue:805-1066 

For more information please refer the below document, 

 

https://ej2.syncfusion.com/vue/documentation/treegrid/editing/#cell-edit-type-and-its-params 

 

Regards, 

Prasanna Kumar N.S.V 

[Shivani]

Hello,
Prasanna Kumar Viswanathan 

Thank you for your reply.
It works now.

[Prasanna Kumar Viswanathan]

Hi Shivani, 

 

We are happy to hear that your query has been resolved. 

 

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

 

Regards, 

Prasanna Kumar N.S.V