elementui（el-date-picker）日期选择器的日历样式修改

关注

原创最新推荐文章于 2026-07-23 15:26:27 发布 1.6k 阅读 AI 写同款· GEO 优化 ›

js实现日期农历与公历的互转使用年限：1900-2100 使用场景1：vue项目 js引入：import calendar from '../../utils/calendar.js' 方法调用： getNowDate(){ var nowDate = new Date() // 输入公历年月日，得出农历信息 var nongliStr = calendar.calendarFormatter.sol... 阅读详情


/*日历样式----------------------------------------------------------*/
  .selfDate {
    background-color: #08294c !important;
    color: #61b7ff;
    border: 1px solid #85e9fc;

    .el-picker-panel__sidebar {
      background-color: #08294c !important;
      border: 1px solid #85e9fc;

      .el-picker-panel__shortcut {
        color: #61b7ff;
      }
    }

    .el-date-picker__header-label {
      color: #61b7ff;
    }

    .el-date-picker__header--bordered {
      border-bottom: solid 1px #85e9fc;
    }

    .el-picker-panel__content {
      .el-year-table td .cell, .el-month-table td .cell {
        color: #61b7ff;
      }
    }

    .el-picker-panel__icon-btn {
      color: #61b7ff;
    }

    .el-date-range-picker__content .el-date-range-picker__header div {
      color: #7aa8fe;
    }

    .el-date-table td.next-month,
    .el-date-table td.prev-month {
      color: #255687;
    }

    .el-date-table td.in-range div {
      background-color: #183870;
    }

    .el-date-range-picker__content.is-left {
      border: 1px solid #244588;

    }

    .el-date-table th {
      color: #7aa8fe;
    }

    .el-date-table th {
      border-bottom: 1px solid #244588;
    }

    .el-date-table td.start-date div,
    .el-date-table td.end-date div {
      color: #fff;

    }

    .el-date-table td.start-date span,
    .el-date-table td.end-date span {
      background: #083671;
    }
  }
  /*日历样式------------------------------------------------------------------------*/