【QSS样式表 - ⑪】：QDateTimeEdit控件样式

文章目录

• QDateTimeEdit控件样式
• • QSS示例

QDateTimeEdit控件样式

1. QDateTimeEdit 子控件
   

2. QCalendarWidget 的子控件
   
   

3. 属性选择器
   

QSS示例

1. 新建一个 QMainWindow ，并在窗口中放置 QDateTimeEdit 和 QCalendarWidget 控件。对 QDateTimeEdit控件的设置如下：
   
   

2. 如下图所示。

   QDateTimeEdit{
   	border: 1px solid black;
   	font-size: 20px;
   	selection-color: red;
   	selection-background-color: yellow;
   	padding-left: 10px;
   }
   
   /* 带日历的模式，右侧下拉按钮的容器 */
   QDateTimeEdit[calendarPopup=true]::drop-down{
   	border: none;
   	width: 30px;
   }
   
   /* 带日历的模式，下拉箭头*/
   QDateTimeEdit[calendarPopup=true]::down-arrow {
   	image: url(:/images/images/calendar.png);
   }
   
   /* 按钮的菜单指示 */
   QCalendarWidget QToolButton:menu-indicator{
   	image: None;
   }
   
   /* 顶部导航条 */
   QCalendarWidget QWidget#qt_calendar_navigationbar{
   	font-size: 20px;
   	background-color: blue;
   	border: 2px solid yellow;
   }
   
   /* QCalendarWidget 上左箭头图片 */
   QCalendarWidget QToolButton#qt_calendar_prevmonth{
   	qproperty-icon: url(:/images/images/left-arrow.png);
   }
   
   /* QCalendarWidget 上右箭头图片 */
   QCalendarWidget QToolButton#qt_calendar_nextmonth{
   	qproperty-icon: url(:/images/images/right-arrow.png);
   }
   
   /* 日历视图的效果 */
   QCalendarWidget QAbstractItemView {
   	color: black;
   	selection-color: blue;
   	selection-background-color: red;
   	font-size: 12px;
   }