js 日期下拉框下拉框内容显示日期YYYYMM，要求范围：系统时间前4个月、后8个月。怎么实现？

Posted 2023-05-12

js 日期下拉框下拉框内容显示日期YYYYMM，要求范围：系统时间前4个月、后8个月。怎么实现 例如今天是201202 那么就要出现下拉框的日期有：...201110,201111,201112,201201,201202,201203,201204,201205,201206,201207,201208,201209,201210... 这些日期 怎么实现 望大师们帮下忙 感激不尽！！！！

分成年月两个数值即可
取到当前年份、月份，直接
前几个月的处理 对月份减1，若月份变为0，则将年份减1，月份改为12即可
后几个月的处理 对月份加1，若月份变为13，则将年份加1，月份改为1即可
最后组装成需要的字符串即可

也可使用日期对象本身的函数 参考技术A 好复杂的东东噢 参考技术B 自己找JQuery,

代理Delegate的小应用（代理日期控件和下拉框）

前言

• 在平时关于表格一类的的控件使用中，不可避免需要修改每个Item的值，通过在Item中嵌入不同的控件对编辑的内容进行限定，然而在表格的Item中插入的控件始终显示，当表格中item项很多的时候，会影响表格的美观和用户的体验。此时Delegate代理就派上了用场，通过Delegate可以使得Item的控件在编辑状态才显示，提高了用户的体验满意度。

效果展示

1、展示状态：

2、编辑状态

 

设计思路

• 这类效果的实现主要使用了QItemDelegate类，QItemDelegate类为数据项Item的显示和编辑提供了一套工具。
• QItemDelegate类可以用来Item项的常规性展示，也可以为基于QAbstractItemView 的控件的Item提供编辑的功能。QItemDelegate是Model/View的框架的一部分。
• 可以通过实现以下四个函数来为Item实现基本的编辑功能。

QWidget *createEditor(QWidget * parent, const QStyleOptionViewItem & option, const QModelIndex & index) const;//返回改变Model数据的widget，该widget是经过定制行为的Widget

void setEditorData(QWidget * editor, const QModelIndex & index) const;//将可操作的数据提供给widget

void setModelData(QWidget * editor, QAbstractItemModel * model, const QModelIndex & index) const;  //将widget的数据展示到Item中

void updateEditorGeometry(QWidget * editor, const QStyleOptionViewItem & option, const QModelIndex & index) const;//确保widget能够正确显示到view中

• 从介绍的四个虚函数可以看出，通过实现这四个函数，可以基本实现表格类控件的ITem的编辑功能，以下将以日历控件来对这些函数的实现做一个介绍，其他的控件甚至是自定义控件，通过照猫画虎，相信可以达到自己的目的。

QWidget *DateDelegate::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    QDateTimeEdit *editer = new QDateTimeEdit(parent);
    editer->setDisplayFormat("yyyy-MM-dd");//设置显示格式
    editer->setCalendarPopup(true);//设置日历控件为悬空显示
    editer->installEventFilter(const_cast<DateDelegate*>(this));//安装时间过滤器，使得代理能够获取定制控件的值
    return editer;
}

void DateDelegate::setEditorData(QWidget *editor, const QModelIndex &index) const
{
    QString dateStr = index.model()->data(index).toString();//通过index获取model中相应项ITem的值
    QDate date = QDate::fromString(dateStr,Qt::ISODate);
    QDateTimeEdit *edit = static_cast<QDateTimeEdit *>(editor);//转换类型获取定制的控件
    edit->setDate(date);//将Item项中的值展示到定制控件中
}

void DateDelegate::setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) const
{
    QDateTimeEdit *edit = static_cast<QDateTimeEdit *>(editor);
    QDate date = edit->date();
    model->setData(index,QVariant(date.toString(Qt::ISODate)));//将定制控件中的值展示到表格中
}

//调整定制控件的展示，确保可以展示到窗体View中
void DateDelegate::updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    editor->setGeometry(option.rect);
}

总结

• 好了，通过以上的介绍，通过自定义类实现QItemDelegate类，可以使用定制的控件实现表格类控件的展示和编辑功能无缝切换，提高用户体验。
• 该链接是本人试验的简单的代码，欢迎各位交流技术，互相提高！

http://download.csdn.net/detail/sxpsxp12/9619317

 

http://blog.csdn.net/sxpsxp12/article/details/52402496