uas手机版

日程新增切换月份和切换年份按钮

uas-office-web/uas-mobile/src/components/common/calendar/CommonCalendar.jsx

@@ -4,9 +4,15 @@
  */
 
 import React, { Component } from 'react'
-import { Calendar } from 'antd'
+import { Calendar, Select, Col, Row } from 'antd'
 import './common-calendar.less'
 import moment from 'moment'
+import {
+  DoubleLeftOutlined,
+  LeftOutlined,
+  RightOutlined,
+  DoubleRightOutlined,
+} from '@ant-design/icons'
 
 export default class CommonCalendar extends Component {
 
@@ -35,6 +41,105 @@ export default class CommonCalendar extends Component {
             onSelect={this.onSelectTime}
             fullscreen={false}
             value={moment(currentDate)}
+            headerRender={({ value, type, onChange, onTypeChange }) => {
+              const start = 0
+              const end = 12
+              const monthOptions = []
+
+              const current = value.clone()
+              const localeData = value.localeData()
+              const months = []
+              for (let i = 0; i < 12; i++) {
+                current.month(i)
+                months.push(localeData.monthsShort(current))
+              }
+
+              for (let index = start; index < end; index++) {
+                monthOptions.push(
+                  <Select.Option className="month-item" key={`${index}`}>
+                    {months[index]}
+                  </Select.Option>,
+                )
+              }
+              const month = value.month()  //面板月份0开始
+              const year = value.year()     //面板年份
+              const options = []
+              for (let i = year - 10; i < year + 10; i += 1) {
+                options.push(
+                  <Select.Option key={i} value={i} className="year-item">
+                    {i}
+                  </Select.Option>,
+                )
+              }
+              return (
+                <div className="ant-picker-header" style={{ padding: 8 }}>
+                  <Row gutter={8}>
+                    <div className="left-box arrow-box">
+                      <DoubleLeftOutlined
+                        className="lastyear arrow"
+                        onClick={() => {
+                          const now = value.clone().year(year - 1)
+                          onChange(now)
+                        }}
+                      />
+                      <LeftOutlined
+                        className="lastmonth arrow"
+                        onClick={() => {
+                          const now = value.clone().month(month - 1)
+                          onChange(now)
+                        }}
+                      />
+                    </div>
+
+                    <div className="middle-box">
+                      <Select
+                        size="small"
+                        dropdownMatchSelectWidth={false}
+                        className="my-year-select"
+                        onChange={newYear => {
+                          const now = value.clone().year(newYear)
+                          onChange(now)
+                        }}
+                        value={String(year)}
+                      >
+                        {options}
+                      </Select>
+                      <Select
+                        size="small"
+                        dropdownMatchSelectWidth={false}
+                        className="my-month-select"
+                        value={String(month)}
+                        onChange={selectedMonth => {
+                          const newValue = value.clone()
+                          newValue.month(parseInt(selectedMonth, 10))
+                          onChange(newValue)
+                        }}
+                      >
+                        {monthOptions}
+                      </Select>
+                    </div>
+
+                    <div className="right-box arrow-box">
+                      <RightOutlined
+                        className="nextmonth arrow"
+                        onClick={() => {
+                          const now = value.clone().month(month + 1)
+                          onChange(now)
+                        }}
+                      />
+                      <DoubleRightOutlined
+                        className="nextyear arrow"
+                        onClick={() => {
+                          const now = value.clone().year(year + 1)
+                          onChange(now)
+                        }}
+                      />
+                    </div>
+
+                  </Row>
+                </div>
+              )
+            }}
           />
         </div>
       </div>

uas-office-web/uas-mobile/src/components/common/calendar/common-calendar.less

@@ -28,16 +28,28 @@
 .site-calendar-demo-card {
   border: 1px solid #f0f0f0;
   border-radius: 2px;
-}
 
-.ant-picker-calendar-header {
-  padding: 6px 0;
-}
+  .ant-picker-header {
+    .ant-row {
+      margin: 0 !important;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+
+      .arrow-box {
+        .arrow {
+          margin: 0 8px;
+        }
+
+        .left-box {
+          margin-left: 8px;
+        }
 
-.ant-picker-calendar-header .ant-radio-group {
-  display: none;
+        .right-box {
+          margin-right: 8px;
+        }
+      }
+    }
+  }
 }
 
-.ant-picker-calendar .ant-picker-panel .ant-picker-body {
-  padding: 3px 0;
-}