QDateTime QCalendarWidget：Qt默认日历样式设置

最新推荐文章于 2024-02-29 21:26:28 发布
最新推荐文章于 2024-02-29 21:26:28 发布
阅读量1.3k 收藏 28
点赞数 3
文章标签： qt 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_w_w_w2580369/article/details/134649430
版权

一、调用

        通过QDateTime中的setCalendarPopup(true)方法调用。

    ui->dateEdit->setCalendarPopup(true);

二、基础设置

1.设置默认显示时间

ui->dateEdit->setDateTime(QDateTime::currentDateTime());

2.设置时间范围：最近三年

ui->dateEdit->setMinimumDate(QDate::currentDate().addDays(- 365 * 3));
ui->dateEdit->setMaximumDate(QDate::currentDate());

3.导航栏不可见

    QCalendarWidget *calendar = ui->dateEdit->calendarWidget();
    calendar->setNavigationBarVisible(false);

4.网格线

calendar->setGridVisible(true);

5.周几栏竖向排列位置

calendar->setFirstDayOfWeek(Qt::Saturday);

6.周几栏文字类型：默认是 QCalendarWidget::ShortDayNames 

calendar->setHorizontalHeaderFormat(QCalendarWidget::NoHorizontalHeader);

三、QSS样式设置

1.QDateEdit样式

（1）未设置QSS、且未调用日历的默认样式：

（2）调用日历setCalendarPopup(true)后的默认样式：

（3）样式设置：正常状态与选中状态

/*正常状态*/
QDateEdit#dateEdit_timeEnd{
        font:20px Microsoft YaHei;
        color:rgb(32, 32, 32);
        background-color:rgb(255, 204, 229, 80);
        border-color:rgb(255, 153, 204);
        border-style:solid;
        border-radius:10px;
        border-width:5px;
}

/*选中状态*/
QDateEdit#dateEdit:focus{
        font:20px Microsoft YaHei;
        border-color:rgb(255, 102, 178);    /*边框颜色*/
        border-style:solid;                 /*边框内容*/
        border-radius:10px;                 /*边框圆角弧度*/
        border-width:5px;
}

（4）日历下拉图标设置

QDateEdit#dateEdit:drop-down{
        border-image:url(:/Picture/calendar-icon.png);
        width:40px;
}

2.QDateEdit完整代码：

QDateEdit#dateEdit{
        font:20px Microsoft YaHei;
        color:rgb(32, 32, 32);
        background-color:rgb(255, 204, 229, 80);
        border-color:rgb(255, 153, 204);
        border-style:solid;
        border-radius:10px;
        border-width:5px;
}

QDateEdit#dateEdit:focus{
        font:20px Microsoft YaHei;
        border-color:rgb(255, 102, 178);    /*边框颜色*/
        border-style:solid;                 /*边框内容*/
        border-radius:10px;                 /*边框圆角弧度*/
        border-width:5px;
}

QDateEdit#dateEdit:drop-down{
        border-image:url(:/Picture/calendar-icon.png);
        width:40px;
}

二.QCalendarWidget日历样式设置

1.基础说明

        QCalendarWidget 是一个复杂的 widget，由多个个 QToolButton, QSpinBox, QMenu, QTableView 等组成。采用的方法是打印组成 QCalendarWidget 的 widget 的 className 和 objectName，然后 QSS 每个 widget。

    QCalendarWidget *calendar = ui->dateEdit->calendarWidget();
    dumpStructure(calendar, 0);

void CalendarWidget::dumpStructure(const QObject *obj, int spaceCount)
{
    qDebug() << QString("%1 %2 : %3")
                .arg("", spaceCount)
                .arg(obj->metaObject()->className())
                .arg(obj->objectName());

    QObjectList list = obj->children();

    foreach(QObject *child, list){
        dumpStructure(child, spaceCount + 4);
    }
}

        打印结果：

" QCalendarWidget : "
"     QVBoxLayout : "
"     QCalendarModel : "
"     QCalendarView : qt_calendar_calendarview"
"         QWidget : qt_scrollarea_viewport"
"         QWidget : qt_scrollarea_hcontainer"
"             QScrollBar : "
"             QBoxLayout : "
"         QWidget : qt_scrollarea_vcontainer"
"             QScrollBar : "
"             QBoxLayout : "
"         QStyledItemDelegate : "
"         QHeaderView : "
"             QWidget : qt_scrollarea_viewport"
"             QWidget : qt_scrollarea_hcontainer"
"                 QScrollBar : "
"                 QBoxLayout : "
"             QWidget : qt_scrollarea_vcontainer"
"                 QScrollBar : "
"                 QBoxLayout : "
"             QItemSelectionModel : "
"         QHeaderView : "
"             QWidget : qt_scrollarea_viewport"
"             QWidget : qt_scrollarea_hcontainer"
"                 QScrollBar : "
"                 QBoxLayout : "
"             QWidget : qt_scrollarea_vcontainer"
"                 QScrollBar : "
"                 QBoxLayout : "
"             QItemSelectionModel : "
"         QTableCornerButton : "
"         QItemSelectionModel : "
"     QWidget : qt_calendar_navigationbar"
"         QPrevNextCalButton : qt_calendar_prevmonth"
"         QPrevNextCalButton : qt_calendar_nextmonth"
"         QToolButton : qt_calendar_monthbutton"
"             QMenu : "
"                 QAction : "
"                 QAction : "
"                 QAction : "
"                 QAction : "
"                 QAction : "
"                 QAction : "
"                 QAction : "
"                 QAction : "
"                 QAction : "
"                 QAction : "
"                 QAction : "
"                 QAction : "
"                 QAction : "
"         QToolButton : qt_calendar_yearbutton"
"         QSpinBox : qt_calendar_yearedit"
"             QLineEdit : qt_spinbox_lineedit"
"                 QWidgetLineControl : "
"             QValidator : qt_spinboxvalidator"
"         QHBoxLayout : "
"     QCalendarDelegate : "
"     QCalendarTextNavigator : "

2.QCalendarWidget样式

        分成三个部分来分别说明不同部位QSS的样式设置。QCalendarWidget设置QSS的时候用全局定义，不要带空间名称。

（1）设置总的背景栏颜色、上一个月图标、下一个月图标、月份选择、年份选择样式。默认样式：

        标题背景： 

#qt_calendar_navigationbar{
        font:18px Microsoft YaHei;
        background-color:rgb(196, 196, 249);
}

         如果需要将年月选择栏背景颜色和日期背景颜色设置为同一个颜色，可以选择设置QWidget。

QCalendarWidget QWidget{
        background-color:rgb(255, 255, 153);    
}

        上一个月、下一个月跳转图标。  如果设置了QDateEdit的时间范围（本例：当前时间），下一个月按钮样式自动回变成灰色的不可点击状态（上一个月图标同理），不需要单独去设置上一个月、下一个月的不可点击状态样式。

#qt_calendar_prevmonth{
        qproperty-icon:url(:/Picture/iconGate_blue.png);
}


#qt_calendar_nextmonth{
        qproperty-icon:url(:/Picture/iconGate_red.png);
}

        月份选择分为两个部分，当前月的正常状态与选择状态，月份下拉框。                

 

QToolButton#qt_calendar_monthbutton{
        color:rgb(255, 51, 153);
        background-color:rgb(244, 244, 244);
}

QCalendarWidget QMenu{
        font:18px Microsoft YaHei;
        left:5px;
        color:rgb(0, 128, 255);
        background-color:rgb(196, 196, 249);
}

       年份选择修改样式其实就是QSpinBox修改样式。

/*年份选择：正常状态*/
QToolButton#qt_calendar_yearbutton{
        color:rgb(255, 51, 153);
        background-color:rgb(244, 244, 244);
}

/*年份选择:修改时*/
QSpinBox#qt_calendar_yearedit{
        font:18px Microsoft YaHei;
        color:rgb(255, 178, 102);
        background:rgb(255, 209, 204);                  /*文本框背景颜色*/
        selection-color:rgb(255, 255, 255);             /*选中字体颜色*/
        selection-background-color:rgb(204, 153, 255);  /*选中背景颜色*/
}


/*年份选择:向上箭头*/
QSpinBox#qt_calendar_yearedit::up-arrow{
        image:url(:/Picture/44.png);
}

/*年份选择:向下箭头*/
QSpinBox#qt_calendar_yearedit::down-arrow{
        image:url(:/Picture/44.png);
}


/*年份选择:向上图标*/
QSpinBox#qt_calendar_yearedit::up-button{
        /*border-image:url(:/Picture/top.png);*/
        color:rgb(255, 255, 153);
}

/*年份选择:向下图标*/
QSpinBox#qt_calendar_yearedit::down-button{
        /*border-image:url(:/Picture/bottom.png);*/
        color:rgb(255, 255, 153);
}

（2）周一到周末栏：修改字体颜色、背景色。

        修改背景色。周一到周五字体的颜色和日期当中周一到周五的颜色是同步的设置的，周六和周末的字体颜色和日期当中的周六周末的颜色是同步设置的。如果在此处修改字体颜色，后续就不要设置日期当中的字体颜色了，否则，日期当中的周一到周五的颜色设置会覆盖此处的字体颜色设置。

QCalendarWidget QTableView
{
        alternate-background-color:rgb(204, 229, 255);
        color:rgb(0, 128, 255);     /*字体颜色*/
}

        周六周末的颜色是单独在代码里面设置的，不在QSS里。

    QCalendarWidget *calendar = ui->dateEdit_timeEnd->calendarWidget();
    QTextCharFormat weekendFormat;
    weekendFormat.setForeground(QBrush(QColor(153, 51, 255)));
    calendar->setWeekdayTextFormat(Qt::Saturday, weekendFormat);
    calendar->setWeekdayTextFormat(Qt::Sunday, weekendFormat);

（3）日期栏：背景色、当月字体颜色、非当月颜色、当前选中日期颜色、当前选中日期背景色。 

        背景色。

#qt_calendar_calendarview{
        background-color:rgb(229, 229, 252);
}

/*选中月日期*/
QCalendarWidget QAbstractItemView:enabled{
        font:18px Microsoft YaHei;
        color:rgb(0, 204, 204);
        selection-color:rgb(255, 255, 255);           /* 当前选中日期：字体颜色*/
        selection-background-color:rgb(0, 102, 102);  /* 当前选中日期：背景颜色*/
}

/*非选中月日期*/
QCalendarWidget QAbstractItemView:disabled{
        color:rgb(204, 255, 204);
}

三、所有QSS代码

/*正常状态*/
QDateEdit#dateEdit_timeEnd{
        font:20px Microsoft YaHei;
        color:rgb(32, 32, 32);
        background-color:rgb(255, 204, 229, 80);
        border-color:rgb(255, 153, 204);
        border-style:solid;
        border-radius:10px;
        border-width:5px;
}

/*选中状态*/
QDateEdit#dateEdit_timeEnd:focus{
        font:20px Microsoft YaHei;
        border-color:rgb(255, 102, 178);    /*边框颜色*/
        border-style:solid;                 /*边框内容*/
        border-radius:10px;                 /*边框圆角弧度*/
        border-width:5px;
}

/*日历icon*/
QDateEdit#dateEdit_timeEnd:drop-down{
        border-image:url(:/Picture/calendar-icon.png);
        width:40px;
}


/*日历主体背景颜色*/
#qt_calendar_calendarview{
        background-color:rgb(229, 229, 252);
}

/*日历标题栏*/
#qt_calendar_navigationbar{
        font:18px Microsoft YaHei;
        background-color:rgb(196, 196, 249);
}
QCalendarWidget QWidget{
        background-color:rgb(255, 255, 153);    /*年月选择栏背景颜色和日期背景颜色设置为同一个颜色*/
}

/*箭头：上一个月*/
#qt_calendar_prevmonth{
        qproperty-icon:url(:/Picture/iconGate_blue.png);
}

/*箭头：下一个月*/
#qt_calendar_nextmonth{
        qproperty-icon:url(:/Picture/iconGate_red.png);
}

/*月份选择：正常状态*/
QToolButton#qt_calendar_monthbutton{
        color:rgb(255, 51, 153);
        background-color:rgb(244, 244, 244);
}

/*月份选择：下拉框*/
QCalendarWidget QMenu{
        font:18px Microsoft YaHei;
        left:5px;
        color:rgb(0, 128, 255);
        background-color:rgb(196, 196, 249);
}

/*年份选择：正常状态*/
QToolButton#qt_calendar_yearbutton{
        color:rgb(255, 51, 153);
        background-color:rgb(244, 244, 244);
}

/*年份选择:修改时*/
QSpinBox#qt_calendar_yearedit{
        font:18px Microsoft YaHei;
        color:rgb(255, 178, 102);
        background:rgb(255, 209, 204);                  /*文本框背景颜色*/
        selection-color:rgb(255, 255, 255);             /*选中字体颜色*/
        selection-background-color:rgb(204, 153, 255);  /*选中背景颜色*/
}

/*年份选择:向上箭头*/
QSpinBox#qt_calendar_yearedit::up-arrow{
        image:url(:/Picture/44.png);
}

/*年份选择:向下箭头*/
QSpinBox#qt_calendar_yearedit::down-arrow{
        image:url(:/Picture/44.png);
}


/*年份选择:向上图标*/
QSpinBox#qt_calendar_yearedit::up-button{
        /*border-image:url(:/Picture/top.png);*/
        color:rgb(255, 255, 153);
}

/*年份选择:向下图标*/
QSpinBox#qt_calendar_yearedit::down-button{
        /*border-image:url(:/Picture/bottom.png);*/
        color:rgb(255, 255, 153);
}

/*周一 ~ 周末*/
QCalendarWidget QTableView
{
        alternate-background-color:rgb(204, 229, 255);
        color:rgb(0, 128, 255);     /*字体颜色*/
}


/*选中月日期*/
QCalendarWidget QAbstractItemView:enabled{
        font:18px Microsoft YaHei;
        color:rgb(0, 204, 204);
        selection-color:rgb(255, 255, 255);           /* 当前选中日期：字体颜色*/
        selection-background-color:rgb(0, 102, 102);  /* 当前选中日期：背景颜色*/
}

/*非选中月日期*/
QCalendarWidget QAbstractItemView:disabled{
        color:rgb(204, 255, 204);
}

（如有错误，敬请批评指正。）

w_w_w_w2580369
关注
  • 3
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
QT的QCalendarWidget类的使用
希望我的博客，能帮上你解决学习中工作中所遇到的问题
12-04 1295
详细说明 QCalendarWidget类提供了基于月度的日历小部件，允许用户选择日期。 该小部件已使用当前的月份和年份进行了初始化，但是QCalendarWidget提供了几个公共插槽来更改显示的年份和月份。 默认情况下，将选择今天的日期，并且用户可以使用鼠标和键盘选择日期。可以使用selectedDate（）函数检索当前选择的日期。通过设置minimumDate和maximumDate属性，可以将用户选择限制在给定的日期范围内。或者，可以使用setDateRange（）便捷插槽一次性设置两个属性。将s
QCalendarWidget时间日历自定义样式选择控件
05-22
很多人都对QCalendarWidget无法设置样式跟颜色，这个资源自定义了QCalendarWidget的颜色并集成了日历跟时间选择控件
日历（QCalendarWidget）的使用及风格样式的设置——Qt
pingis58的博客
08-18 5745
摘自：https://blog.csdn.net/xiaopei_yan/article/details/108007941 前言 之前项目中没涉及过日历控件（QCalendarWidget），一般我是用简单的日期编辑器代替，对它的印象只存在于QtDesigner中丑的不行的日历控件。这次我要写类似企业微信的日程（如下图）功能的东西，这个就必须用到日历了（此篇博客只介绍日历的写法）。 有两种方式实现：一是自己全部重写，二呢是，修改Qt自带的控件QCalendarWidget，难易程度我肯定选二个了，不过
08 Qt自绘制日历控件：摆脱丑的让人无语的原生QCalendarWidget
最新发布
进击的程序员
02-29 921
在QtGui中，日历控件是一种非常常用的用户界面元素，用于显示和选择日期。Qt提供了一个原生的日历控件类真的丑的让人窒息！那么在这时候，也就需要我们不得不对其外观进行自定义绘制，以满足特定的设计需求。在本文中，我们将介绍如何使用Qt的自定义绘制功能来对原生日历控件进行个性化定制。以上就是今天要分享的：Qt如何实现定制日历组件的内容！既聊思路，也说代码！我们下次继续分享自定义风格扩展组件！PS:本专栏所有篇幅涉及的UI扩展组件类，会封装成插件动态库，感兴趣的同学可以留言哦。
Qt日历控件示例-QCalendarWidget
MusicScore的博客
09-01 1255
QCalendarWidget介绍 QCalendarWidget 是 Qt 框架中提供的一个日期选择控件,用户可以通过该控件快速选择需要的日期,并且支持显示当前月份的日历。
Qt之QDateTimeEdit
weixin_33814685的博客
09-01 3034
简述 QDateTime类提供了一个部件，用于编辑日期和时间。 QDateTimeEdit允许用户编辑日期，通过使用键盘或箭头键来增加和减少日期和时间值。箭头键可以在QDateTimeEdit内进行部分移动，日期和时间的格式按照setDisplayFormat()设置的显示。 简述 基本使用 效果 源码 日期时间格...
Qt QDateEdit下拉日历的样式设计
qq_44723937的博客
06-18 6257
但是还是在谷歌上找到了一些代码，解决了这些个问题,可能百度上有类似的东西，我也是copy的，但是看着百度上搜到的简简单单的没有注释的代码，有点摸不着头脑，所以就想自己来分享一下，也是记录一下遇到的问题。这些话，写在2023-6-8，本来寻思着把之前的一些博客写的不好的，更新更新，写的不对的，纠正过来，不误人子弟。但是在改的过程中，看到之前刚开始接触Qt时，写的一些博客，感觉自己的博客内容写的很稚嫩，有些语句都很不通顺。工作了快三年了，回首往昔，都是靠自己硬学学过来的，写这些也没有太多含义。
Qt例程源代码QDateTime.7z
07-19
Qt例程源代码QDateTime.7z
Qt自定义日历
08-16
//自定义日历可看上篇文章 QCalendarTimeEdit::QCalendarTimeEdit(QWidget *parent) : QLineEdit(parent) , m_calendarWidget(nullptr) , m_widget(nullptr) { m_minDateTime = QDateTime::currentDateTime(); ...
Qt自定义实现的DateTime控件，使用样式对控件进行了美化，并添加了农历的实现，此为源码
05-31
Qt重新自定义实现了日历控件，QCalendarWidget控件的样式表太难设置，且整体背景无法实现外发光的效果，于是重新自定义实现了改控件，并对控件的外观进行了美化，同时添加了农历的实现。使用vs2015或QtCreator都可以...
qt时间轴滑动条
01-11
基于qwt-6.1实现的时间轴滑动条，主要是slider参数设置技巧，设定起始结束日期，自动绘制时间轴，qwt请自行下载编译，qt我用的版本是5.7.1，vs2013。主要代码如下： QDateTime starData = QDateTime::fromString...
qt 定制日期时间控件
11-21
定制QDateTimeEdit控件，采用qt5.9vs版编译，下拉选择年份月份
Qt漂亮日历
12-28
Qt漂亮日历。 。
Qt超炫日历
12-20
这是我做的Qt日历，模仿365日历做的，里面用到了Qt网络编程，和连接数据库
Qt 自定义 Calendar 日历控件
07-31
Qt 自定义 Calendar 日历 控件 方便控制 及实现样式表
多种样式日历
12-28
多种样式日历 多种样式日历
Qt可为空值的DateTimeEdit
08-23
自认为比较友好的时间日期编辑器，继承于QDateTimeEdit, 功能相对比较完善，调用SetEmptyEnable(true)后即可实现输入空值
QCalendarWidget qss样式设置
yjgao的博客
07-24 6808
在Qt项目中为了实现不同的样式，于是把所有控件的样式都写为QSS文件中，遇到了QCalendarWidget一脸懵逼 QCalendarWidget的是有好几个控件组成的,那么为了设置其样式表，只要分别设置的组成其的所有控件的样式即可搞定, 为了获取每个控件的objectName 有两种方式，1.通过源码，找到QCalendarWidget的源文件,如果在安装Qt时，选择安装了源码，可以找到每...
QDateEdit一种样式
weixin_66207601的博客
08-17 403
QDateEdit和下拉QCalendar的配色
qdatetime::fromstring
03-16
qdatetime::fromstring是一个Qt框架中的函数，用于将字符串转换为QDateTime对象。该函数可以接受多种格式的字符串，例如"yyyy-MM-dd hh:mm:ss"、"ddd MMM dd hh:mm:ss yyyy"等等。通过该函数，可以方便地将字符串表示的日期时间转换为QDateTime对象，以便进行日期时间的操作和计算。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值