Provide the ability to select duration formatter for datetime range field type

Good Suggestion. Will be an useful field formatter for date-range type fields.
Providing Functional tests for the formatter.

Uploading a new patch with the fixes.

@arisen Can you please provide some steps on how to reproduce this issue..?

@Nitin shrivastava The issue summary has been updated.
Testing steps:

• Setup a Drupal 11 site.
• Enable the Datetime Range module.
• Add Date Range field on any content type.
• Apply the provide patch.
• Go to the manage display tab of the content type and observe that a new Duration formatter is provided, select it and save.
• Add new content for the content type and view the content.
• The duration between start and end dates should be displayed instead of the actual dates.

Thanks for the Steps @arisen. Verified and tested patch duration_formatter-3340791-5.patch on Drupal version-
11.0-dev. The patch was applied successfully and looks good to me.

Testing Steps:

1. Set up the Drupal 11 site.
2. I enabled the Datetime Range module.
3. Added a Date Range field on any content type, Shared before results.
4. Applied the provided patch.
5. Go back to the Content>manage display tab> Go to Date formatter dropdown & select Duration and save.
6. Add new content for the content type and view the content.

Testing Results:
Now instead of the Start & end date, the duration between the start and end dates is displayed instead of the actual dates. This can move to RTBC.

Thanks @Sandeep_k for the review. This needs review from more community members so keeping it in needs review.

New formatter should have a change record. Visuals always help too.

Added the CR. Please review.

Think the formatter text needs some tweaking,

"Granularity" isn't super clear "How many different units to display in the range." doesn't help. This will need usability review probably got proper language.

But I change the granularity to 7 and it didn't have any impact on the display.

Wait, wait, wait… Shouldn’t this benefit from the Javascript functionality that we’ve already created in 🐛 Allow TimestampFormatter to show as a fully cacheable time difference with JS Fixed ?

IMHO, it’s the same thing, a time difference

Actually using that widget only makes sense when one of the range datetimes is NOW. But I have no idea if datetime range permits that

if datetime range permits that

The field requires both dates to be specified statically.

@Chi, isn’t ✨ Allow end date to be optional Needs work an issue that will change this behavior?

"Granularity" isn't super clear "How many different units to display in the range." doesn't help. This will need usability review probably got proper language.

That term is already used in "Time ago" formatter.

But I change the granularity to 7 and it didn't have any impact on the display.

The formatter output also depends on the range itself. If the difference between dates just a few seconds you will always see only one unit.

I think the more accurate label for this setting would be "Max granularity" but if we gonna use it same change needs to be applied to "Time ago" formatter.

Re #20. Seems so. BTW D7 Date module also offered a way to get duration.
https://git.drupalcode.org/project/date/-/blob/7.x-2.x/date.module?ref_t...

The UI can be improved through formatter summary.
Have a look how it's done in "Time ago" formatter.

BTW, the time ago formatter limits the granularity to 6 by some reason.

the time ago formatter limits the granularity to 6 by some reason

Created an issue. ✨ Increase max allowed granularity in Time ago formatter RTBC

The duration is not accurate enough when we use method formatInterval
Better to use method formatDiff

Tested with some sample data.

Instead of

$duration = $item->end_date->getTimestamp() - $item->start_date->getTimestamp();
      $elements[$delta]['#markup'] = $this->dateFormatter->formatInterval($duration, $this->getSetting('granularity'));

need to use
$elements[$delta]['#markup'] = $this->dateFormatter->formatDiff($item->start_date->getTimestamp(), $item->end_date->getTimestamp(), ['granularity' => $this->getSetting('granularity')]);

Rerolling the patch.

Hiding patches for clarity. Left a comment on MR.

I think the duration needs to be rendered using time tag.