DateTimePicker custom styles

Hi, to customize the Datetimepicker styles, you'll need to initialize it with JavaScript and pass a configuration object that combines both Datepicker and Timepicker classes. You can find all available class options in our API documentation under: Datepicker Classes and Timepicker Classes

Here's how to structure it:

const datetimepicker = new Datetimepicker(
element, 
{
    datepicker: { /* datepicker props */ },
    timepicker: { /* timepicker props */ }
}, 
{
    datepicker: { /* datepicker classes */ },
    timepicker: { /* timepicker classes */ }
});

Check out also this example:

HTML:
      <div
        class="relative mb-3"
        data-twe-input-wrapper-init
        id="datetimepicker-dateOptions"
      >
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="form8"
        />
        <label
          for="form8"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Select a time</label
        >
      </div>

UMD JS initialization:
 const pickerDateOptions = document.querySelector(
      "#datetimepicker-dateOptions"
    );
    new twe.Datetimepicker(
      pickerDateOptions,
      {
        datepicker: {
          format: "dd-mm-yyyy",
        },
      },
      {
        datepicker: {
          datepickerHeader:
            "xs:max-md:landscape:h-full h-[120px] px-6 bg-red-500 flex flex-col rounded-t-lg rounded-bl-none sm:max-md:rounded-bl-lg sm:max-md:rounded-tr-none dark:bg-body-dark",
        },
        timepicker: {
          timepickerHead:
            "bg-red-500 dark:bg-body-dark h-[100px] rounded-t-lg pe-[24px] ps-[50px] py-[10px] min-[320px]:max-[825px]:landscape:rounded-tr-none min-[320px]:max-[825px]:landscape:rounded-bl-none min-[320px]:max-[825px]:landscape:p-[10px] min-[320px]:max-[825px]:landscape:pe-[10px] min-[320px]:max-[825px]:landscape:h-auto min-[320px]:max-[825px]:landscape:min-h-[305px] flex flex-row items-center justify-center",
        },
      }
    );

I used the code below for options and classes and it worked for most styles (changed all 'primary' to 'main-nav' custom color) except for the selected default date which remained primary, and when I tried to change it in 'datepickerCellContent' (group-data-[twe-datepicker-cell-selected]:bg-primary) the day number became invisible!

I also need to make the first clickable day is the default date, so I made 'startDate' in datepicker the same as the default date (tomorrow not today) but that didn't work!

const options = { toggleButton: false, disablePast: true, defaultDate : dd, defaultTime : dt, datepicker: { startDate: dd, }, timepicker: { } }; const classes = { buttonsContainer: "flex justify-evenly items-end bg-main-nav dark:bg-zinc-800 dark:data-[twe-buttons-timepicker]:bg-zinc-700", toggleButton: "flex items-center justify-content-center [&>svg]:w-5 [&>svg]:h-5 absolute outline-none border-none bg-transparent right-0.5 top-1/2 -translate-x-1/2 -translate-y-1/2 hover:text-main-nav focus:text-main-nav dark:hover:text-main-nav dark:focus:text-main-nav dark:text-white", datepicker: { datepickerCellContent: "mx-auto group-[:not([data-twe-datepicker-cell-disabled]):not([data-twe-datepicker-cell-selected]):hover]:bg-black/5 group-data-[twe-datepicker-cell-selected]:bg-primary group-data-[twe-datepicker-cell-selected]:text-white group-[:not([data-twe-datepicker-cell-selected])[data-twe-datepicker-cell-focused]]:bg-black/5 group-data-[twe-datepicker-cell-focused]:data-[twe-datepicker-cell-selected]:bg-main-nav group-data-[twe-datepicker-cell-current]:border-solid group-data-[twe-datepicker-cell-current]:border-black group-data-[twe-datepicker-cell-current]:border dark:group-[:not([data-twe-datepicker-cell-disabled]):not([data-twe-datepicker-cell-selected]):hover]:bg-black/10 dark:group-data-[twe-datepicker-cell-current]:border-white dark:text-white dark:group-[:not([data-twe-datepicker-cell-selected])[data-twe-datepicker-cell-focused]]:bg-black/10 dark:group-data-[twe-datepicker-cell-disabled]:text-white/50", datepickerHeader: "xs:max-md:landscape:h-full h-[120px] px-6 bg-main-nav flex flex-col rounded-t-lg rounded-bl-none sm:max-md:rounded-bl-lg sm:max-md:rounded-tr-none dark:bg-body-dark", datepickerToggleButton: "flex items-center justify-content-center [&>svg]:w-5 [&>svg]:h-5 absolute outline-none border-none bg-transparent right-0.5 top-1/2 -translate-x-1/2 -translate-y-1/2 hover:text-main-nav focus:text-main-nav dark:hover:text-main-nav dark:focus:text-main-nav dark:text-white" }, timepicker: { tipsActive: "text-white bg-main-nav font-normal", timepickerHead: "bg-main-nav dark:bg-body-dark h-[100px] rounded-t-lg pe-[24px] ps-[50px] py-[10px] min-[320px]:max-[825px]:landscape:rounded-tr-none min-[320px]:max-[825px]:landscape:rounded-bl-none min-[320px]:max-[825px]:landscape:p-[10px] min-[320px]:max-[825px]:landscape:pe-[10px] min-[320px]:max-[825px]:landscape:h-auto min-[320px]:max-[825px]:landscape:min-h-[305px] flex flex-row items-center justify-center", timepickerMiddleDot: "top-1/2 left-1/2 w-[6px] h-[6px] -translate-y-1/2 -translate-x-1/2 rounded-[50%] bg-main-nav absolute", timepickerHandPointer: "bg-main-nav bottom-1/2 h-2/5 start-[calc(50%-1px)] rtl:!left-auto origin-[center_bottom_0] w-[2px] absolute", timepickerPointerCircle: "-top-[21px] -left-[15px] w-[4px] border-[14px] border-solid border-main-nav h-[4px] box-content rounded-[100%] absolute", timepickerInlineHead: "bg-main-nav dark:bg-surface-dark h-[100px] rounded-t-lg min-[320px]:max-[825px]:landscape:rounded-tr-none min-[320px]:max-[825px]:landscape:rounded-bl-none min-[320px]:max-[825px]:landscape:p-[10px] min-[320px]:max-[825px]:landscape:pe-[10px] min-[320px]:max-[825px]:landscape:h-auto min-[320px]:max-[825px]:landscape:min-h-[305px] flex flex-row items-center justify-center p-0 rounded-b-lg", timepickerToggleButton: "h-4 w-4 ms-auto absolute outline-none border-none bg-transparent right-1.5 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] cursor-pointer hover:text-main-nav focus:text-main-nav dark:hover:text-main-nav dark:focus:text-main-nav dark:text-white", } };

Hi,

1.for styling datepicker cells check out this object prepared by me:

datepickerCellContent:
          "mx-auto group-[:not([data-twe-datepicker-cell-disabled]):not([data-twe-datepicker-cell-selected]):hover]:bg-black/5 group-data-[twe-datepicker-cell-selected]:bg-green-600 group-data-[twe-datepicker-cell-selected]:text-green-100 group-[:not([data-twe-datepicker-cell-selected])[data-twe-datepicker-cell-focused]]:bg-black/5 group-data-[twe-datepicker-cell-focused]:data-[twe-datepicker-cell-selected]:bg-main-nav group-data-[twe-datepicker-cell-current]:border-solid group-data-[twe-datepicker-cell-current]:border-black group-data-[twe-datepicker-cell-current]:border dark:group-[:not([data-twe-datepicker-cell-disabled]):not([data-twe-datepicker-cell-selected]):hover]:bg-black/10 dark:group-data-[twe-datepicker-cell-current]:border-white dark:text-white dark:group-[:not([data-twe-datepicker-cell-selected])[data-twe-datepicker-cell-focused]]:bg-black/10 dark:group-data-[twe-datepicker-cell-disabled]:text-white/50",

2.for setting the default date, it's important to use the correct date format (DD/MM/YYYY):

// Set date to tomorrow
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);

// Format as DD/MM/YYYY
const formattedDate = `${String(tomorrow.getDate()).padStart(2, '0')}/${String(tomorrow.getMonth() + 1).padStart(2, '0')}/${tomorrow.getFullYear()}`;

1) Didn't work. The primary color disappeared but not replaced by green (day 10) and hovering it doesn't work too.

2) I already use this format (10/05/2025)