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

how to change the range picker color #86

Open
shanoysinc opened this issue Aug 27, 2024 · 6 comments
Open

how to change the range picker color #86

shanoysinc opened this issue Aug 27, 2024 · 6 comments

Comments

@shanoysinc
Copy link

image

@shanoysinc
Copy link
Author

its purple and i dont see away to change its color

@shanoysinc
Copy link
Author

@aboveyunhai any idea ?

@aboveyunhai
Copy link
Owner

aboveyunhai commented Aug 28, 2024

its purple and i dont see away to change its color

you should go through the readme, there is an example where you can change the style based on the state,
it's just CSS, color might be what you need

 propsConfigs={{
    dateNavBtnProps: {}
    dayOfMonthBtnProps: {
      defaultBtnProps: {
        borderColor: "red.300",
        _hover: {
          background: 'blue.400',
        }
      },
      isInRangeBtnProps: {
        color: "yellow",
      },
      selectedBtnProps: {
        background: "blue.200",
        color: "green",
      },
      todayBtnProps: {
        background: "teal.400",
      }
    },
 }}

@shanoysinc
Copy link
Author

shanoysinc commented Aug 29, 2024

its purple and i dont see away to change its color

you should go through the readme, there is an example where you can change the style based on the state, it's just CSS, color might be what you need

 propsConfigs={{
    dateNavBtnProps: {}
    dayOfMonthBtnProps: {
      defaultBtnProps: {
        borderColor: "red.300",
        _hover: {
          background: 'blue.400',
        }
      },
      isInRangeBtnProps: {
        color: "yellow",
      },
      selectedBtnProps: {
        background: "blue.200",
        color: "green",
      },
      todayBtnProps: {
        background: "teal.400",
      }
    },
 }}

I cant get any of them to change the hover purple color even when you select them I can't change the purple color there as well.
https://github.com/user-attachments/assets/df78e375-023d-4ae9-b8f1-895ddf08c9a6

@aboveyunhai
Copy link
Owner

aboveyunhai commented Aug 29, 2024

@shanoysinc something like

       isInRangeBtnProps: {
          background: 'blue.300',
       },

I highly suggest just skim though the source code as it's really simple. so you don't need to guess the default property and what to overwrite.

@shanoysinc
Copy link
Author

@shanoysinc something like

       isInRangeBtnProps: {
          background: 'blue.300',
       },

I highly suggest just skim though the source code as it's really simple. so you don't need to guess the default property and what to overwrite.

Thanks @aboveyunhai I could have sworn I tried that and it didn't work

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

2 participants