feat: allow providing custom date format via base Date Formatter

[ghiscoding]

Allow the user to provide a custom date format via a new basic date Formatter, the user must provide the format through params.dateFormat in his column params. Note that the input date type must still be provided the same as before, this PR is just an easier way to show different output format in the UI

For example

this.columns = [
  {
    id: 'start', name: 'Start', field: 'start',
    type: FieldType.date,
    formatter: Formatters.date, // base date formatter which requires "params.dateFormat"
    params: {
      dateFormat: 'MMM DD, YYYY' // ie: Dec 30, 2000
    },
  }
];

Demo

with the code above, we have this working demo

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.0%. Comparing base (1352f2e) to head (e8c9dfc).
Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##           master    #1928     +/-   ##
=========================================
+ Coverage   100.0%   100.0%   +0.1%     
=========================================
  Files         187      187             
  Lines       34570    34578      +8     
  Branches    10282    10289      +7     
=========================================
+ Hits        34544    34552      +8     
  Misses         26       26             

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[ghiscoding]

@zewa666 so that's what I came up with to address custom date formats, I had to revisit Sorting & Filtering too, because without them working would have been confusing to the user and it's interesting to have them work too even if it increases the library size a tad more

[zewa666]

so how would that behave with a graphql/odata backend? would the outputDate control filter/sorting here as well?

[ghiscoding]

So what I had in mind was to make inputFormat equal type and outputFormat equal outputType and then I thought what about Filtering, Sorting and.... perhaps I was way over the top with this PR and I should scale it back...a lot! 😆

All I really wanted to do, was to provide an easier approach for the end user to provide any custom date format without having to create a custom formatter every time... and now with this updated PR it does just that, no need to touch Filtering/Sorting after all (the only sad thing is that we still need to use outputType for the Filter date picker, but that should be fine, I'm more interested in the format in the grid and don't care much about filter)

[zewa666]

I can see the benefit for being able to quickly change the formats there without the need for custom formatter functions. sadly the reality is that more than often I find my anyways creating one due to sudden feature requests 😅

nevertheless this looks good except one thing I'd like to ask for how it behaved and that is copy&paste. enabling copy formatted value would respect this one as well I'd assume right?

[ghiscoding]

enabling copy formatted value would respect this one as well I'd assume right?

yes the logic is to check if there's a Formatter on the cell, if there is then run it to get formatted output and so that will behave the same as before because in the end this new PR just adds a basic Date Formatter (so when exportWithFormatter flag is enabled then new format will be used, otherwise original input cell value is returned)... in the end, regular type and outputType with FieldType in the columns for dates are still preferred (because they work with Filters/Sorts and Date Picker), and this PR does is just to add a simple way to display date differently (that is for UI, cell copy & cell Export)

[ghiscoding]

so here it is below with exportWithFormatter enabled and it works as intended. I also tried separately without the flag and as expected it just returns the original input cell value