add picker value

assets/index.less

@@ -18,6 +18,11 @@
       &-month-year {
         flex: auto;
         text-align: center;
+
+        > button {
+          border: 0;
+          padding: 0;
+        }
       }
     }
 
@@ -38,18 +43,19 @@
         width: 20px;
         height: 20px;
         line-height: 20px;
-        display: block;
+        display: inline-block;
         box-sizing: border-box;
         border: 0;
         padding: 0;
+        margin: 0;
         cursor: pointer;
       }
 
       &-today > &-cell {
         border: 1px solid blue;
       }
       &-now > &-cell {
-        background: green;
+        background: fade(blue, 20%);
       }
     }
   }

examples/basic.tsx

@@ -69,19 +69,21 @@ export default () => {
   const [value, setValue] = React.useState(defaultValue);
   return (
     <div>
-      {defaultValue.toString()}
-
+      <h3>Basic {defaultValue.toString()}</h3>
       <DatePanel<Moment>
         prefixCls="rc-picker"
         generateConfig={generateConfig}
         value={value}
         locale={zhCN}
         onSelect={setValue}
       />
+
+      <h3>1 Month earlier</h3>
       <DatePanel<Moment>
         prefixCls="rc-picker"
         generateConfig={generateConfig}
         value={value}
+        defaultPickerValue={defaultValue.clone().subtract(1, 'month')}
         locale={enUS}
         onSelect={setValue}
       />

src/panels/DatePanel/DateHeader.tsx

@@ -37,14 +37,22 @@ function DateHeader<DateType>(props: DateHeaderProps<DateType>) {
   const month = generateConfig.getMonth(viewDate);
 
   // =================== Month & Year ===================
-  const yearNode: React.ReactNode = generateConfig.locale.format(
-    locale.locale,
-    viewDate,
-    locale.yearFormat,
+  const yearNode: React.ReactNode = (
+    <button type="button" key="year">
+      {generateConfig.locale.format(locale.locale, viewDate, locale.yearFormat)}
+    </button>
+  );
+  const monthNode: React.ReactNode = (
+    <button type="button" key="month">
+      {locale.monthFormat
+        ? generateConfig.locale.format(
+            locale.locale,
+            viewDate,
+            locale.monthFormat,
+          )
+        : monthsLocale[month]}
+    </button>
   );
-  const monthNode: React.ReactNode = locale.monthFormat
-    ? generateConfig.locale.format(locale.locale, viewDate, locale.monthFormat)
-    : monthsLocale[month];
 
   const monthYearNodes = locale.monthBeforeYear
     ? [monthNode, yearNode]

src/panels/DatePanel/index.tsx

@@ -10,16 +10,24 @@ export interface DatePanelProps<DateType> {
   prefixCls: string;
   generateConfig: GenerateConfig<DateType>;
   value: DateType;
+  /** [Legacy] Set default display picker view date */
+  defaultPickerValue?: DateType;
   locale: Locale;
   onSelect?: (value: DateType) => void;
 }
 
 function DatePanel<DateType>(props: DatePanelProps<DateType>) {
-  const { prefixCls, generateConfig, value, onSelect } = props;
+  const {
+    prefixCls,
+    generateConfig,
+    value,
+    defaultPickerValue,
+    onSelect,
+  } = props;
   const panelPrefixCls = `${prefixCls}-date-panel`;
 
   const currentDate = value;
-  const [viewDate, setViewDate] = React.useState(value);
+  const [viewDate, setViewDate] = React.useState(defaultPickerValue || value);
 
   const onInternalSelect = (newValue: DateType) => {
     if (onSelect) {