@douyinfe/semi-ui 2.5.1 → 2.7.0-beta.0

package/datePicker/datePicker.tsx

@@ -1,10 +1,13 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus */
 /* eslint-disable max-len */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { noop, stubFalse, isDate, get, isFunction } from 'lodash';
+import { noop, stubFalse, isDate, get, isFunction, isEqual } from 'lodash';
 import ConfigContext from '../configProvider/context';
-import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type } from '@douyinfe/semi-foundation/datePicker/foundation';
+import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type, RangeType } from '@douyinfe/semi-foundation/datePicker/foundation';
 import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/datePicker/constants';
 import { strings as popoverStrings, numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
 import BaseComponent from '../_base/baseComponent';
@@ -17,8 +20,8 @@ import Trigger from '../trigger';
 import YearAndMonth, { YearAndMonthProps } from './yearAndMonth';
 import '@douyinfe/semi-foundation/datePicker/datePicker.scss';
 import { Locale } from '../locale/interface';
-import { RangeType } from '@douyinfe/semi-foundation/datePicker/inputFoundation';
 import { TimePickerProps } from '../timePicker/TimePicker';
+import { InsetInputValue, InsetInputChangeProps } from '@douyinfe/semi-foundation/datePicker/inputFoundation';
 
 export interface DatePickerProps extends DatePickerFoundationProps {
     'aria-describedby'?: React.AriaAttributes['aria-describedby'];
@@ -159,6 +162,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         autoSwitchDate: true,
         syncSwitchMonth: false,
         rangeSeparator: strings.DEFAULT_SEPARATOR_RANGE,
+        insetInput: false,
     };
 
     triggerElRef: React.MutableRefObject<HTMLElement>;
@@ -183,7 +187,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             prevTimeZone: null,
             motionEnd: false, // Monitor if popover animation ends
             rangeInputFocus: undefined, // Optional'rangeStart ',' rangeEnd ', false
-            autofocus: props.autoFocus || (this.isRangeType(props.type, props.triggerRender) && (props.open || props.defaultOpen))
+            autofocus: props.autoFocus || (this.isRangeType(props.type, props.triggerRender) && (props.open || props.defaultOpen)),
+            insetInputValue: null,
+            triggerDisabled: undefined,
         };
 
         this.adapter.setCache('cachedSelectedValue', null);
@@ -254,6 +260,12 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             updateInputValue: inputValue => {
                 this.setState({ inputValue });
             },
+            updateInsetInputValue: (insetInputValue: InsetInputValue) => {
+                const { insetInput } = this.props;
+                if (insetInput && !isEqual(insetInputValue, this.state.insetInputValue)) {
+                    this.setState({ insetInputValue });
+                }
+            },
             needConfirm: () =>
                 ['dateTime', 'dateTimeRange'].includes(this.props.type) && this.props.needConfirm === true,
             typeIsYearOrMonth: () => ['month', 'year'].includes(this.props.type),
@@ -309,6 +321,27 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             },
             couldPanelClosed: () => this.focusRecordsRef.current.rangeStart && this.focusRecordsRef.current.rangeEnd,
             isEventTarget: e => e && e.target === e.currentTarget,
+            setInsetInputFocus: () => {
+                const { rangeInputFocus } = this.state;
+                switch (rangeInputFocus) {
+                    case 'rangeEnd':
+                        if (document.activeElement !== this.rangeInputEndRef.current) {
+                            const inputEndNode = get(this, 'rangeInputEndRef.current');
+                            inputEndNode && inputEndNode.focus();
+                        }
+                        break;
+                    case 'rangeStart':
+                    default:
+                        if (document.activeElement !== this.rangeInputStartRef.current) {
+                            const inputStartNode = get(this, 'rangeInputStartRef.current');
+                            inputStartNode && inputStartNode.focus();
+                        }
+                        break;
+                }
+            },
+            setTriggerDisabled: (disabled: boolean) => {
+                this.setState({ triggerDisabled: disabled });
+            }
         };
     }
 
@@ -378,7 +411,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             syncSwitchMonth,
             onPanelChange,
             timeZone,
-            triggerRender
+            triggerRender,
+            insetInput
         } = this.props;
         const { value, cachedSelectedValue, motionEnd, rangeInputFocus } = this.state;
 
@@ -425,6 +459,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                 timeZone={timeZone}
                 focusRecordsRef={this.focusRecordsRef}
                 triggerRender={triggerRender}
+                insetInput={insetInput}
             />
         );
     }
@@ -442,6 +477,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
 
     handleOpenPanel = () => this.foundation.openPanel();
     handleInputChange: DatePickerFoundation['handleInputChange'] = (...args) => this.foundation.handleInputChange(...args);
+    handleInsetInputChange = (options: InsetInputChangeProps) => this.foundation.handleInsetInputChange(options);
     handleInputComplete: DatePickerFoundation['handleInputComplete'] = v => this.foundation.handleInputComplete(v);
     handleInputBlur: DateInputProps['onBlur'] = e => this.foundation.handleInputBlur(get(e, 'nativeEvent.target.value'), e);
     handleInputFocus: DatePickerFoundation['handleInputFocus'] = (...args) => this.foundation.handleInputFocus(...args);
@@ -458,6 +494,25 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             return this.focusRecordsRef.current.rangeStart;
         }
     };
+    handleInsetDateFocus = (e: React.FocusEvent, rangeType: 'rangeStart' | 'rangeEnd') => {
+        const monthGridFoundation = get(this, 'monthGrid.current.foundation');
+        if (monthGridFoundation) {
+            monthGridFoundation.showDatePanel(strings.PANEL_TYPE_LEFT);
+            monthGridFoundation.showDatePanel(strings.PANEL_TYPE_RIGHT);
+        }
+        this.handleInputFocus(e, rangeType);
+    }
+
+    handleInsetTimeFocus = () => {
+        const monthGridFoundation = get(this, 'monthGrid.current.foundation');
+        if (monthGridFoundation) {
+            monthGridFoundation.showTimePicker(strings.PANEL_TYPE_LEFT);
+            monthGridFoundation.showTimePicker(strings.PANEL_TYPE_RIGHT);
+        }
+    }
+    handlePanelVisibleChange = (visible: boolean) => {
+        this.foundation.handlePanelVisibleChange(visible);
+    }
 
     renderInner(extraProps?: Partial<DatePickerProps>) {
         const {
@@ -477,16 +532,18 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             triggerRender,
             size,
             inputReadOnly,
-            rangeSeparator
+            rangeSeparator,
+            insetInput,
         } = this.props;
-        const { value, inputValue, rangeInputFocus } = this.state;
+        const { value, inputValue, rangeInputFocus, triggerDisabled } = this.state;
         // This class is not needed when triggerRender is function
         const isRangeType = this.isRangeType(type, triggerRender);
+        const inputDisabled = disabled || insetInput && triggerDisabled;
         const inputCls = classnames(`${cssClasses.PREFIX}-input`, {
             [`${cssClasses.PREFIX}-range-input`]: isRangeType,
             [`${cssClasses.PREFIX}-range-input-${size}`]: isRangeType && size,
-            [`${cssClasses.PREFIX}-range-input-active`]: isRangeType && rangeInputFocus && !disabled,
-            [`${cssClasses.PREFIX}-range-input-disabled`]: isRangeType && disabled,
+            [`${cssClasses.PREFIX}-range-input-active`]: isRangeType && rangeInputFocus && !inputDisabled,
+            [`${cssClasses.PREFIX}-range-input-disabled`]: isRangeType && inputDisabled,
             [`${cssClasses.PREFIX}-range-input-${validateStatus}`]: isRangeType && validateStatus,
         });
         const phText = placeholder || locale.placeholder[type]; // i18n
@@ -494,9 +551,9 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         const props = {
             ...extraProps,
             placeholder: phText,
-            disabled,
+            disabled: inputDisabled,
             inputValue,
-            value,
+            value: value as Date[],
             onChange: this.handleInputChange,
             onEnterPress: this.handleInputComplete,
             // TODO: remove in next major version
@@ -509,7 +566,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             format,
             multiple,
             validateStatus,
-            inputReadOnly,
+            inputReadOnly: inputReadOnly || insetInput,
             // onClick: this.handleOpenPanel,
             onBlur: this.handleInputBlur,
             onFocus: this.handleInputFocus,
@@ -518,18 +575,22 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             size,
             autofocus: this.state.autofocus,
             dateFnsLocale,
-            rangeInputStartRef: this.rangeInputStartRef,
-            rangeInputEndRef: this.rangeInputEndRef,
             rangeInputFocus,
             rangeSeparator,
             onRangeBlur: this.handleRangeInputBlur,
             onRangeClear: this.handleRangeInputClear,
             onRangeEndTabPress: this.handleRangeEndTabPress,
+            rangeInputStartRef: insetInput ? null :  this.rangeInputStartRef,
+            rangeInputEndRef: insetInput ? null : this.rangeInputEndRef,
         };
 
         return (
-            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
             <div
+                // tooltip will mount a11y props to children
+                // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+                role="combobox"
+                aria-label={Array.isArray(value) && value.length ? "Change date" : "Choose date"}
+                aria-disabled={disabled}
                 onClick={this.handleTriggerWrapperClick}
                 className={inputCls}>
                 {typeof triggerRender === 'function' ? (
@@ -567,7 +628,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     };
 
     renderPanel = (locale: Locale['DatePicker'], localeCode: string, dateFnsLocale: Locale['dateFnsLocale']) => {
-        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot } = this.props;
+        const { dropdownClassName, dropdownStyle, density, topSlot, bottomSlot, insetInput, type, format, rangeSeparator } = this.props;
+        const { insetInputValue, value } = this.state;
         const wrapCls = classnames(
             cssClasses.PREFIX,
             {
@@ -577,9 +639,25 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             dropdownClassName
         );
 
+        const insetInputProps = {
+            dateFnsLocale,
+            format,
+            insetInputValue,
+            rangeSeparator,
+            type,
+            value: value as Date[],
+            handleInsetDateFocus: this.handleInsetDateFocus,
+            handleInsetTimeFocus: this.handleInsetTimeFocus,
+            onInsetInputChange: this.handleInsetInputChange,
+            rangeInputStartRef: this.rangeInputStartRef,
+            rangeInputEndRef: this.rangeInputEndRef,
+            density,
+        };
+
         return (
             <div ref={this.panelRef} className={wrapCls} style={dropdownStyle}>
                 {topSlot && <div className={`${cssClasses.PREFIX}-topSlot`}>{topSlot}</div>}
+                {insetInput && <DateInput {...insetInputProps} insetInput={true} />}
                 {this.adapter.typeIsYearOrMonth() ?
                     this.renderYearMonthPanel(locale, localeCode) :
                     this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
@@ -648,6 +726,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
                 visible={panelShow}
                 stopPropagation={stopPropagation}
                 spacing={spacing}
+                onVisibleChange={this.handlePanelVisibleChange}
             >
                 {children}
             </Popover>

package/datePicker/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { forwardStatics } from '@douyinfe/semi-foundation/utils/object';
+import { numbers, strings } from '@douyinfe/semi-foundation/datePicker/constants';
 import DatePicker, { DatePickerProps } from './datePicker';
 import ConfigContext from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
@@ -33,6 +34,20 @@ export default forwardStatics(
             propsObj.rangeSeparator = ` ${rangeSeparator.trim()} `;
         }
 
+        if (propsObj.insetInput) {
+            if (!propsObj.position) {
+                propsObj.position = strings.POSITION_INLINE_INPUT;
+            }
+            /**
+             * When insetInput is `true` and `position` includes `over`, use 1px `spacing` to solve the problem of border-radius leakage in the upper left corner
+             * 
+             * @see https://user-images.githubusercontent.com/26477537/158817185-126a5f33-41f7-414a-8e36-8d1be2dda5cd.png
+             */
+            if (propsObj.position.includes('Over') && !propsObj.spacing) {
+                propsObj.spacing = numbers.SPACING_INSET_INPUT;
+            }
+        }
+
         return (
             <ConfigContext.Consumer>
                 {({ timeZone }: { timeZone?: string | number }) => (

package/datePicker/insetInput.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { get } from 'lodash';
+
+import {
+    InsetInputValue,
+    Type,
+    InsetInputChangeFoundationProps,
+} from '@douyinfe/semi-foundation/datePicker/inputFoundation';
+import Input, { InputProps } from '../input';
+
+export interface InsetDateInputProps {
+    forwardRef: InputProps['forwardRef'];
+    insetInputValue: InsetInputValue;
+    placeholder: string;
+    valuePath: string;
+    onChange: (options: InsetInputChangeFoundationProps) => void;
+    onFocus: InputProps['onFocus'];
+}
+
+export interface InsetTimeInputProps {
+    disabled: boolean;
+    insetInputValue: InsetInputValue;
+    placeholder: string;
+    valuePath: string;
+    type: Type;
+    onChange: (options: InsetInputChangeFoundationProps) => void;
+    onFocus: InputProps['onFocus'];
+}
+
+export function InsetDateInput(props: InsetDateInputProps) {
+    const { insetInputValue, valuePath, onFocus, onChange, placeholder, forwardRef } = props;
+    const value = get(insetInputValue, valuePath);
+
+    return (
+        <Input
+            value={value}
+            onChange={(value, event) => {
+                onChange({
+                    value,
+                    event,
+                    insetInputValue,
+                    valuePath,
+                });
+            }}
+            onFocus={onFocus}
+            placeholder={placeholder}
+            ref={forwardRef}
+        />
+    );
+}
+
+export function InsetTimeInput(props: InsetTimeInputProps) {
+    const { insetInputValue, valuePath, type, onFocus, onChange, placeholder, disabled } = props;
+    const _isTimeType = type.includes('Time');
+    if (!_isTimeType) {
+        return null;
+    }
+    const value = get(insetInputValue, valuePath);
+
+    return (
+        <Input
+            value={value}
+            onChange={(value, event) => {
+                onChange({
+                    value,
+                    event,
+                    insetInputValue,
+                    valuePath,
+                });
+            }}
+            onFocus={onFocus}
+            placeholder={placeholder}
+            disabled={disabled}
+        />
+    );
+}

package/datePicker/month.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable max-len */
 import React from 'react';
 import classNames from 'classnames';
@@ -40,7 +41,8 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
         startDateOffset: PropTypes.func,
         endDateOffset: PropTypes.func,
         rangeInputFocus: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-        focusRecordsRef: PropTypes.object
+        focusRecordsRef: PropTypes.object,
+        multiple: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -275,9 +277,9 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
         // i18n
         const weekdaysText = weekdays.map(key => locale.weeks[key]);
         return (
-            <div className={weekdayCls}>
+            <div role="row" className={weekdayCls}>
                 {weekdaysText.map((E, i) => (
-                    <div key={E + i} className={weekdayItemCls}>
+                    <div role="columnheader" key={E + i} className={weekdayItemCls}>
                         {E}
                     </div>
                 ))}
@@ -305,7 +307,7 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
     renderWeek(week: MonthDayInfo[], weekIndex: number) {
         const weekCls = cssClasses.WEEK;
         return (
-            <div className={weekCls} key={weekIndex}>
+            <div role="row" className={weekCls} key={weekIndex}>
                 {week.map((day, dayIndex) => this.renderDay(day, dayIndex))}
             </div>
         );
@@ -317,7 +319,7 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
         const { fullDate, dayNumber } = day;
         if (!fullDate) {
             return (
-                <div key={(dayNumber as number) + dayIndex} className={cssClasses.DAY}>
+                <div role="gridcell" tabIndex={-1} key={(dayNumber as number) + dayIndex} className={cssClasses.DAY}>
                     <span />
                 </div>
             );
@@ -356,6 +358,11 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
 
         return (
             <div
+                role="gridcell"
+                tabIndex={dayStatus.isDisabled ? -1 : 0}
+                aria-disabled={dayStatus.isDisabled}
+                aria-selected={dayStatus.isSelected}
+                aria-label={fullDate}
                 className={!customRender ? dayCls : cssClasses.DAY}
                 title={fullDate}
                 key={(dayNumber as number) + dayIndex}
@@ -373,13 +380,13 @@ export default class Month extends BaseComponent<MonthProps, MonthState> {
     }
 
     render() {
-        const { forwardRef } = this.props;
+        const { forwardRef, multiple } = this.props;
         const weekday = this.renderDayOfWeek();
         const weeks = this.renderWeeks();
         const monthCls = classNames(cssClasses.MONTH);
         const ref = forwardRef || this.monthRef;
         return (
-            <div ref={ref} className={monthCls}>
+            <div role="grid" aria-multiselectable={multiple} ref={ref} className={monthCls} >
                 {weekday}
                 {weeks}
             </div>

package/datePicker/monthsGrid.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable react/no-did-update-set-state */
 /* eslint-disable max-len */
 /* eslint-disable no-nested-ternary */
@@ -273,6 +275,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
     renderPanel(month: Date, panelType: PanelType) {
         let monthCls = classnames(`${prefixCls}-month-grid-${panelType}`);
         const { monthLeft, monthRight, currentPanelHeight } = this.state;
+        const { insetInput } = this.props;
         const panelDetail = panelType === strings.PANEL_TYPE_RIGHT ? monthRight : monthLeft;
         const { isTimePickerOpen, isYearPickerOpen } = panelDetail;
 
@@ -295,7 +298,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                 style.minWidth = wrap.getBoundingClientRect().width;
             }
 
-            if (this.leftIsYearOrTime() && this.rightIsYearOrTime()) {
+            if (this.leftIsYearOrTime() && this.rightIsYearOrTime() && !insetInput) {
                 /**
                  * left和right同时为tpk时，panel会有一个minHeight
                  * 如果缓存的currentPanelHeight为0，则需要计算滚动列表的高度
@@ -305,7 +308,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                  * When left and right are tpk at the same time, the panel will have a minHeight
                  * If the cached currentPanelHeight is 0, you need to calculate the height of the scrolling list
                  * If there is a cached value, use currentPanelHeight (if this height is less than the actual value, it will affect the number of cycles in the ScrollList to render the list)
-                 * See packages/semi-foundation/scrollList/itemF oundation.js initWheelList function
+                 * See packages/semi-foundation/scrollList/itemFoundation.js initWheelList function
                  */
 
                 style.minHeight = currentPanelHeight ? currentPanelHeight : this.calcScrollListHeight();
@@ -318,8 +321,11 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
             monthCls = classnames(monthCls, `${prefixCls}-yam-showing`);
         }
 
+        const _isDatePanelOpen = !(isYearPickerOpen || isTimePickerOpen);
+        const xOpenType = _isDatePanelOpen ? 'date' : isYearPickerOpen ? 'year' : 'time';
+
         return (
-            <div className={monthCls} key={panelType} style={style}>
+            <div className={monthCls} key={panelType} style={style} x-open-type={xOpenType}>
                 {yearAndMonthLayer}
                 {timePickerLayer}
                 {/* {isYearPickerOpen || isTimePickerOpen ? null : panelContent} */}
@@ -343,7 +349,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
     renderMonth(month: Date, panelType: PanelType) {
         const { selected, rangeStart, rangeEnd, hoverDay, maxWeekNum, offsetRangeStart, offsetRangeEnd } = this.state;
-        const { weekStartsOn, disabledDate, locale, localeCode, renderDate, renderFullDate, startDateOffset, endDateOffset, density, rangeInputFocus, syncSwitchMonth } = this.props;
+        const { weekStartsOn, disabledDate, locale, localeCode, renderDate, renderFullDate, startDateOffset, endDateOffset, density, rangeInputFocus, syncSwitchMonth, multiple } = this.props;
         let monthText = '';
         // i18n monthText
         if (month) {
@@ -409,6 +415,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                     startDateOffset={startDateOffset}
                     endDateOffset={endDateOffset}
                     focusRecordsRef={this.props.focusRecordsRef}
+                    multiple={multiple}
                 />
             </div>
         );
@@ -534,9 +541,9 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
     renderSwitch(panelType: PanelType) {
         const { rangeStart, rangeEnd, monthLeft, monthRight } = this.state;
-        const { type, locale, disabledTimePicker, density, dateFnsLocale } = this.props;
-        // Type: date, dateRange, year, month, no rendering required
-        if (!type.includes('Time')) {
+        const { type, locale, disabledTimePicker, density, dateFnsLocale, insetInput } = this.props;
+        // Type: date, dateRange, year, month, inset input no rendering required
+        if (!type.includes('Time') || insetInput) {
             return null;
         }
 
@@ -580,12 +587,22 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
         return (
             <div className={switchCls} ref={current => this.adapter.setCache(`switch-${panelType}`, current)}>
-                <div className={dateCls} onClick={e => this.foundation.showDatePanel(panelType)}>
-                    {showSwithIcon && <IconCalendar />}
+                <div
+                    role="button"
+                    aria-label="Switch to date panel"
+                    className={dateCls}
+                    onClick={e => this.foundation.showDatePanel(panelType)}
+                >
+                    {showSwithIcon && <IconCalendar aria-hidden />}
                     <span className={textCls}>{dateText || monthText}</span>
                 </div>
-                <div className={timeCls} onClick={e => this.foundation.showTimePicker(panelType, true)}>
-                    {showSwithIcon && <IconClock />}
+                <div
+                    role="button"
+                    aria-label="Switch to time panel"
+                    className={timeCls}
+                    onClick={e => this.foundation.showTimePicker(panelType, true)}
+                >
+                    {showSwithIcon && <IconClock aria-hidden />}
                     <span className={textCls}>{timeText}</span>
                 </div>
             </div>
@@ -594,7 +611,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
 
     render() {
         const { monthLeft, monthRight } = this.state;
-        const { type } = this.props;
+        const { type, insetInput } = this.props;
         const monthGridCls = classnames({
             [`${prefixCls }-month-grid`]: true,
         });
@@ -618,6 +635,8 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
                 className={monthGridCls}
                 x-type={type}
                 x-panel-yearandmonth-open-type={yearOpenType}
+                // FIXME:
+                x-insetInput={insetInput ? "true" : "false"}
                 ref={current => this.cacheRefCurrent('monthGrid', current)}
             >
                 {content}

package/datePicker/navigation.tsx

@@ -101,7 +101,8 @@ export default class Navigation extends PureComponent<NavigationProps> {
             <div className={prefixCls} ref={ref}>
                 <IconButton
                     key="double-chevron-left"
-                    icon={<IconDoubleChevronLeft size={iconBtnSize}/>} 
+                    aria-label="Previous year"
+                    icon={<IconDoubleChevronLeft aria-hidden size={iconBtnSize} />}
                     size={buttonSize}
                     theme={btnTheme}
                     noHorizontalPadding={btnNoHorizontalPadding}
@@ -110,7 +111,8 @@ export default class Navigation extends PureComponent<NavigationProps> {
                 />
                 <IconButton
                     key="chevron-left"
-                    icon={<IconChevronLeft size={iconBtnSize} />}
+                    aria-label="Previous month"
+                    icon={<IconChevronLeft aria-hidden size={iconBtnSize} />}
                     size={buttonSize}
                     onClick={onPrevMonth}
                     theme={btnTheme}
@@ -124,7 +126,8 @@ export default class Navigation extends PureComponent<NavigationProps> {
                 </div>
                 <IconButton
                     key="chevron-right"
-                    icon={<IconChevronRight size={iconBtnSize} />}
+                    aria-label="Next month"
+                    icon={<IconChevronRight aria-hidden size={iconBtnSize} />}
                     size={buttonSize}
                     onClick={onNextMonth}
                     theme={btnTheme}
@@ -133,7 +136,8 @@ export default class Navigation extends PureComponent<NavigationProps> {
                 />
                 <IconButton
                     key="double-chevron-right"
-                    icon={<IconDoubleChevronRight size={iconBtnSize}/>} 
+                    aria-label="Next year"
+                    icon={<IconDoubleChevronRight aria-hidden size={iconBtnSize} />}
                     size={buttonSize}
                     theme={btnTheme}
                     noHorizontalPadding={btnNoHorizontalPadding}

package/datePicker/quickControl.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events */
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';

package/datePicker/yearAndMonth.tsx

@@ -208,7 +208,7 @@ class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonthState> {
                     <div className={prefix}>
                         <IconButton
                             noHorizontalPadding={false}
-                            icon={<IconChevronLeft size={iconSize} />}
+                            icon={<IconChevronLeft aria-hidden size={iconSize} />}
                             size={buttonSize}
                             onClick={this.backToMain}
                         >