elreco / vue-tailwind-datepicker

A Vue 3 Datepicker using Tailwind CSS
https://vue-tailwind-datepicker.com
MIT License
234 stars 44 forks source link

Calendar is not applying colors when selecting dates #128

Closed mferreiradb closed 1 year ago

mferreiradb commented 1 year ago

When trying to determine a start date and an end date, the calendar fills the two selected days with white and does not apply a background to the days that fall between the end date and the start date. In the print, I selected the 13th on the calendar on the left and the 17th on the calendar on the right.

print-calendar

Unfortunately I cannot make the repository available, as it is from an application of the company where I work.

cedric-nxstar commented 8 months ago

I just ran into this problem. It seems to happen when you use "colors.black" as the primary color in your tailwind.config.{js|ts}:

const colors = require("tailwindcss/colors")

export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/vue-tailwind-datepicker/**/*.js"
  ],
  theme: {
    extend: {
      colors: {
        "vtd-primary": colors.black, // Light mode Datepicker color
        "vtd-secondary": colors.white, // Dark mode Datepicker color
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

I reckon this happens because "black" can not be declined in "-50", "-100", "-200", ... versions.

It would be really great to be able to manually choose which color to apply to different parts of the picker, instead of being trapped with automatic variations of 2 colors.