aurelia-v-grid / vGrid

Aurelia-v-grid - npm source
MIT License
49 stars 10 forks source link

Feature Request: Support Date type #26

Closed Vaccano closed 8 years ago

Vaccano commented 8 years ago

Right now, if I pass in a value that is of type Date then it is shown as {{myDate}} in the grid.

So I made a property on my class that converts the date to a string.

But this causes sorting issues. For example 2/25/2016 is considered more recent than 2/8/2016. This is because it is doing string sorting. and 2/2 of 2/25/2016 is a lower string than 2/8 of 2/8/2016.

It would be nice to be able to pass in a date value and have it understood as a date.

One problem that goes with this is how to format the date. You would almost need to supply a callback for date formatting. (Or provide your own formatting, but that is a problem already solved by libraries like Moment.)

Vaccano commented 8 years ago

I can work around this by formatting my date and time differently. If I use 2016/08/02 then it is shown in the right order.

However, for times I am forced to use military time (base 24 hour system, ie 2:00 pm = 14:00).

vegarringdal commented 8 years ago

It have a onRowDraw where you can change the data before you display it in the grid, see bottom readme file, at work now, so wont be able to fix anything the next 8 hours

vegarringdal commented 8 years ago

Been thinking about this one, maybe add option/attribute to set callback, so you can set displayed value, value while editing,and after edited. if I do something here I will need to do something about numbers too.

vegarringdal commented 8 years ago

been playing around with this: Change the onRowDraw so this passed a object you can edit without editing the main collection, and it also sends a ref to original object in collection.

Added option to handle format handler, it gets called when user have edited and when doing filtering

This way you can have iso string/real date object in collection, use the onRowDraw to set in a formatted date on rendering (adding a "dateFormated" property to collection would be less of a performance issue

When editing, you get the object before it update the collection, then you can parse it and edit before returning it, same with when filtering.

II can send you a link later to the dev demo if you want to comment

vegarringdal commented 8 years ago

Callback implemented

Main ide is to convert before displaying it in grid, then after edit, and before filter.

Add vGrid element name of the callbacks you wanto use

row-on-draw="onRowDraw"
format-handler="myFormatHandler"

onRowDraw (data, collectionData) { if (data) { data.date = this.myCustomDateFormater(data.date) //this does not edit collection data } }

myFormatHandler(type, obj){

if(type === "afterEdit"){ if(obj.attribute === "date"){ //obj.oldValue if the collection value like date etc //obj.value is the date coming from input, you need to validate it and insert in correct format, or reject by setting back old value } }

if(type === "onFilter"){ obj.forEach((x) => { if(x.attribute === "date"){ //here you need to convert the obj.value to same format as in you collection, so grid can just filter it. } }) }

vegarringdal commented 8 years ago

code how to use the materialize datepicker in the readme file to support this issue better http://vegarringdal.github.io/vGrid/datepickerdemo001/

haveto double click a date cell to open the datepicker, just single click in the filter