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] date-fns-tz >=1.3.8,When configuring the time zone, the datepicker onChange value is wrong #1522

Closed
1 task done
pointhalo opened this issue Mar 29, 2023 · 1 comment · Fixed by #1523
Closed
1 task done

Comments

@pointhalo
Copy link
Collaborator

pointhalo commented Mar 29, 2023

Is there an existing issue for this?

  • I have searched the existing issues

Which Component

DatePicker

Semi Version

2.31.2

Current Behavior

  1. select hours, scroll to 0
  2. will automatically jump to another value
    20230329172145_rec_

Expected Behavior

No response

Steps To Reproduce

No response

ReproducibleCode

import React, { useMemo, useState } from 'react';
import { ConfigProvider, Select, DatePicker, TimePicker } from '@douyinfe/semi-ui';
function App(props = {}) {
    const [timeZone, setTimeZone] = useState('GMT+09:00');
    const gmtList = useMemo(() => {
        const list = [];
        for (let hourOffset = -11; hourOffset <= 14; hourOffset++) {
            const prefix = hourOffset >= 0 ? '+' : '-';
            const hOffset = Math.abs(parseInt(hourOffset, 10));
            list.push(`GMT${prefix}${String(hOffset).padStart(2, '0')}:00`);
        }
        return list;
    }, []);
    const [dValue, setDValue] = useState(new Date().valueOf());
    return (
        // <ConfigProvider timeZone={timeZone}>
        <div style={{ width: 300 }}>
            <h5 style={{ margin: 10 }}>Select Time Zone:</h5>
            <Select
                placeholder={'请选择时区'}
                style={{ width: 300 }}
                value={timeZone}
                showClear={true}
                onSelect={value => setTimeZone(value)}
            >
                {gmtList.map(gmt => (
                    <Select.Option key={gmt} value={gmt}>
                        {gmt}
                    </Select.Option>
                ))}
            </Select>
            <br />
            <br />
            <DatePicker
                type={'dateTime'}
                value={dValue}
                timeZone={timeZone}
                onChange={(date, dateString) => {
                    console.log('DatePicker changed: ', date.valueOf(), date)
                    let newD = Number.parseInt(String(Number(date)), 10);
                    console.log(newD);
                    setDValue(newD)
                }}
            />
        </div>
        // </ConfigProvider>
    );
}
export default App;


### Environment

```markdown
- OS:
- browser:

Anything else?

  • ✅ date-fns-tz < 1.3.8
  • ❌ date-fns-tz >= 1.3.8

Relative Modify:marnusw/date-fns-tz@3bd32ee#diff-4c06f3ee39f66c80220e59b7d2c1f7d21d5406d5870dd737bd692538467deb69

image

pointhalo pushed a commit that referenced this issue Mar 29, 2023
Co-authored-by: shijia.me <shijia.me@bytedance.com>
@shijiatongxue
Copy link
Collaborator

shijiatongxue commented Mar 31, 2023

此问题与 date-fns-tz 最近的一次变更有关。有相同问题的同学先在项目里锁死 date-fns-tz 的版本为 1.3.7。

  • pnpm 项目的 package.json
{
  "pnpm": {
    "overrides": {
      "date-fns-tz": "1.3.7"
    }
  }
}
  • yarn 项目的 package.json
 {
   "resolutions": {
    "date-fns-tz": "1.3.7"
  }
 } 

Semi 也对相关逻辑进行了兜底,@douyinfe/semi-ui@latest、@douyinfe/semi-ui@2.31.4 fixed 了此问题,安装 latest 版本的用户不需要再锁定 date-fns-tz 的版本。

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

Successfully merging a pull request may close this issue.

2 participants