search

dan-lee / timescape

A flexible, headless date and time input library for JavaScript. Provides tools for building fully customizable date and time input fields, with support for libraries like React, Preact, Vue, Svelte and Solid.
https://timescape.daniellehr.de
MIT License
153 stars 2 forks source link

[Feature Request] Support Date Time Range Picker #2

Closed frogdevvn closed 11 months ago

frogdevvn commented 1 year ago

Thanks for great repo. I would like to ask if you can add support for date time range picker like React-Aria: https://react-spectrum.adobe.com/react-aria/DateRangePicker.html

dan-lee commented 1 year ago

Hey @frogdevvn, thanks that's a great idea 💡! I'll think a bit about how this could be best implemented with the current library

gmwill934 commented 1 year ago

I second this! :)

dan-lee commented 1 year ago

What do you think about this API?

const { from, to, isValid } = useTimescapeRange({
  minDate: new Date('2020-01-01'),
  maxDate: new Date('2024-01-01'),
  // ...
})

// ...

<div>
  <input {...from.getInputProps('days') />
  <input {...to.getInputProps('days') />
  {isValid ? '⛔️' : '✅'}
</div>
frogdevvn commented 11 months ago

What do you think about this API?

const { from, to, isValid } = useTimescapeRange({
  minDate: new Date('2020-01-01'),
  maxDate: new Date('2024-01-01'),
  // ...
})

// ...

<div>
  <input {...from.getInputProps('days') />
  <input {...to.getInputProps('days') />
  {isValid ? '⛔️' : '✅'}
</div>

Hi. Look good :) Hope you can release it soon.

dan-lee commented 11 months ago

This has been released in v0.4.0 🚀

You can check it out here: https://timescape.daniellehr.de/?path=/story/root-timescape--range-calendar