Add month granularity option for DateField / DateInput

[deebov]

Hey! We absolutely love these components and their option for granularity.

What would be also cool is to allow month granularity for specifying only month and year. This would be especially very handy for fields like expiration date of credit card.

Is this something the React Aria team would consider supporting?

[reidbarber]

Looks like this was brought up in #6415 as well.

I'll bring this up with the team to determine if this is something we would be open to accepting a contribution for. This likely won't be something our team would work on unless we have the use case come up in our Spectrum design system.

[reidbarber]

Brought this up with the team, and while this would be great to have, it may be more complicated to implement than it seems. One issue is that you can't convert between different calendar systems. If you say it's the first day of the month in one calendar, then convert it to another, you don't exactly know which month that represents. We would probably need to be implement a new type for this in @internationalized.

Not ideal, but one solution would be to just use two number fields to implement this.

[antoniojps]

So I tested out adding granularity to month with the DateField component and it works?

The Granularity type is not supposedly supported, but it works quite well.

Am I missing something?

[yihuiliao]

Did it work when you were converting the dates between calendars as well?

[antoniojps]

I didn't test that as I don't have that requirement.

Haven't looked at the source code, but this works:

<DateField granularity="month">
  <DateInput>
    {(segment) => (
      <DateSegment segment={segment} />
    )}
  </DateInput>
</DateField>

[snowystinger]

We do have that requirement, so if it doesn't work for that, then we cannot claim to support it, unfortunately. We don't want to mislead people with a "it works for this one particular case".