time-select

[osmancakir]

Would you please add the time select option as well.

[msnegurski]

Ok, I will try to do it on weekend

[osmancakir]

wow I wasn't expecting a reply, thanks for the tremendous effort man! Actually + year dropdown would make it complete :) I tried to make the time-select myself a bit and pasted the classes below. Maybe it will be helpful to you!

This popper class has some data-placement rules coming from bootstrap at the original datepicker scss file. . So managing the datepicker's position (appearing on top/right/left/bottom of the input) is a bit buggy too. I played around with the inset class of tailwind but no so much luck.

@tailwind base;
@tailwind components;
@tailwind utilities;

/* When you use these apply methods on form inputs you need to add the respective form classess to the individual components https://github.com/tailwindlabs/tailwindcss-forms */

/*Original Ones from msnegurski*/

.react-datepicker__input-container input {
    @apply block w-full text-base md:text-sm bg-white border border-gray-300 rounded shadow-sm form-input
}
/*changed w-72 to auto and added inset-0*/
.react-datepicker-popper {
    @apply z-40 w-auto text-sm inset-0 bg-white shadow px-3 py-2 border-2 border-gray-200 rounded 
}

.react-datepicker-left {
    @apply absolute left-0 right-auto top-11 transform-none !important
}

.react-datepicker-right {
    @apply absolute right-0 left-auto top-11 transform-none !important
}

/*changed w-72 to auto */
.react-datepicker__portal {
    @apply absolute z-10 w-auto text-sm transform-none bg-white shadow px-3 py-2 top-12 right-0 border-2 border-gray-200 rounded
}

.react-datepicker__month-container {
    @apply flex flex-col
}

.react-datepicker__month {
    @apply flex flex-col
}

.react-datepicker__current-month {
    @apply ml-2.5 text-lg font-semibold text-gray-800
}

.react-datepicker__week {
    @apply flex justify-around
}

.react-datepicker__day-names {
    @apply flex justify-around text-gray-400 font-medium text-center text-xs
}

.react-datepicker__day-name {
    @apply w-8 h-8 flex items-center justify-center py-1 rounded-full
}

.react-datepicker__navigation {
    @apply absolute top-2
}

.react-datepicker__navigation--previous {
    @apply right-12 w-8 h-8 rounded transition flex items-center justify-center hover:bg-gray-200
}

.react-datepicker__navigation--next {
    @apply right-4 w-8 h-8 rounded transition flex items-center justify-center hover:bg-gray-200
}

.react-datepicker__day {
    @apply mb-1 w-8 h-8 flex items-center justify-center py-1 text-sm leading-loose transition text-gray-700 rounded
}

.react-datepicker__day--disabled {
    @apply cursor-not-allowed opacity-40 hover:bg-transparent
}

.react-datepicker__day--outside-month {
    @apply text-gray-300
}

.react-datepicker__day--in-range {
    @apply bg-gray-200
}
/*changed bg-blue-200 to bg-lime-100 */
.react-datepicker__day--in-selecting-range {
    @apply bg-lime-100
}

/*changed border-blue-500 to border-lime-500 */
.react-datepicker__day--selecting-range-start {
    @apply bg-white border-2 border-lime-500
}

/*changed border-blue-500 to border-lime-500 */
.react-datepicker__day--selecting-range-end {
    @apply bg-white border-2 border-lime-500
}

.react-datepicker__day--selected {
    @apply bg-blue-500 text-white
}
/*changed bg-blue-500 to bg-lime-500 */
.react-datepicker__day--range-start {
    @apply bg-lime-500 text-white hover:text-gray-700 hover:bg-white
}

/*changed bg-blue-500 to bg-lime-500 */
.react-datepicker__day--range-end {
    @apply bg-lime-500 text-white hover:text-gray-700 hover:bg-white
}

/*my additions*/

.react-datepicker__input-container button {
    @apply focus:ring-lime-500 focus:border-lime-500
}

/*  HIDE Scrollbar
    https://github.com/tailwindlabs/tailwindcss/discussions/2394
    https://github.com/tailwindlabs/tailwindcss/pull/5732
*/
@layer utilities {
    /* Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .no-scrollbar {
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
    }
}

.react-datepicker {
    @apply flex justify-center w-full
}

.react-datepicker__time-container {
    @apply flex flex-col justify-center w-24
}

/* .react-datepicker__time--box {
    @apply overflow-y-scroll
} */

.react-datepicker__header--time {
    @apply  text-base text-center text-gray-800 rounded p-1 pt-2
}

.react-datepicker__time-list {
    @apply no-scrollbar overflow-y-auto w-full h-40 p-2
    
}

.react-datepicker__time-list-item {
    @apply hover:bg-lime-200 p-2
    
}

.react-datepicker-time__header {
    @apply ml-2.5 text-base font-semibold text-gray-800 border-2 py-1 
}

[osmancakir]

and if you give me a paypal.me link I would be happy to buy you a lunch :)

[msnegurski]

Hey sorry for long reply there is a war in my country so i coudlnt get to it, not sure if I will be able to return to it in nearest future