日期范围选择器问题：选中日期无法取消+异步请求格式异常

• 绑定组件选中状态到本地状态变量，点击「X」按钮时直接重置该变量为初始值（如null或空数组），同时调用组件内置的重置方法（若组件支持），确保视图与数据同步，避免界面残留选中状态。
• 若组件无内置重置能力，手动清空DOM选中值的同时更新状态变量，保证两者一致。
• 增加外部点击取消功能：监听document点击事件，判断点击位置不在组件范围内时，自动重置选中状态，提升用户操作体验。

• 排查组件初始化配置，将默认值设为null或空值，而非"mm/dd/yy,mm/dd/yy"这类占位符字符串，从源头避免无效值产生。
• 替换硬编码的字符串匹配，改用通用校验逻辑处理日期参数：

  const validateDateRange = (dateStr) => {
    if (!dateStr) return "";
    // 匹配数字格式的日期范围，排除占位符
    const validPattern = /^\d{2}\/\d{2}\/\d{2},\d{2}\/\d{2}\/\d{2}$/;
    if (!validPattern.test(dateStr)) return "";
    // 验证每个日期的有效性
    const [startStr, endStr] = dateStr.split(",");
    const startDate = new Date(startStr);
    const endDate = new Date(endStr);
    if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
      return "";
    }
    // 若后端需要特定格式，可在此转换后返回，否则返回原字符串
    return dateStr;
  };
  
  // 异步请求前处理日期参数
  const processedDate = validateDateRange(date);
  

• 若为自定义组件，直接修改内部逻辑：未选中日期时返回null，选中后返回符合后端要求的格式，彻底杜绝无效占位符输出。

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