Antd RangePicker输入框与日历宽度匹配及添加内边距问题

核心修改思路 #

要实现输入框与日历宽度一致、选中日期完整显示，需从输入框宽度适配和下拉日历样式调整两方面入手：

完整样式代码（替换原styles.scss内容） #

.App{
  width: 280px; 
  height: 500px;
  padding: 20px; /* 方便查看效果，可按需移除 */
}
.custom-datepicker {
  /* 设置输入框最小宽度，适配带时分秒的完整日期格式 */
  min-width: 520px;
  .ant-picker-active-bar {
    display: none;
  }
}

/* 调整下拉日历样式，与输入框宽度对齐并添加内边距 */
.custom-datepicker-dropdown {
  .ant-picker-panel-container {
    width: 100%;
  }
  .ant-picker-panel {
    width: 100%;
    padding: 12px; /* 给日历侧边添加内边距 */
    box-sizing: border-box; /* 确保内边距不额外增加总宽度 */
  }
  .ant-picker-range {
    margin: 0; /* 移除日历默认左右外边距，避免宽度超出 */
  }
}

效果说明 #

• 输入框通过min-width: 520px确保能容纳两个带时分秒的完整日期（可根据实际格式需求调整宽度数值）
• 下拉日历通过width: 100%继承输入框宽度，配合padding实现侧边留白效果，与参考图一致
• box-sizing: border-box保证内边距不会让日历总宽度超出输入框，实现严格对齐

内容的提问来源于stack exchange，提问作者user16860065