v
v
vue-tables-2
Search…
Date Columns
For date columns you can use daterangepicker as a filter instead of the normal free-text input. Note that you must import all the dependencies (JQuery + moment.js + daterangepicker) GLOBALLY, i.e on the window scope. You can check if this is so by typing typeof $().daterangepicker in the console. If it returns function you are good to go. To tell the plugin which columns should be treated as date columns use the dateColumns option. (E.g: dateColumns:['created_at','executed_at']).
For the client component the date must be rendered as a moment object for the filtering to work. You can use the toMomentFormat helper option to do that for you. It accepts the current format of the dates in your dataset, and uses it to convert those dates to moment objects. E.g, if you have a created_at column with a date like 2017-12-31, you can use toMomentFormat: 'YYYY-MM-DD'. To determine the presentation of the dates use the dateFormat option.
On the server component the filter will be sent along with the request in the following format:
1
{
2
query:{
3
created_at:{
4
start: '2010-12-31 00:00:00',
5
end: '2011-12-31 00:00:00'
6
}
7
}
8
}
Copied!
Date presentation on the server component is completely up to you. If you are unable to control the server response, you can use the templates option to "massage" the date you get from the server into the desired format.
Last modified 1yr ago
Copy link