GithubHelp home page GithubHelp logo

johnpolacek / date-range-picker-for-shadcn Goto Github PK

View Code? Open in Web Editor NEW
406.0 5.0 17.0 269 KB

DateRangePicker is a reusable component for shadcn using Radix UI and Tailwind CSS. Includes preset date ranges, text entry, calendar selection and date comparison

Home Page: https://date-range-picker-for-shadcn-demo.vercel.app/

License: MIT License

JavaScript 8.50% TypeScript 91.50%
datepicker shadcn shadcn-ui tailwind tailwind-css

date-range-picker-for-shadcn's People

Contributors

johnpolacek avatar johnpolacek-veg avatar wbsdickson avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

date-range-picker-for-shadcn's Issues

Click interactions for selecting From and To dates wrong?

Not sure, but it feels like this component is acting up, at least on our end.

To me, the expected behaviour is that any time I open the date range picker, the first click would always set the "From" date, and the second click would always set the "To" date. Currently, it feels like the picker doesn't always allow you to set the "From" date first, but actualy just updates the "To" date?

Today and Yesterday Pre selects not working,

Hi firstly let me say, amazing component, i love it.

I noticed in Console.logs

<DateRangePicker onUpdate={(values) => { const { range } = values; console.log( Selected Date Range: From ${range.from.toISOString()} to ${range.to?.toISOString()});

Selected Date Range: From 2024-04-01T23:00:00.000Z to 2024-04-01T23:00:00.000Z

This is what i get back when i select, Today,

Selected Date Range: From 2024-03-31T23:00:00.000Z to 2024-03-31T23:00:00.000Z

This is what i get back when i select Yesterday,

Selected Date Range: From 2024-03-31T00:00:00.000Z to 2024-04-01T23:00:00.000Z

This is what i get back when i select Last week.

Everything works expect Today & Yesterday, the Console.logs shows a specific moment for Today & Yesterday rather then capturing the entire day

datetime picker

Thank you for this addons! could you please consider integrating a time picker feature.

How to work on local environment?

I wanted to help fix a bug I noticed on mobile for your website and then proceeded to fork the repo.
Sadly I wasn't able to run the project locally and inspecting package.json doesn't seem to include any npm script.

Could you give me some pointers?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.