DEVHIDE
Login Or Sign up

Qt QDateEdit Custom Styling Sheet

3.8k Views Asked by At

I would like to apply custom styling sheet to a QDateEdit widget with the QCalendarPopup Activated.

My current CSS:

my current css

What it looks like:

what it looks like

I need to fix three things:

  • The background color and font color of the days name (i.e. mon. tue. .., sun.)
  • Change the weekend days color
  • Change the background color of the left and right arrow

Thanks!

--------- My .ui code after modifications ---

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>450</width>
    <height>230</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Swap Fly Analyzer</string>
  </property>
  <property name="windowIcon">
   <iconset>
    <normaloff>../icons/iapp.svg</normaloff>../icons/iapp.svg</iconset>
  </property>
  <property name="unifiedTitleAndToolBarOnMac">
   <bool>false</bool>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QTabWidget" name="tabWidget">
    <property name="geometry">
     <rect>
      <x>0</x>
      <y>0</y>
      <width>450</width>
      <height>250</height>
     </rect>
    </property>
    <property name="styleSheet">
     <string notr="true"> QTabWidget::pane { /* The tab widget frame */
     border-top: 2px solid #C2C7CB;
     position: absolute;
     top: -0.5em;
 }

 QTabWidget::tab-bar {
     alignment: center;
 }

 /* Style the tab using the tab sub-control. Note that
     it reads QTabBar _not_ QTabWidget */
 QTabBar::tab {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #ffffff, stop: 1 #454545);                
border: 2px solid #C4C4C3;
     border-bottom-color: #C2C7CB; /* same as the pane color */
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     min-width: 8ex;
     padding: 2px;
 }

 QTabBar::tab:selected, QTabBar::tab:hover {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #152c4a, stop: 1 #000000);
    color:white;
 }

 QTabBar::tab:selected {
     border-color: #9B9B9B;
     border-bottom-color: #C2C7CB; /* same as pane color */
 }

</string>
    </property>
    <property name="currentIndex">
     <number>0</number>
    </property>
    <widget class="QWidget" name="analysis">
     <attribute name="title">
      <string>Analysis</string>
     </attribute>
     <widget class="QPushButton" name="PushButton_Analysis_Go">
      <property name="geometry">
       <rect>
        <x>170</x>
        <y>190</y>
        <width>82</width>
        <height>15</height>
       </rect>
      </property>
      <property name="styleSheet">
       <string notr="true"> QPushButton {
     border: 1px solid #152c4a;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #152c4a, stop: 1 #000000);
     min-width: 80px;
     color: white;
 }

 QPushButton:pressed {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #000000, stop: 1 #152c4a);
 }

 QPushButton:flat {
     border: none; /* no border for a flat push button */
 }

 QPushButton:default {
     border-color: navy; /* make the default button prominent */
 }</string>
      </property>
      <property name="text">
       <string>&lt; GO &gt;</string>
      </property>
     </widget>
     <widget class="QWidget" name="layoutWidget">
      <property name="geometry">
       <rect>
        <x>20</x>
        <y>21</y>
        <width>411</width>
        <height>52</height>
       </rect>
      </property>
      <layout class="QGridLayout" name="gridLayout_3">
       <item row="0" column="0">
        <widget class="QLabel" name="Label_Analysis_Currency">
         <property name="text">
          <string>Currency</string>
         </property>
        </widget>
       </item>
       <item row="0" column="1" rowspan="2">
        <spacer name="HorizontalSpacer_Analysis_Currency">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="0" column="2">
        <widget class="QComboBox" name="ComboBox_Analysis_Currency">
         <property name="styleSheet">
          <string notr="true"> QComboBox {
     border: 1px solid #152c4a;
}
</string>
         </property>
         <property name="editable">
          <bool>false</bool>
         </property>
        </widget>
       </item>
       <item row="1" column="5" rowspan="2">
        <spacer name="HorizontalSpacer_Analysis_EndDate">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="1" column="6" rowspan="2">
        <widget class="QDateEdit" name="DateEdit_Analysis_EndDate">
         <property name="styleSheet">
          <string notr="true">  QDateEdit {
     border: 1px solid #152c4a;
}
QDateEdit QAbstractItemView:hover
  {
    color:black;
    background-color: white;  

  }

  /* normal days */
QDateEdit QAbstractItemView:enabled 
  {
    color:white;
    background-color: #152c4a;  
    selection-background-color: white; 
    selection-color: #152c4a; 
  }

  /* days in other months */
  /* navigation bar */
QDateEdit QWidget#qt_calendar_navigationbar
{ 
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #152c4a, stop: 1 #000000); 
}

QDateEdit QAbstractItemView:disabled 
{ 
color:gray; 
}
QCalendarWidget QTableView 
{
   alternate-background-color: black;
}
QCalendarWidget QTableView QLabel 
{
    color: &quot;white&quot;;
}
QCalendarWidget QToolButton#qt_calendar_prevmonth 
{
    qproperty-icon: url(&quot;icons/calendar_caretToLeft.png&quot;);
}
QCalendarWidget QToolButton#qt_calendar_nextmonth 
{
    qproperty-icon: url(&quot;icons/calendar_caretToRight.png&quot;);

}

 </string>
         </property>
         <property name="calendarPopup">
          <bool>true</bool>
         </property>
        </widget>
       </item>
       <item row="2" column="0">
        <widget class="QLabel" name="Label_Analysis_StartDate">
         <property name="text">
          <string>Start Date</string>
         </property>
        </widget>
       </item>
       <item row="2" column="1">
        <spacer name="HorizontalSpacer_Analysis_StartDate">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="2" column="2">
        <widget class="QDateEdit" name="DateEdit_Analysis_StartDate">
         <property name="styleSheet">
          <string notr="true">  QDateEdit {
     border: 1px solid #152c4a;
}
QDateEdit QAbstractItemView:hover
  {
    color:black;
    background-color: white;  

  }

  /* normal days */
QDateEdit QAbstractItemView:enabled 
  {
    color:white;
    background-color: #152c4a;  
    selection-background-color: white; 
    selection-color: #152c4a; 
  }

  /* days in other months */
  /* navigation bar */
QDateEdit QWidget#qt_calendar_navigationbar
{ 
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #152c4a, stop: 1 #000000); 
}

QDateEdit QAbstractItemView:disabled 
{ 
color:gray; 
}
QCalendarWidget QTableView 
{
   alternate-background-color: black;
}
QCalendarWidget QTableView QLabel 
{
    color: &quot;white&quot;;
}
QCalendarWidget QToolButton#qt_calendar_prevmonth 
{
    qproperty-icon: url(&quot;icons/calendar_caretToLeft.png&quot;);
}
QCalendarWidget QToolButton#qt_calendar_nextmonth 
{
    qproperty-icon: url(&quot;icons/calendar_caretToRight.png&quot;);

}

 </string>
         </property>
         <property name="calendarPopup">
          <bool>true</bool>
         </property>
        </widget>
       </item>
       <item row="2" column="3">
        <spacer name="HorizontalSpacer_Analysis_DateMiddle">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="2" column="4">
        <widget class="QLabel" name="Label_Analysis_EndDate">
         <property name="text">
          <string>End Date</string>
         </property>
        </widget>
       </item>
      </layout>
     </widget>
     <widget class="QWidget" name="layoutWidget">
      <property name="geometry">
       <rect>
        <x>20</x>
        <y>100</y>
        <width>411</width>
        <height>74</height>
       </rect>
      </property>
      <layout class="QGridLayout" name="gridLayout_4">
       <item row="0" column="0">
        <spacer name="horizontalSpacer_11">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="0" column="1">
        <spacer name="horizontalSpacer_10">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="0" column="2">
        <widget class="QLabel" name="Label_Analysis_Left">
         <property name="text">
          <string>Left</string>
         </property>
        </widget>
       </item>
       <item row="0" column="3">
        <spacer name="horizontalSpacer_9">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="0" column="4">
        <widget class="QLabel" name="Label_Analysis_Center">
         <property name="text">
          <string>Center</string>
         </property>
        </widget>
       </item>
       <item row="0" column="5">
        <spacer name="horizontalSpacer_8">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="0" column="6">
        <widget class="QLabel" name="Label_Analysis_Right">
         <property name="text">
          <string>Right</string>
         </property>
        </widget>
       </item>
       <item row="1" column="0">
        <widget class="QLabel" name="Label_Analysis_Rate">
         <property name="text">
          <string>Rate</string>
         </property>
        </widget>
       </item>
       <item row="1" column="1">
        <spacer name="horizontalSpacer_2">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="1" column="2">
        <widget class="QComboBox" name="ComboBox_Analysis_LeftRate">
         <property name="styleSheet">
          <string notr="true"> QComboBox {
     border: 1px solid #152c4a;
}
</string>
         </property>
         <property name="editable">
          <bool>false</bool>
         </property>
        </widget>
       </item>
       <item row="1" column="3">
        <spacer name="horizontalSpacer_3">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="1" column="4">
        <widget class="QComboBox" name="ComboBox_Analysis_CenterRate">
         <property name="styleSheet">
          <string notr="true"> QComboBox {
     border: 1px solid #152c4a;
}
</string>
         </property>
         <property name="editable">
          <bool>false</bool>
         </property>
        </widget>
       </item>
       <item row="1" column="5">
        <spacer name="horizontalSpacer_4">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="1" column="6">
        <widget class="QComboBox" name="ComboBox_Analysis_RightRate">
         <property name="styleSheet">
          <string notr="true"> QComboBox {
     border: 1px solid #152c4a;
}
</string>
         </property>
         <property name="editable">
          <bool>false</bool>
         </property>
        </widget>
       </item>
       <item row="2" column="0">
        <widget class="QLabel" name="Label_Analysis_Coefficient">
         <property name="text">
          <string>Coefficient</string>
         </property>
        </widget>
       </item>
       <item row="2" column="1">
        <spacer name="horizontalSpacer_5">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="2" column="3">
        <spacer name="horizontalSpacer_6">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="2" column="5">
        <spacer name="horizontalSpacer_7">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="2" column="2">
        <widget class="QLineEdit" name="LineEdit_Analysis_LeftCoefficient">
         <property name="styleSheet">
          <string notr="true">QLineEdit {
     border: 1px solid #152c4a;
 }</string>
         </property>
        </widget>
       </item>
       <item row="2" column="4">
        <widget class="QLineEdit" name="LineEdit_Analysis_CenterCoefficient">
         <property name="styleSheet">
          <string notr="true">QLineEdit {
     border: 1px solid #152c4a;
 }</string>
         </property>
        </widget>
       </item>
       <item row="2" column="6">
        <widget class="QLineEdit" name="LineEdit_Analysis_RightCoefficient">
         <property name="styleSheet">
          <string notr="true">QLineEdit {
     border: 1px solid #152c4a;
 }</string>
         </property>
        </widget>
       </item>
      </layout>
     </widget>
     <widget class="QProgressBar" name="ProgressBar_Analysis_Status">
      <property name="geometry">
       <rect>
        <x>310</x>
        <y>190</y>
        <width>118</width>
        <height>20</height>
       </rect>
      </property>
      <property name="styleSheet">
       <string notr="true"> QProgressBar {
     border: 1px solid #454545;
     text-align: center;
 }

 QProgressBar::chunk {
     background-color: #152c4a;
 }
</string>
      </property>
      <property name="value">
       <number>1</number>
      </property>
     </widget>
    </widget>
    <widget class="QWidget" name="settings">
     <attribute name="title">
      <string>Settings</string>
     </attribute>
     <widget class="QWidget" name="layoutWidget">
      <property name="geometry">
       <rect>
        <x>20</x>
        <y>30</y>
        <width>320</width>
        <height>100</height>
       </rect>
      </property>
      <layout class="QGridLayout" name="gridLayout">
       <item row="0" column="0">
        <widget class="QLabel" name="Label_Settings_InputFile">
         <property name="text">
          <string>Input File</string>
         </property>
        </widget>
       </item>
       <item row="0" column="2">
        <widget class="QLineEdit" name="LineEdit_Settings_InputFile">
         <property name="styleSheet">
          <string notr="true">QLineEdit {
     border: 1px solid #152c4a;
 }</string>
         </property>
        </widget>
       </item>
       <item row="2" column="0">
        <widget class="QLabel" name="Label_Settings_BenchmarkSheetName">
         <property name="text">
          <string>Benchmark Sheet Name</string>
         </property>
        </widget>
       </item>
       <item row="3" column="2">
        <widget class="QLineEdit" name="LineEdit_Settings_RegressionListSheetName">
         <property name="styleSheet">
          <string notr="true">QLineEdit {
     border: 1px solid #152c4a;
 }</string>
         </property>
        </widget>
       </item>
       <item row="3" column="0">
        <widget class="QLabel" name="Label_Settings_RegressionListSheetName">
         <property name="text">
          <string>Regression List Sheet Name</string>
         </property>
        </widget>
       </item>
       <item row="1" column="0">
        <widget class="QLabel" name="Label_Settings_FSIRSListSheetName">
         <property name="text">
          <string>FS IRS List Sheet Name</string>
         </property>
        </widget>
       </item>
       <item row="2" column="2">
        <widget class="QLineEdit" name="LineEdit_Settings_BenchmarkSheetName">
         <property name="styleSheet">
          <string notr="true">QLineEdit {
     border: 1px solid #152c4a;
 }</string>
         </property>
        </widget>
       </item>
       <item row="1" column="2">
        <widget class="QLineEdit" name="LineEdit_Settings_FSIRSListSheetName">
         <property name="styleSheet">
          <string notr="true">QLineEdit {
     border: 1px solid #152c4a;
 }</string>
         </property>
        </widget>
       </item>
       <item row="1" column="1">
        <spacer name="HorizontalSpacer_Settings_FSIRSListSheetName">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="3" column="1">
        <spacer name="HorizontalSpacer_Settings_RegressionListSheetName">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="0" column="1">
        <spacer name="HorizontalSpacer_Settings_InputFile">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="2" column="1">
        <spacer name="HorizontalSpacer_Settings_BenchmarkSheetName">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
      </layout>
     </widget>
     <widget class="QWidget" name="layoutWidget">
      <property name="geometry">
       <rect>
        <x>20</x>
        <y>130</y>
        <width>321</width>
        <height>41</height>
       </rect>
      </property>
      <layout class="QGridLayout" name="gridLayout_2">
       <item row="0" column="1">
        <spacer name="verticalSpacer">
         <property name="orientation">
          <enum>Qt::Vertical</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>20</width>
           <height>40</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="1" column="0">
        <widget class="QPushButton" name="PushButton_Settings_Cancel">
         <property name="styleSheet">
          <string notr="true"> QPushButton {
     border: 1px solid #152c4a;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #ffffff, stop: 1 #454545);
     min-width: 80px;
    color: #152c4a;
 }

 QPushButton:pressed {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #454545, stop: 1 #ffffff);
 }

 QPushButton:flat {
     border: none; /* no border for a flat push button */
 }

 QPushButton:default {
     border-color: navy; /* make the default button prominent */
 }</string>
         </property>
         <property name="text">
          <string>Cancel</string>
         </property>
        </widget>
       </item>
       <item row="1" column="1">
        <spacer name="horizontalSpacer">
         <property name="orientation">
          <enum>Qt::Horizontal</enum>
         </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>
           <height>20</height>
          </size>
         </property>
        </spacer>
       </item>
       <item row="1" column="2">
        <widget class="QPushButton" name="PushButton_Settings_Save">
         <property name="styleSheet">
          <string notr="true"> QPushButton {
     border: 1px solid #152c4a;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #152c4a, stop: 1 #000000);
     min-width: 80px;
     color: white;
 }

 QPushButton:pressed {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                       stop: 0 #000000, stop: 1 #152c4a);
 }

 QPushButton:flat {
     border: none; /* no border for a flat push button */
 }

 QPushButton:default {
     border-color: navy; /* make the default button prominent */
 }</string>
         </property>
         <property name="text">
          <string>Save</string>
         </property>
        </widget>
       </item>
      </layout>
     </widget>
    </widget>
   </widget>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>
enter code here
qt qtstylesheets qdateedit
Original Q&A
1

There are 1 best solutions below

3
On

Background color of the header with the day names can be set with

QCalendarWidget QTableView 
{
    alternate-background-color: #6D6D6D;  /* day name/week number background */
}

The non-weekend day names are default QLabel colors, so this works:

QCalendarWidget QTableView QLabel 
{
    color: "white";
}

The colors of the weekend names (both in header and in calendar) can be set from C++ and I don't see a way to change it from CSS. (The other weekday colors can be set this way also, of course, vs. CSS.)

QTextCharFormat fmt;
fmt.setForeground(QBrush(Qt::blue));
dateEdit->calendarWidget()->setWeekdayTextFormat(Qt::Saturday, fmt);
dateEdit->calendarWidget()->setWeekdayTextFormat(Qt::Sunday, fmt);

The forward/back buttons are actually icons (assuming you mean the actual green part with the arrow). This works for me in Qt 5.12 (I've read a few reports that this used to be buggy but it must have been fixed a while ago).

QCalendarWidget QToolButton#qt_calendar_prevmonth 
{
    qproperty-icon: url(back.png);
}
QCalendarWidget QToolButton#qt_calendar_nextmonth 
{
    qproperty-icon: url(forward.png);
}

Note I'm styling QCalendarWidget here which is the actual display class (I think it works with QDateEdit because the calendar widget becomes a child of it, but I would style the actual calendar widget).

Also in the #qt_calendar_navigationbar you might have a QMenu for the months list and a QSpinBox for editing the year. You may want/need to style those as well. E.g.

QCalendarWidget QWidget#qt_calendar_navigationbar QMenu,
QCalendarWidget QWidget#qt_calendar_navigationbar QSpinBox 
{
    background-color: #152C4A;
    color: white;
}

HTH.

P.S. While this example doesn't use CSS, it does demonstrate how to customize some parts of the calendar view from C++: https://doc.qt.io/qt-5/qtwidgets-widgets-calendarwidget-example.html

Related Questions in QT

Related Questions in QTSTYLESHEETS

Related Questions in QDATEEDIT

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.