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

feat: datePicker组件开发 #102

Merged
merged 4 commits into from
Mar 8, 2022
Merged

feat: datePicker组件开发 #102

merged 4 commits into from
Mar 8, 2022

Conversation

dushoujun
Copy link
Contributor

No description provided.

setShow(visible)
}, [visible])

useEffect(() => {}, [defaultValue])
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这行代码好像没什么用

isVisible={show}
listData={listData}
onClose={() => {
onCloseDatePicker()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

若无参数,可以直接写为 onClose = { onCloseDatePicker }

const App = () => {
const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2025, 10, 1)
const [show3, setShow4] = useState(false)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

变量命名,show4 吧

### 安装

```javascript
import { DatePicker } from '@nutui/nutui';å
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

行尾有个特殊符号

### 日期选择-每列不显示中文
:::demo
```tsx
import React, { useState, useRef } from "react";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useRef 没有被调用,下面几个例子也是

@@ -0,0 +1,185 @@
# Datepicker 日期选择器
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

应该是大驼峰写法

@@ -0,0 +1,345 @@
import React, { FunctionComponent, useState, useEffect, useRef } from 'react'
import './datepicker.scss'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

空样式文件可以不引入且目前样式文件自动引入

minDate: Date
maxDate: Date
className: ''
style: {}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style 类型应为 React.CSSProperties

minuteStep: number
minDate: Date
maxDate: Date
className: ''
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

className 类型为 string 类型

}

function getMonthEndDay(year: number, month: number): number {
return 32 - new Date(year, month - 1, 32).getDate()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

32 这种魔法值建议起一个有实际含义的变量

},
]

switch (type) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

switch 建议改成 控制 start 和 end 的,最后处理 slice

const day = Math.min(formatDate[2], getMonthEndDay(formatDate[0], formatDate[1]))
let val: (string | number)[] = formatDate
if (isShowChinese) {
val = [
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

可以把索引的解构出来 const [x,x] = formatDate


const getDateIndex = (type: string, date?: Date) => {
const curDate = date || currentDate
if (type === 'year') {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里建议用 switch,看上去会比 if 清晰

@oasis-cloud oasis-cloud merged commit 76d8837 into jdf2e:main Mar 8, 2022
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 this pull request may close these issues.

3 participants