Custom input class

Currently there is no way specify custom css classes to be applied to the input element. This makes it inconvenient to integrate the date picker with existing css frameworks, as separate styles must be specified for the datepicker input.

It would be nice if an option were provided to pass custom classes to the input element.

[agm1984]

Here’s how I styled the cells on the calendar–had to fight against the hyper-specific inline rules the library outputs in order to change the colours from blue to pink:

    mounted() {
        const specificityHax = `
            .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover { border: 1px solid ${colors.pink}; }
            .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover { border: 1px solid ${colors.pink}; }
            .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover { border: 1px solid ${colors.pink}; }
            .vdp-datepicker__calendar .cell.selected {
                background: none;
                background-color: ${colors['pink-lighter']};
                color: ${colors['black-darker']};
            }
            .vdp-datepicker__calendar .cell.selected:hover {
                background: none;
                background-color: ${colors['pink-lighter']};
                color: ${colors['black-darker']};
            }
        `;

        const style = document.createElement('style');
        if (style.styleSheet) style.styleSheet.cssText = specificityHax;
        else style.appendChild(document.createTextNode(specificityHax));
        document.getElementsByTagName('head')[0].appendChild(style);
    },

This code appends <style> into the document head with those rules. I recommend browsing the styles in your dev tools and override the styles on the same classes they are originally on.

Here is what that code produces:

[Sammuel09]

Hello @DeltaBravo How did you do that? Can you explain or show an example