Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DatePicker受控情况下,2月切换存在问题 #2924

Open
Augenstern-Jcheng opened this issue Jan 7, 2025 · 2 comments
Open

DatePicker受控情况下,2月切换存在问题 #2924

Augenstern-Jcheng opened this issue Jan 7, 2025 · 2 comments
Assignees

Comments

@Augenstern-Jcheng
Copy link

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.6.15

平台

weapp

重现链接

https://codesandbox.io/p/devbox/demo-jy9tpg?file=%2Fsrc%2FApp.tsx%3A5%2C4

重现步骤

import { Button, DatePicker } from "@nutui/nutui-react-taro";
import { useState } from "react";

import "./App.css";

// 如果是受控组件必须要配合onChange事件,但是又不想实时改变页面上显示的state,那么只能定义两个state来处理
// 问题:在从其他月份的30,31日(2月不存在的日)切换到2月时,会直接跳到startDate(最早的时间);

const App = () => {
  const [isShowDemoTimeModal, setIsShowDemoTimeModal] =
    useState<boolean>(false);
  const [demoTime, setDemoTime] = useState<string>("2025-1-7 14:42");
  const [demoTimeShow, setDemoTimeShow] = useState<string>("2025-1-7 14:42"); // 用于组件change

  const timeConfirm = (values: any[], type?: string) => {
    if (values.length === 0) return;

    const [year, monthe, day, time, minutes] = values;

    const val = `${year.value}-${monthe.value}-${day.value} ${time.value}:${minutes.value}`;

    const date = new Date(val);
    const now = new Date();

    setDemoTimeShow(val);

    if (type === "onConfirm") {
      if (date > now) {
        console.log("报告时间不能超过当前时间,请重新选择!");
      } else {
        setDemoTime(val);
        setIsShowDemoTimeModal(false);
      }
    }
  };

  return (
    <>
      <Button
        onClick={() => {
          setIsShowDemoTimeModal(true);
        }}
        type="primary"
      >
        {demoTime}
      </Button>
      <DatePicker
        title="日期选择"
        type="datetime"
        startDate={new Date("1750-01-01")}
        visible={isShowDemoTimeModal}
        value={new Date(demoTimeShow)}
        // endDate={new Date()} // 存在bug 关注issues 2921
        pickerProps={{ popupProps: { zIndex: 1220 } }}
        showChinese
        onCancel={() => {
          setDemoTimeShow(demoTime);
          setIsShowDemoTimeModal(false);
        }}
        onConfirm={(_: any) => {
          timeConfirm(_, "onConfirm");
        }}
        onChange={(_: any) => {
          timeConfirm(_);
        }}
      />
    </>
  );
};

export default App;


### 期望的结果是什么?

2月能够顺利的进行月份的切换,并且不需要通过两个state来实现2月的day更新

### 实际的结果是什么?

在从其他月份的30,31日(2月不存在的日)切换到2月时,会直接跳到startDate(最早的时间)


### 环境信息

_No response_

### 其他补充信息

这个bug在2.6.2的更新日志里面显示已被修复,目前还存在问题
如果是受控组件必须要配合onChange事件,但是又不想实时改变页面上显示的state,那么只能定义两个state来处理
问题:在从其他月份的30,31日(2月不存在的日)切换到2月时,会直接跳到startDate(最早的时间);

https://github.com/jdf2e/nutui-react/pull/2201
![WeChatc1a48b2e92bad6875d1b5bf0613c4711](https://github.com/user-attachments/assets/1ad7d007-3938-47fd-908f-71023647c45a)

Uploading 💤 2025-01-01 15.04.39.mp4…
@Augenstern-Jcheng
Copy link
Author

2025-01-01.15.04.39.mp4

@Augenstern-Jcheng
Copy link
Author

👽 Taro v3.6.18

Taro CLI 3.6.18 environment info:
System:
OS: macOS 15.1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.18.0 - /var/folders/bj/r13gh2713jv034_0vht08l_00000gn/T/yarn--1736235491863-0.929751992420633/node
Yarn: 1.22.19 - /var/folders/bj/r13gh2713jv034_0vht08l_00000gn/T/yarn--1736235491863-0.929751992420633/yarn
npm: 8.19.2 - /usr/local/bin/npm
npmPackages:
@tarojs/cli: 3.6.18 => 3.6.18
@tarojs/components: 3.6.18 => 3.6.18
@tarojs/mini-runner: 3.6.18 => 3.6.18
@tarojs/plugin-framework-react: 3.6.18 => 3.6.18
@tarojs/plugin-html: 3.6.18 => 3.6.18
@tarojs/react: 3.6.18 => 3.6.18
@tarojs/runtime: 3.6.18 => 3.6.18
@tarojs/taro: 3.6.18 => 3.6.18
@tarojs/webpack-runner: 3.6.18 => 3.6.18
babel-preset-taro: 3.6.18 => 3.6.18
eslint-config-taro: 3.6.18 => 3.6.18
react: 18.2.0 => 18.2.0

@irisSong irisSong self-assigned this Jan 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants