1. Home
  2. Forum
  3. Vue
  4. formatting dates in grid

formatting dates in grid

Hi all,

I'm testing the grid component from essential js 2 for vue.
After some investigation and the following link, I got the date time formatting work for our culture 'de' with the mentioned format string 'yMMdd':

https://www.syncfusion.com/forums/136149/format-date-in-grid

at this point, I don't understand how these format strings have to be build. In the docs, this format 'yMMdd' isn't listed, but it works -> 26.07.2018.
'MM', 'dd' or 'yy' doesn't work and 'yyMMdd' doesn't work either.

My question, how can a short version like '26.07.18' be build?

TIA

Ulf



8 Replies
DR Dhivya Rajendran Syncfusion Team July 27, 2018 05:16 AM UTC

Hi Ulf, 
Thanks for contacting Syncfusion support. 

Query : how can a short version like '26.07.18' be build? 

We have analyzed your requirement and created a sample for your reference. In the below sample, we have specified the format type as date and skeleton as short to display short version (26.07.18) for OrderDate columns in Grid. You also can achieve your requirement by using the below way. 

Kindly refer to the below code example and sample for more information. 

import Vue from "vue"; 
import { GridPlugin, Page, Sort, Filter, Group, Aggregate, Edit, Toolbar } from "@syncfusion/ej2-vue-grids"; 
import { loadCldr, L10n, setCulture, setCurrencyCode } from '@syncfusion/ej2-base'; 
import * as currencies from './currencies.json'; 
import * as cagregorian from './ca-gregorian.json'; 
import * as numbers from './numbers.json'; 
import * as timeZoneNames from './timeZoneNames.json'; 
import * as numberingSystems from './numberingSystems.json'; 
loadCldr(currencies, cagregorian, numbers, timeZoneNames, numberingSystems); 
setCulture('de'); 
setCurrencyCode('EUR'); 
Vue.use(GridPlugin); 
 
new Vue({ 
  el: '#app', 
  template: ` 
   <div id="app"> 
        <ejs-grid ref='grid' :columns="columns" :dataSource="data" :allowPaging="true" :allowSorting='true' :allowFiltering='true'> 
        </ejs-grid> 
    </div>`, 
 
  data() { 
    return { 
      columns: [ 
      {field: 'OrderDate', visible: true, width: 150,format:{type: 'date', skeleton:'short'} }, 
      {field: 'Freight', type: 'number', format: 'N2', visible: true, width: 150}] 
    }; 
  }, 
  provide: { 
    grid: [Page, Sort, Filter, Group, Aggregate, Edit, Toolbar] 
  } 
 
}); 



Help documentation :  



Regards,
R.Dhivya 


UB Ulf Brinker August 2, 2018 10:13 AM UTC

Thank you for your quick answer, the skeleton:'short' works.
But how can we ensure, that the format is kept during editing?



BTW, does your Lib also provide an input mask validation?

Regards
Ulf



HJ Hariharan J V Syncfusion Team August 3, 2018 11:24 AM UTC

Hi Ulf, 
Thanks for your update. 

Query : how can we ensure, that the format is kept during editing? 
 
We have validated query and you can achieve your requirement by using the below way. In the below code example, we have applied format as “dd.MM.yy” for date picker component in Grid by using editParams property.  

Kindly refer to the below code example and documentation for more information. 

new Vue({ 
    el: '#app', 
    template: ` 
    <div id="app"> 
        <ejs-grid ref='grid' :columns="columns" :dataSource="data" :allowPaging="true" :allowSorting='true' :allowFiltering='true':pageSettings='pageSettings':editSettings='editSettings' :toolbar='toolbar'> 
        </ejs-grid> 
    </div> 
`, 
 
  data() { 
    return { 
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true}, 
      toolbar: ['Add', 'Edit', 'Delete'], 
      columns: [ {field: 'EmployeeID', width: 150, isPrimaryKey: true}, 
              {field: 'OrderDate', visible: true, width: 150,format:{type: 'date', skeleton:'short'},editType :'datepickeredit', edit: { params: { format:'dd.MM.yy' } } }, 
      {field: 'CustomerID', visible: true, width: 150}] 
    }; 
  }, 
  provide: { 
    grid: [Page, Sort, Filter, Group, Aggregate, Edit, Toolbar] 
  } 
 
}); 



Query : does your Lib also provide an input mask validation? 
 
We have analyzed your requirement and created a sample for your reference. In the below sample we have created a mask text box for the OrderID columns in Grid by using the cell edit template feature. You can also achieve your requirement by using the below way. 

Kindly refer to the below code example and sample for more information.  
  
new Vue({ 
    el: '#app', 
    template: ` 
    <div id="app"> 
        <ejs-grid ref='grid' :columns="columns" :dataSource="data" :allowPaging="true" :allowSorting='true' :allowFiltering='true':pageSettings='pageSettings':editSettings='editSettings' :toolbar='toolbar'> 
        </ejs-grid> 
    </div> 
`, 
 
  data() { 
    return { 
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true}, 
      toolbar: ['Add', 'Edit', 'Delete'], 
      columns: [ {field: 'EmployeeID', width: 150, isPrimaryKey: true}, 
        {field: 'OrderID', width: 150, edit: { 
                create: function(){ 
                    elem = document.createElement('input'); 
                    return elem; 
                }, 
                read: function() { 
                    return mask.value; 
                }, 
                destroy: function() { 
                    mask.destroy(); 
                }, 
                write: function(args){ 
                  mask = new MaskedTextBox({ 
              mask: '#####',}); 
        mask.appendTo(elem); 
 
                } 
            }}, 
            {field: 'CustomerID', visible: true, width: 150}] 
    }; 
  }, 
  provide: { 
    grid: [Page, Sort, Filter, Group, Aggregate, Edit, Toolbar] 
  } 
 
}); 




Regards,
Hariharan 


UB Ulf Brinker August 6, 2018 10:22 AM UTC

Thank you again, 

but when I use the MaskedTextBox the datepickeredit icon disappears:


Is there a way, to combine this?

Regards
ulf


UB Ulf Brinker August 7, 2018 08:39 AM UTC

sorry me again, 
can you please provide a sample, that also includes the validationrules propery.

My experiments lead to:



Regards
ulf
 

UB Ulf Brinker August 7, 2018 09:07 AM UTC

to illustrate the validation problem, I have created a fork from your example:

https://next.plnkr.co/edit/5lx7y0FdBUjRe9vO

required is set to false


UB Ulf Brinker August 8, 2018 10:41 AM UTC

the validation can be done by:

valiDateRules: { required: false, date: [(args) => {return args['value'] == "__.__.__" || moment(args['value'], 'DD.MM.YY').isValid();}, 'alert'] },

but I still have no idea, how to get a MaskedTextBox with datepicker behavior in a table cell (templates?)


I also found this:

https://www.syncfusion.com/forums/130340/input-mask-on-datapicker

but how can this be applied to a table cell in vue?


HJ Hariharan J V Syncfusion Team August 9, 2018 05:45 AM UTC

Hi Ulf,  
   
We have already considered to provide masking support for DatePicker component at our end. This feature will be included in any of our upcoming releases.   
   
Regards,  
Hariharan 


Loader.
Up arrow icon