Нужна помощь с Style Sheet для объекта QDateEdit и QCalendarWidget

Рейтинг: 1Ответов: 1Опубликовано: 26.06.2023

Есть такой style Sheet (собран с разных примеров и подогнан, на сколько было понятно, под проект):

введите сюда описание изображения

QDateEdit{
    background-color: rgb(27, 29, 35);
    border-radius: 5px;
    border: 2px solid rgb(33, 37, 43);
    padding: 5px;
    padding-left: 10px;
    color: rgb(113, 126, 149)
}
QDateEdit:hover{
    border: 2px solid rgb(64, 71, 88);
}
QDateEdit::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 25px; 
    border-left-width: 3px;
    border-left-color: rgba(39, 44, 54, 150);
    border-left-style: solid;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;    
    background-image: url(:/icons/images/icons/cil-arrow-bottom.png);
    background-position: center;
    background-repeat: no-reperat;
 }
QDateEdit QAbstractItemView {
    color: rgb(255, 121, 198);  
    background-color: rgb(33, 37, 43);
    padding: 10px;
    selection-background-color: rgb(39, 44, 54);
}


/*  Кнопка последнего месяца и кнопка следующего месяца 
    (имя объекта найдено из источника/objectName)       */
#qt_calendar_prevmonth, #qt_calendar_nextmonth {
    border: none;                     /* убрать границу */ 
    font-weight: bold;              /* шрифт полужирный */
    
    /* Удалить стандартное изображение клавиши со стрелкой. 
       Вы также можете настроить                         */
    qproperty-icon: none;    
    background-color: rgb(27,29,35)
}
 QCalendarWidget QWidget { alternate-background-color: rgb(27,29,35);}
#qt_calendar_prevmonth {
    qproperty-text: "<";         /* Изменить текст кнопки  */
}

#qt_calendar_nextmonth {
    qproperty-text: ">";
}

#qt_calendar_prevmonth:hover, #qt_calendar_nextmonth:hover {
    background-color: rgba(225, 225, 225, 100);
}

#qt_calendar_prevmonth:pressed, #qt_calendar_nextmonth:pressed {
    background-color: rgba(235, 235, 235, 100);
}
    
#qt_calendar_yearbutton, #qt_calendar_monthbutton {
    color: rgb(113,126,149);
    background-color:rgb(27,29,35);
    min-width: 60px;
    border-radius: 30px;
}

#qt_calendar_yearbutton:hover, #qt_calendar_monthbutton:hover {
    background-color: rgba(225, 225, 225, 100);
}
#qt_calendar_yearbutton:pressed, #qt_calendar_monthbutton:pressed {
    background-color: rgba(235, 235, 235, 100);
}

/* Поле ввода года                                                        */
#qt_calendar_yearedit {
    color: rgb(113,126,149);
    background: transparent;         /* Сделать фон окна ввода прозрачным */
}
#qt_calendar_yearedit::up-button {   /* Кнопка вверх                      */
    color: rgb(27,29,35);
    width: 20px;
    subcontrol-position: right;      
}
#qt_calendar_yearedit::down-button { /* Кнопка вниз     */
    color: rgb(27,29,35);
    width: 20px;
    subcontrol-position: left;       
}

/* меню выбора месяца                                          */
CalendarWidget QToolButton QMenu {
     background-color: rgb(33,37,43);
}
CalendarWidget QToolButton QMenu::item {
    padding: 10px;
}
CalendarWidget QToolButton QMenu::item:selected:enabled {
    background-color: rgb(230, 230, 230);
}
CalendarWidget QToolButton::menu-indicator {
    image: none;
}

/* ниже календарной формы */
#qt_calendar_calendarview {
    outline: 0px;                                 /* Удалить выделенную пунктирную рамку */
    selection-background-color: rgb(255,121,198); /* Выберите цвет фона */
color:rgb(113, 126, 149);
    border-radius: 5px; 
}
  1. Как пофиксить проблему что часть дней обрезана:

введите сюда описание изображения

  1. Стрелочка выбора месяца не заходила на текст и была дальше:

введите сюда описание изображения

  1. При редактировании года он полностью отображался:

введите сюда описание изображения

Ответы

▲ 1Принят

Я отметил для вас строки, в которые внес изменения:

from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.Qt import *


class MyWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()

        self.dateEdit = QtWidgets.QDateEdit(self)
        self.dateEdit.setGeometry(QtCore.QRect(120, 40, 217, 27))
        self.dateEdit.setCalendarPopup(True)
        self.dateEdit.setObjectName("dateEdit")


StyleSheet = '''
QDateEdit{
    background-color: rgb(27, 29, 35);
    border-radius: 5px;
    border: 2px solid rgb(33, 37, 43);
/*    padding: 5px;                                                  <----  ??? */
    padding-left: 10px;
    color: rgb(113, 126, 149)
}
QDateEdit:hover{
    border: 2px solid rgb(64, 71, 88);
}
QDateEdit::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 25px; 
    border-left-width: 3px;
    border-left-color: rgba(39, 44, 54, 150);
    border-left-style: solid;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;    
    background-image: url(cil-arrow-bottom.png);         /* <---- установите свое */
    background-position: center;
    background-repeat: no-reperat;
}
QDateEdit QAbstractItemView {
    color: rgb(255, 121, 198);  
    background-color: rgb(33, 37, 43);
/*    padding: 10px;                                           <----  ??? убрать   */
    selection-background-color: rgb(39, 44, 54);
}

/*  Кнопка последнего месяца и кнопка следующего месяца 
    (имя объекта найдено из источника/objectName)    */
#qt_calendar_prevmonth, #qt_calendar_nextmonth {
    border: none; 
    font-weight: bold;
    
    /* Удалить стандартное изображение клавиши со стрелкой. 
       Вы также можете настроить                        */
    qproperty-icon: none;    
    background-color: rgb(27,29,35)
}
QCalendarWidget QWidget { 
    alternate-background-color: rgb(27,29,35);
}
#qt_calendar_prevmonth {
    qproperty-text: "<"; 
}
#qt_calendar_nextmonth {
    qproperty-text: ">";
}
#qt_calendar_prevmonth:hover, #qt_calendar_nextmonth:hover {
    background-color: rgba(225, 225, 225, 100);
}
#qt_calendar_prevmonth:pressed, #qt_calendar_nextmonth:pressed {
    background-color: rgba(235, 235, 235, 100);
}
  
#qt_calendar_yearbutton, #qt_calendar_monthbutton {
    color: rgb(113,126,149);
    background-color:rgb(27,29,35);
    min-width: 60px;
    border-radius: 30px;
    
    margin: -1px -11px -1px -11px;              /* <----<----<----<----<----<---- +++ */
    min-width: 85px;                            /* <----<----<----<----<----<---- +++ */
}

#qt_calendar_yearbutton:hover, #qt_calendar_monthbutton:hover {
    background-color: rgba(225, 225, 225, 100);
}
#qt_calendar_yearbutton:pressed, #qt_calendar_monthbutton:pressed {
    background-color: rgba(235, 235, 235, 100);
}

/* Поле ввода года        */
#qt_calendar_yearedit {
    color: rgb(113,126,149);
    background: transparent;   
    
    min-width: 60px;                         /* <----<----<----<----<----<----  +++ */
}
#qt_calendar_yearedit::up-button { 
    color: rgb(27,29,35);
    width: 20px;
    subcontrol-position: right;      
}
#qt_calendar_yearedit::down-button { 
    color: rgb(27,29,35);
    width: 20px;
    subcontrol-position: left;       
}

/* меню выбора месяца           */
CalendarWidget QToolButton QMenu {
     background-color: rgb(33,37,43);
}
CalendarWidget QToolButton QMenu::item {
    padding: 10px;
}
CalendarWidget QToolButton QMenu::item:selected:enabled {
    background-color: rgb(230, 230, 230);
}
CalendarWidget QToolButton::menu-indicator {
    image: none;
}

/* ниже календарной формы */
#qt_calendar_calendarview {
    outline: 0px;           
    selection-background-color: rgb(255,121,198); 
color:rgb(113, 126, 149);
    border-radius: 5px; 
}
'''

if __name__ == "__main__":
    import sys

    app = QtWidgets.QApplication(sys.argv)

    app.setFont(QtGui.QFont("Times", 10, QtGui.QFont.Bold))                 # +++
    app.setStyleSheet(StyleSheet)                                           # +++

    w = MyWindow()
    w.resize(500, 300)
    w.show()
    sys.exit(app.exec_())

введите сюда описание изображения