@douyinfe/semi-foundation 2.24.3 → 2.25.0-alpha.0

package/lib/es/datePicker/_utils/getDefaultPickerDate.js

@@ -5,7 +5,6 @@ import isTimestamp from './isTimestamp';
 /**
  * get left panel picker date and right panel picker date
  */
-
 export default function getDefaultPickerDate(options) {
   const {
     defaultPickerValue,
@@ -14,41 +13,32 @@ export default function getDefaultPickerDate(options) {
   } = options;
   let nowDate = Array.isArray(defaultPickerValue) ? defaultPickerValue[0] : defaultPickerValue;
   let nextDate = Array.isArray(defaultPickerValue) ? defaultPickerValue[1] : undefined;
-
   switch (true) {
     case isValidDate(nowDate):
       break;
-
     case isTimestamp(nowDate):
       nowDate = new Date(nowDate);
       break;
-
     case typeof nowDate === 'string':
       nowDate = compatibleParse(nowDate, format, undefined, dateFnsLocale);
       break;
-
     default:
       nowDate = new Date();
       break;
   }
-
   switch (true) {
     case isValidDate(nextDate):
       break;
-
     case isTimestamp(nextDate):
       nextDate = new Date(nextDate);
       break;
-
     case typeof nextDate === 'string':
       nextDate = compatibleParse(nextDate, format, undefined, dateFnsLocale);
       break;
-
     default:
       nextDate = addMonths(nowDate, 1);
       break;
   }
-
   return {
     nowDate: nowDate,
     nextDate: nextDate

package/lib/es/datePicker/_utils/getFullDateOffset.js

@@ -6,15 +6,12 @@ import { format } from 'date-fns';
  * @param {*} fn
  * @param {*} date
  */
-
 const getFullDateOffset = (fn, date) => {
   if (!date) {
     return '';
   }
-
   const getDate = new Date(date);
   const offsetDate = _isFunction(fn) ? fn(getDate) : getDate;
   return format(new Date(offsetDate), strings.FORMAT_FULL_DATE);
 };
-
 export default getFullDateOffset;

package/lib/es/datePicker/_utils/getInsetInputFormatToken.js

@@ -14,7 +14,6 @@ import { getDefaultFormatTokenByType } from './getDefaultFormatToken';
  * 'yyyy-MM-dd HH:mm' => 'yyyy-MM-dd HH:mm'
  * 'Pp' => 'yyyy-MM-dd'
  */
-
 export default function getInsetInputFormatToken(options) {
   const {
     format,
@@ -24,22 +23,20 @@ export default function getInsetInputFormatToken(options) {
   const dateTimeReg = /([yMd]{0,4}[^a-z\s]*[yMd]{0,4}[^a-z\s]*[yMd]{0,4}) (H{0,2}[^a-z\s]*m{0,2}[^a-z\s]*s{0,2})/i;
   const defaultToken = getDefaultFormatTokenByType(type);
   let insetInputFormat;
-
   switch (type) {
     case 'dateTime':
     case 'dateTimeRange':
       const dateTimeResult = dateTimeReg.exec(format);
-      insetInputFormat = dateTimeResult && dateTimeResult[1] && dateTimeResult[2] ? "".concat(dateTimeResult[1], " ").concat(dateTimeResult[2]) : defaultToken;
+      insetInputFormat = dateTimeResult && dateTimeResult[1] && dateTimeResult[2] ? `${dateTimeResult[1]} ${dateTimeResult[2]}` : defaultToken;
       break;
-
     case 'date':
     case 'month':
+    case 'monthRange':
     case 'dateRange':
     default:
       const dateResult = dateReg.exec(format);
       insetInputFormat = dateResult && dateResult[1] || defaultToken;
       break;
   }
-
   return insetInputFormat;
 }

package/lib/es/datePicker/_utils/getInsetInputValueFromInsetInputStr.js

@@ -32,25 +32,22 @@ export default function getInsetInputValueFromInsetInputStr(options) {
       timeInput: ''
     }
   };
-
   switch (type) {
     case 'date':
     case 'month':
+    case 'monthRange':
       insetInputValue.monthLeft.dateInput = inputValue;
       break;
-
     case 'dateRange':
       [leftDateInput = '', rightDateInput = ''] = inputValue.split(rangeSeparator);
       insetInputValue.monthLeft.dateInput = leftDateInput;
       insetInputValue.monthRight.dateInput = rightDateInput;
       break;
-
     case 'dateTime':
       [leftDateInput = '', leftTimeInput = ''] = inputValue.split(timeSeparator);
       insetInputValue.monthLeft.dateInput = leftDateInput;
       insetInputValue.monthLeft.timeInput = leftTimeInput;
       break;
-
     case 'dateTimeRange':
       const [leftInput = '', rightInput = ''] = inputValue.split(rangeSeparator);
       [leftDateInput = '', leftTimeInput = ''] = leftInput.split(timeSeparator);
@@ -61,6 +58,5 @@ export default function getInsetInputValueFromInsetInputStr(options) {
       insetInputValue.monthRight.timeInput = rightTimeInput;
       break;
   }
-
   return insetInputValue;
 }

package/lib/es/datePicker/_utils/getMonthTable.d.ts

@@ -2,7 +2,7 @@ declare function formatFullDate(year?: number | string, month?: number | string,
 /**
  * [getWeeks description]
  */
-export declare type WeekStartNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type WeekStartNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 declare const getMonthTable: (month: Date, weekStartsOn: WeekStartNumber) => {
     monthText: string;
     weeks: any[];

package/lib/es/datePicker/_utils/getMonthTable.js

@@ -2,21 +2,20 @@
  *
  * @param {string} month
  */
-import { startOfMonth, lastDayOfMonth, getDaysInMonth, // getDay,
+import { startOfMonth, lastDayOfMonth, getDaysInMonth,
+// getDay,
 // parseISO,
 format } from 'date-fns';
-
 function formatFullDate() {
   let year = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   let month = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let day = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   let dateStr = '';
-  const monthFull = typeof month === 'number' && month < 10 ? "0".concat(month) : month.toString();
-  const dayNumberFull = typeof day === 'number' && day < 10 ? "0".concat(day) : day.toString();
-  dateStr = "".concat(String(year), "-").concat(monthFull, "-").concat(dayNumberFull);
+  const monthFull = typeof month === 'number' && month < 10 ? `0${month}` : month.toString();
+  const dayNumberFull = typeof day === 'number' && day < 10 ? `0${day}` : day.toString();
+  dateStr = `${String(year)}-${monthFull}-${dayNumberFull}`;
   return dateStr;
 }
-
 function getWeeks(date) {
   let weekStartsOn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   const weekDayNotInMonth = {
@@ -24,37 +23,31 @@ function getWeeks(date) {
     dateNumberFull: '',
     fullDate: ''
   }; // For the first or last week epmtyDays
-
   const daysInMonth = getDaysInMonth(date); // Get the total number of days in the month
-
   const year = format(date, 'yyyy');
   const month = format(date, 'MM');
   const lastday = lastDayOfMonth(date); // Get the last day of the month
-
   const firstDay = startOfMonth(date); // Get the first day of the month
   // Const firstDayInWeek = getDay (firstDay);//The first day belongs to the day of the week
   // What is the first day of the month in the first row?
-
   const firstDayInWeek = Number(format(firstDay, 'e', {
     weekStartsOn
   }));
   const weeks = [];
-  let week = []; // add empty days to set first day in correct position
-
+  let week = [];
+  // add empty days to set first day in correct position
   for (let s = 1; s < firstDayInWeek; s++) {
     week.push(weekDayNotInMonth);
   }
-
   for (let d = 0; d < daysInMonth; d++) {
     const dayNumber = d + 1;
-    const dayNumberFull = dayNumber < 10 ? "0".concat(dayNumber) : dayNumber.toString();
+    const dayNumberFull = dayNumber < 10 ? `0${dayNumber}` : dayNumber.toString();
     const fullDate = formatFullDate(year, month, dayNumber);
     week.push({
       dayNumber,
       dayNumberFull,
       fullDate
     });
-
     if (week.length === 7) {
       weeks.push(week);
       week = [];
@@ -64,10 +57,8 @@ function getWeeks(date) {
       week = [];
     }
   }
-
   return weeks;
 }
-
 const getMonthTable = (month, weekStartsOn) => {
   const weeks = getWeeks(month, weekStartsOn);
   const monthText = format(month, 'yyyy-MM');
@@ -77,6 +68,5 @@ const getMonthTable = (month, weekStartsOn) => {
     month
   };
 };
-
 export default getMonthTable;
 export { formatFullDate };

package/lib/es/datePicker/_utils/getMonthsInYear.js

@@ -1,5 +1,4 @@
 const getMonthsInYear = year => Array.from({
   length: 12
-}, (v, i) => "".concat(year, "-").concat(i + 1));
-
+}, (v, i) => `${year}-${i + 1}`);
 export default getMonthsInYear;

package/lib/es/datePicker/_utils/getYears.d.ts

@@ -1,2 +1,2 @@
-declare const getYears: () => number[];
+declare const getYears: (startYear?: number, endYear?: number) => number[];
 export default getYears;

package/lib/es/datePicker/_utils/getYears.js

@@ -1,9 +1,12 @@
-const getYears = () => {
-  const year = new Date().getFullYear();
-  const startYear = year - 100;
+const getYears = (startYear, endYear) => {
+  const currentYear = new Date().getFullYear();
+  let start = typeof startYear === 'number' ? startYear : currentYear - 100;
+  let end = typeof endYear === 'number' ? endYear : currentYear + 100;
+  if (end < start) {
+    [start, end] = [end, start];
+  }
   return Array.from({
-    length: 200
-  }, (v, i) => startYear + i);
+    length: end - start + 1
+  }, (v, i) => start + i);
 };
-
 export default getYears;

package/lib/es/datePicker/_utils/isBetween.js

@@ -7,7 +7,6 @@ import isString from '../../utils/isString';
  * @param {Object} { start: string|Date, end: string|Date}
  * @returns {Boolean}
  */
-
 export default function isBetween(day, _ref) {
   let {
     start,

package/lib/es/datePicker/_utils/isValidTimeZone.d.ts

@@ -0,0 +1 @@
+export default function isValidTimeZone(timeZone?: string | number): boolean;

package/lib/es/datePicker/_utils/isValidTimeZone.js

@@ -0,0 +1,3 @@
+export default function isValidTimeZone(timeZone) {
+  return ['string', 'number'].includes(typeof timeZone) && timeZone !== '';
+}

package/lib/es/datePicker/_utils/parser.js

@@ -6,10 +6,8 @@ import { isValid, parseISO, parse } from 'date-fns';
 /**
  * Parsing value to Date object
  */
-
 export function compatibleParse(value, formatToken, baseDate, locale) {
   let result = null;
-
   if (value) {
     if (formatToken) {
       baseDate = baseDate || new Date();
@@ -17,22 +15,17 @@ export function compatibleParse(value, formatToken, baseDate, locale) {
         locale
       });
     }
-
     if (!isValid(result)) {
       result = parseISO(value);
     }
-
     if (!isValid(result)) {
       result = new Date(Date.parse(value));
     }
-
     const yearInvalid = isValid(result) && String(result.getFullYear()).length > 4;
-
     if (!isValid(result) || yearInvalid) {
       result = null;
     }
   }
-
   return result;
 }
 /**
@@ -43,7 +36,6 @@ export function compatibleParse(value, formatToken, baseDate, locale) {
  * isValueParseValid({ value: '2021-01-0', formatToken: 'yyyy-MM-dd' }); // false
  * isValueParseValid({ value: '2021-01', formatToken: 'yyyy-MM-dd' }); // false
  */
-
 export function isValueParseValid(options) {
   const {
     value,

package/lib/es/datePicker/constants.d.ts

@@ -35,7 +35,7 @@ declare const strings: {
     readonly DEFAULT_SEPARATOR_MULTIPLE: ",";
     readonly DEFAULT_SEPARATOR_RANGE: " ~ ";
     readonly SIZE_SET: readonly ["small", "default", "large"];
-    readonly TYPE_SET: readonly ["date", "dateRange", "year", "month", "dateTime", "dateTimeRange"];
+    readonly TYPE_SET: readonly ["date", "dateRange", "year", "month", "monthRange", "dateTime", "dateTimeRange"];
     readonly PRESET_POSITION_SET: readonly ["left", "right", "top", "bottom"];
     readonly DENSITY_SET: readonly ["default", "compact"];
     readonly PANEL_TYPE_LEFT: "left";

package/lib/es/datePicker/constants.js

@@ -1,35 +1,35 @@
 import { VALIDATE_STATUS, BASE_CLASS_PREFIX } from '../base/constants';
 import { numbers as popoverNumber, strings as POPOVER_STRINGS } from '../popover/constants';
 const dayItemClasses = {
-  DAY_TODAY: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-today"),
-  DAY_IN_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-inrange"),
-  DAY_HOVER: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-inhover"),
-  DAY_SELECTED: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected"),
-  DAY_SELECTED_START: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected-start"),
-  DAY_SELECTED_END: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected-end"),
-  DAY_DISABLED: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-disabled"),
-  DAY_HOVER_DAY: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday"),
-  DAY_HOVER_DAY_OFFSET: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-offset"),
-  DAY_IN_OFFSET_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-inoffsetrange"),
-  DAY_SELECTED_RANGE_HOVER: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selectedrange-hover"),
-  DAY_OFFSET_RANGE_START: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-offsetrange-start"),
-  DAY_OFFSET_RANGE_END: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-offsetrange-end"),
-  DAY_SELECTED_START_AFTER_HOVER: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected-start-afterhover"),
-  DAY_SELECTED_END_BEFORE_HOVER: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected-end-beforehover"),
-  DAY_HOVER_DAY_BEFORE_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-beforerange"),
-  DAY_HOVER_DAY_AFTER_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-afterrange"),
-  DAY_HOVER_DAY_IN_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-inrange"),
-  DAY_HOVER_DAY_AROUND_SINGLE_SELECTED: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-around-singleselected")
+  DAY_TODAY: `${BASE_CLASS_PREFIX}-datepicker-day-today`,
+  DAY_IN_RANGE: `${BASE_CLASS_PREFIX}-datepicker-day-inrange`,
+  DAY_HOVER: `${BASE_CLASS_PREFIX}-datepicker-day-inhover`,
+  DAY_SELECTED: `${BASE_CLASS_PREFIX}-datepicker-day-selected`,
+  DAY_SELECTED_START: `${BASE_CLASS_PREFIX}-datepicker-day-selected-start`,
+  DAY_SELECTED_END: `${BASE_CLASS_PREFIX}-datepicker-day-selected-end`,
+  DAY_DISABLED: `${BASE_CLASS_PREFIX}-datepicker-day-disabled`,
+  DAY_HOVER_DAY: `${BASE_CLASS_PREFIX}-datepicker-day-hoverday`,
+  DAY_HOVER_DAY_OFFSET: `${BASE_CLASS_PREFIX}-datepicker-day-hoverday-offset`,
+  DAY_IN_OFFSET_RANGE: `${BASE_CLASS_PREFIX}-datepicker-day-inoffsetrange`,
+  DAY_SELECTED_RANGE_HOVER: `${BASE_CLASS_PREFIX}-datepicker-day-selectedrange-hover`,
+  DAY_OFFSET_RANGE_START: `${BASE_CLASS_PREFIX}-datepicker-day-offsetrange-start`,
+  DAY_OFFSET_RANGE_END: `${BASE_CLASS_PREFIX}-datepicker-day-offsetrange-end`,
+  DAY_SELECTED_START_AFTER_HOVER: `${BASE_CLASS_PREFIX}-datepicker-day-selected-start-afterhover`,
+  DAY_SELECTED_END_BEFORE_HOVER: `${BASE_CLASS_PREFIX}-datepicker-day-selected-end-beforehover`,
+  DAY_HOVER_DAY_BEFORE_RANGE: `${BASE_CLASS_PREFIX}-datepicker-day-hoverday-beforerange`,
+  DAY_HOVER_DAY_AFTER_RANGE: `${BASE_CLASS_PREFIX}-datepicker-day-hoverday-afterrange`,
+  DAY_HOVER_DAY_IN_RANGE: `${BASE_CLASS_PREFIX}-datepicker-day-hoverday-inrange`,
+  DAY_HOVER_DAY_AROUND_SINGLE_SELECTED: `${BASE_CLASS_PREFIX}-datepicker-day-hoverday-around-singleselected`
 };
 const cssClasses = Object.assign({
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-datepicker"),
-  NAVIGATION: "".concat(BASE_CLASS_PREFIX, "-datepicker-navigation"),
-  PANEL_YAM: "".concat(BASE_CLASS_PREFIX, "-datepicker-panel-yam"),
-  MONTH: "".concat(BASE_CLASS_PREFIX, "-datepicker-month"),
-  WEEKDAY: "".concat(BASE_CLASS_PREFIX, "-datepicker-weekday"),
-  WEEKS: "".concat(BASE_CLASS_PREFIX, "-datepicker-weeks"),
-  WEEK: "".concat(BASE_CLASS_PREFIX, "-datepicker-week"),
-  DAY: "".concat(BASE_CLASS_PREFIX, "-datepicker-day")
+  PREFIX: `${BASE_CLASS_PREFIX}-datepicker`,
+  NAVIGATION: `${BASE_CLASS_PREFIX}-datepicker-navigation`,
+  PANEL_YAM: `${BASE_CLASS_PREFIX}-datepicker-panel-yam`,
+  MONTH: `${BASE_CLASS_PREFIX}-datepicker-month`,
+  WEEKDAY: `${BASE_CLASS_PREFIX}-datepicker-weekday`,
+  WEEKS: `${BASE_CLASS_PREFIX}-datepicker-weeks`,
+  WEEK: `${BASE_CLASS_PREFIX}-datepicker-week`,
+  DAY: `${BASE_CLASS_PREFIX}-datepicker-day`
 }, dayItemClasses);
 const formatToken = {
   FORMAT_FULL_DATE: 'yyyy-MM-dd',
@@ -41,7 +41,7 @@ const strings = Object.assign({
   DEFAULT_SEPARATOR_MULTIPLE: ',',
   DEFAULT_SEPARATOR_RANGE: ' ~ ',
   SIZE_SET: ['small', 'default', 'large'],
-  TYPE_SET: ['date', 'dateRange', 'year', 'month', 'dateTime', 'dateTimeRange'],
+  TYPE_SET: ['date', 'dateRange', 'year', 'month', 'monthRange', 'dateTime', 'dateTimeRange'],
   PRESET_POSITION_SET: ['left', 'right', 'top', 'bottom'],
   DENSITY_SET: ['default', 'compact'],
   PANEL_TYPE_LEFT: 'left',

package/lib/es/datePicker/datePicker.css

@@ -4,7 +4,6 @@
 .semi-datepicker {
   box-sizing: border-box;
   display: inline-block;
-  vertical-align: top;
 }
 .semi-datepicker .semi-scrolllist-body .semi-scrolllist-item {
   -ms-overflow-style: none; /* Internet Explorer 10+ */
@@ -118,6 +117,15 @@
 .semi-datepicker-panel-yam {
   max-width: 484px;
 }
+.semi-datepicker-panel-yam[x-type=monthRange] {
+  max-width: 584px;
+}
+.semi-datepicker-panel-yam .semi-datepicker-yearmonth-body {
+  display: flex;
+}
+.semi-datepicker-panel-yam .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) {
+  border-left: 1px solid var(--semi-color-border);
+}
 .semi-datepicker-panel-yam .semi-scrolllist {
   box-shadow: none;
   height: 266px;
@@ -132,10 +140,7 @@
   padding: 0;
   overflow: hidden;
 }
-.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item-wheel {
-  border: none;
-}
-.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item {
+.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item-wheel:not(#neverExistElement) {
   border: none;
 }
 .semi-datepicker-footer {
@@ -456,16 +461,16 @@
 .semi-datepicker-quick-control-top-month-content, .semi-datepicker-quick-control-bottom-month-content {
   box-sizing: border-box;
   display: grid;
-  grid-template-columns: repeat(2, minmax(65.5px, 73px));
+  grid-template-columns: repeat(2, minmax(51px, 58.5px));
   grid-gap: 8px;
   align-content: flex-start;
   padding: 8px 20px;
 }
 .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-quick-control-bottom-month-content-item {
-  max-width: 73px;
+  max-width: 58.5px;
 }
 .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-quick-control-bottom-month-content-item-ellipsis {
-  max-width: 57px;
+  max-width: 42.5px;
   color: var(--semi-color-primary);
 }
 .semi-datepicker-quick-control-month {
@@ -555,7 +560,10 @@
   width: 568px;
 }
 .semi-datepicker-inset-input-wrapper[x-type=month] {
-  width: 204px;
+  width: 165px;
+}
+.semi-datepicker-inset-input-wrapper[x-type=monthRange] {
+  width: 331px;
 }
 .semi-datepicker-inset-input-wrapper .semi-input-wrapper {
   flex: 1;
@@ -577,6 +585,19 @@
   height: 32px;
   color: var(--semi-color-text-2);
   background-color: var(--semi-color-fill-0);
+  border: 0px solid transparent;
+}
+.semi-datepicker-range-input:hover {
+  border-color: transparent;
+}
+.semi-datepicker-range-input:active {
+  border-color: transparent;
+}
+.semi-datepicker-range-input:focus-within {
+  border-color: transparent;
+}
+.semi-datepicker-range-input .semi-datepicker-monthRange-input {
+  background-color: transparent;
 }
 .semi-datepicker-range-input-wrapper {
   box-sizing: border-box;
@@ -646,12 +667,14 @@
 }
 .semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn {
   display: flex;
-  color: var(--semi-color-primary-hover);
   cursor: pointer;
 }
 .semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn ~ .semi-datepicker-range-input-suffix {
   display: none;
 }
+.semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn:hover {
+  color: var(--semi-color-primary-hover);
+}
 .semi-datepicker-range-input-disabled {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
@@ -698,6 +721,7 @@
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   white-space: nowrap;
   color: var(--semi-color-text-2);
 }
@@ -747,6 +771,12 @@
   height: 48px;
   padding: 12px;
 }
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body {
+  display: flex;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) {
+  border: 1px solid var(--semi-color-border);
+}
 .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist {
   font-size: 12px;
   line-height: 16px;
@@ -948,16 +978,16 @@
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content {
   display: grid;
-  grid-template-columns: repeat(2, minmax(75.5px, 83px));
+  grid-template-columns: repeat(2, minmax(61px, 68.5px));
   grid-gap: 8px;
   align-content: flex-start;
   padding: 8px 10px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item {
-  max-width: 83px;
+  max-width: 68.5px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item-ellipsis {
-  max-width: 67px;
+  max-width: 52.5px;
   font-size: 12px;
   color: var(--semi-color-primary);
 }
@@ -1060,6 +1090,51 @@
   min-height: 168px;
 }
 
+.semi-datepicker-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-input-suffix, .semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-datepicker-range-input-suffix {
+  opacity: 0;
+}
+.semi-datepicker-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper-active {
+  border-color: transparent;
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:hover {
+  background-color: var(--semi-color-danger-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within {
+  background-color: var(--semi-color-danger-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:not(:focus-within) {
+  border-width: 1px;
+  border-color: var(--semi-color-danger);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within {
+  border-width: 1px;
+  border-color: var(--semi-color-danger);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper-active {
+  border-color: transparent;
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:hover {
+  background-color: var(--semi-color-warning-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within {
+  background-color: var(--semi-color-warning-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:not(:focus-within) {
+  border-width: 1px;
+  border-color: var(--semi-color-warning);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within {
+  border-width: 1px;
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl,
 .semi-portal-rtl {
   /*