Date picker cell

[pzcfg]

It's possible to make a custom one, but it'd be great to have a built-in date picker cell.

Ideally this would support:

• text input as well as a calendar overlay
• specific dates as well as date ranges
• a way to limit the earliest/latest date(s) to pick
• (maybe?) a way to style calendar dates (e.g. showing availability)

[jassmith]

Suggestions for the editor component?

[pzcfg]

I was just starting to look into that myself 😅 still figuring out what the options are and their pros/cons

[msdrigg]

I was just about to create an issue for this. I see three possible ways to make this work

1. If you really want to make it generic, you could just support validated text input and provide a handle for users to supply their own calendar picker dom element. (Similar to how header menus provide the bounding box and allow users to build menus with react-laag or similar).
2. Rolling a calendar picker into the canvas drawing? (No idea if this is even feasible or makes any sense).
3. Integrating some existing calendar component with compatible licensing (this may be the easiest but the least extensible).

[jassmith]

Let me make a demo branch for #1 it is very very slim I think. By default I can make it just use an which has the correct type set, but allow the editor to be overridden easily to whatever you want. In hindsight I should have made this much easier for a lot of things. Oh well, live and get screwed over by your past self repeatedly until the spiderman meme is just how you think about life amiright?

[jassmith]

I've implemented a basic DatePicker cell here. Note that it has zero fucks to give about timezones, it basically just always picks the time in UTC and if you want to make that local time that's your problem.

https://github.com/glideapps/glide-data-grid/pull/372

If you wanted to replace the date picker you would simple do:

const myDatePicker = {
  ...DatePickerCell,
  provideEditor: () => p => {
    return <SomeCustomDatePicker {...withSomeArgs} />
  }
}

[jassmith]

and then you can pass that thing to your call to useCustomCells

[jassmith]

Merged into 4.1.1

[BrianHung]

Suggestions for the editor component?

New one https://react-spectrum.adobe.com/blog/date-and-time-pickers-for-all.html or https://github.com/react-dates/react-dates (as examples).

[arogozhnikov]

@BrianHung your second suggested component is non-typable, one has to click and select. Within grid clicking for every date element is a bad idea.

[nandorojo]

Note that it has zero fucks to give about timezones, it basically just always picks the time in UTC and if you want to make that local time that's your problem.

For anyone wondering how to turn easily get the year/month/day from the date picker cell without any timezone issues, I did this inside of onCellEdited:

let date = (value as DatePickerCell).data.date
const year = date.toUTCFullYear()
const month = date.getUTCMonth() // 0-index
const day = date.getUTCDate()

If you're using a library like luxon, you can do this:

DateTime.fromObject({ year, month: month + 1, day })

or simply:

const pickedDate = new Date(year, month, day)