PyQt5 DateEdit white background under arrows

Question

is it possible to have a QDateEdit with custom arrows and set background and border color? I tried many options using setStyleSheet, but none worked.

My current code just changing the arrows and is bellow:

    QDateEdit {
        border: 1px solid gray;
        border-radius: 4px;
        padding: 0 8px;
        selection-background-color: darkgray;
    }
    QDateEdit::down-arrow {
        image: url(arrow.png);
        max-width: 1px
    }
    QDateEdit::up-arrow {
        image: url(up-arrow.png);
        max-width: 1px
    }

This is how it looks now:

https://i.stack.imgur.com/uXN5T.png

And this is how my comboBox looks and how should dateEdit looks too:

https://i.stack.imgur.com/WykW1.png

Answer 1

The QDateEdit can be styled in the same way that a QSpinBox can. There is an up-arrow, down-arrow control as well as up-button, down-button.

Setting the background an border color styles for the buttons should be set to each button sub-control.

From the Qt docs, here are some examples of how to style a QSpinBox.

QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: top right; /* position at the top right corner */

    width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
    border-image: url(:/images/spinup.png) 1;
    border-width: 1px;
}

QSpinBox::up-button:hover {
    border-image: url(:/images/spinup_hover.png) 1;
}

QSpinBox::up-button:pressed {
    border-image: url(:/images/spinup_pressed.png) 1;
}

QSpinBox::up-arrow {
    image: url(:/images/up_arrow.png);
    width: 7px;
    height: 7px;
}

QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* off state when value is max */
   image: url(:/images/up_arrow_disabled.png);
}

QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right; /* position at bottom right corner */

    width: 16px;
    border-image: url(:/images/spindown.png) 1;
    border-width: 1px;
    border-top-width: 0;
}

QSpinBox::down-button:hover {
    border-image: url(:/images/spindown_hover.png) 1;
}

QSpinBox::down-button:pressed {
    border-image: url(:/images/spindown_pressed.png) 1;
}

QSpinBox::down-arrow {
    image: url(:/images/down_arrow.png);
    width: 7px;
    height: 7px;
}

QSpinBox::down-arrow:disabled,
QSpinBox::down-arrow:off { /* off state when value in min */
   image: url(:/images/down_arrow_disabled.png);
}

If you replace the QSpinBox with QDateEdit all of those controls should work identically.