Need example of date-picker table without date input

[wilcoschoneveld]

Hello!

I would like an example of the date picker component with "@ark-ui/react": "1.0.1"

I've tried to construct it myself but the datepicker components seem to rely on a trigger and only then show

Requirements:

• Should show date picker table immediately (not in a popup)
• No input box needed, just the grid/table
• No need for positioner or portal, just render

If possible I would also like an example of two months side by side

Could you post a code snippet please? Or point me to the right direction.

Thanks!

[cschroeter]

@wilcoschoneveld

Something like this?

Bildschirmaufnahme.2023-11-21.um.14.23.10.mov

9b52199#diff-8f660d2bf0c3095b76165aa2bd41dcd482cc6f5a31294f976ba9cca5e0ae9f23

[wilcoschoneveld]

@cschroeter

when using:

    <DatePicker.Root open={true}>
    </DatePicker.Root>

I get a warning in the console:

[@zag-js/dismissable] node is `null` or `undefined` 

is that a problem?

[cschroeter]

No. The DatePicker machine is looking for a data-part="content" which is not available. You could add the Content part and f orce the present on the DatePicker.Root but unfortunately we have a bug there :D So please just ignore the warning. I will let you know when there is a fix

<DatePicker.Root
      open={true}
      numOfMonths={2}
      selectionMode="range"
      closeOnSelect={false}
      present
    >
      {(api) => {
        const offset = api.getOffset({ months: 1 })
        return (
          <DatePicker.Content>
          /* ... */ 
          

[wilcoschoneveld]

Alright! Thanks for the quick answer

[wilcoschoneveld]

@cschroeter Unfortunately the proposed solution is not meeting the requirements for us because it breaks the accessibility features of the date picker. I've tested a bit and it seems I need the DatePicker.Content for keyboard navigation to work properly. But this introduces the bug that clicking outside the datepicker hides it. Any suggestions?

[cschroeter]

This will be fixed when chakra-ui/zag#1027 is resolved. Let me see if I can come up with a workaround.