Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

range picker of months, range picker of years, year picker, format value like reactdatepicker.com & add className props for customize tailwindcss class #3

Open
muh-hizbe opened this issue Nov 29, 2022 · 8 comments

Comments

@muh-hizbe
Copy link

@onesine
Copy link
Owner

onesine commented Nov 29, 2022

Thank you @muh-hizbe for the feature requests. It will be processed very soon.

@pbell23
Copy link

pbell23 commented Dec 13, 2022

className props would be awesome to customize design (like margins and padding for my usage)

Edit : I had not seen the package had been updated with props like inputClassName and containerClassName

I tested it, it's almost perfect but there's a little problem when adding classes already present in the base component. They might not override the base class because "the order that the classes appear in the class attribute doesn't matter, the rule that comes later in the CSS stylesheets wins". (Problem is described here : https://dev.to/diogoko/overriding-tailwind-classes-in-react-4po3).

For example, if you override py-2.5 from the base input classes with py-1.5 using inputClassName prop, py-2.5 will still be applied as py-2.5 comes after py-1.5 in the tailwind CSS stylesheet.

The solution proposed in this article is to use a utility functionality to efficiently merge tailwind classes like https://github.com/dcastil/tailwind-merge.

Example updated code with input classes : return twMerge('relative transition-all duration-300 py-2.5 pl-4 pr-14 w-full border-gray-300 dark:bg-slate-800 dark:text-white/80 dark:border-slate-600 rounded-lg tracking-wide font-light text-sm placeholder-gray-400 bg-white focus:ring disabled:opacity-40 disabled:cursor-not-allowed ${border} ${ring}', classNameOverload);

@onesine
Copy link
Owner

onesine commented Dec 16, 2022

Hello @pbell23 👋

Sorry for the delay.

Thank you very much for your feedback which I really appreciate. I really like your explanation of the problem and also the package that you have just made me discover.

Thanks to you, I just learned something. I will correct the problem very soon.

PR's are always welcome.

Feel free to contribute.

@danielweil
Copy link

I really like the package and would be super interested in the possibility to choose month only.

@onesine
Copy link
Owner

onesine commented Dec 16, 2022

Hello @danielweil 👋

Thank you for your feedback.

Please be reassured.
We will do our best to answer your request as soon as possible.

@awclinintell
Copy link

Is this still not available? Would also like to have a monthly only option.

@prime-voucher
Copy link

Still not available for month and year picker?

@parth1605
Copy link

Still waiting for the year picker and month picker features as it is available in every other date-picker and makes work simpler and faster.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants