Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
f01cfd6d
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f01cfd6d
编写于
3月 18, 2021
作者:
S
suzigang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: datepicker
上级
8cd739ec
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
98 addition
and
80 deletion
+98
-80
src/packages/datepicker/demo.vue
src/packages/datepicker/demo.vue
+14
-14
src/packages/datepicker/doc.md
src/packages/datepicker/doc.md
+20
-18
src/packages/datepicker/index.vue
src/packages/datepicker/index.vue
+63
-48
src/packages/picker/doc.md
src/packages/picker/doc.md
+1
-0
未找到文件。
src/packages/datepicker/demo.vue
浏览文件 @
f01cfd6d
...
...
@@ -27,8 +27,8 @@
<nut-datepicker
v-model=
"currentDate"
title=
"日期选择"
:min
D
ate=
"minDate"
:max
D
ate=
"maxDate"
:min
-d
ate=
"minDate"
:max
-d
ate=
"maxDate"
@
confirm=
"
val =>
{
confirm(1, val);
...
...
@@ -41,8 +41,8 @@
v-model=
"currentDate"
title=
"日期时间选择"
type=
"datetime"
:min
D
ate=
"minDate"
:max
D
ate=
"maxDate"
:min
-d
ate=
"minDate"
:max
-d
ate=
"maxDate"
@
confirm=
"
val =>
{
confirm(2, val);
...
...
@@ -54,8 +54,8 @@
v-model=
"currentDate"
title=
"时间选择"
type=
"time"
:min
D
ate=
"minDate"
:max
D
ate=
"maxDate"
:min
-d
ate=
"minDate"
:max
-d
ate=
"maxDate"
:is-use12-hours=
"true"
@
confirm=
"
val =>
{
...
...
@@ -68,8 +68,8 @@
v-model=
"currentDate"
title=
"时间选择"
type=
"time"
:min
D
ate=
"minDate"
:max
D
ate=
"maxDate"
:min
-d
ate=
"minDate"
:max
-d
ate=
"maxDate"
@
confirm=
"
val =>
{
confirm(4, val);
...
...
@@ -81,9 +81,9 @@
v-model=
"currentDate"
title=
"时间选择"
type=
"time"
:min
D
ate=
"minDate"
:min
-d
ate=
"minDate"
:minute-step=
"5"
:max
D
ate=
"maxDate"
:max
-d
ate=
"maxDate"
@
confirm=
"
val =>
{
confirm(5, val);
...
...
@@ -108,9 +108,9 @@ export default createDemo({
const
show5
=
ref
(
false
);
const
show6
=
ref
(
false
);
const
showList
=
[
show
,
show2
,
show3
,
show4
,
show5
,
show6
];
const
currentDate
=
ref
(
new
Date
(
2020
,
0
,
1
)
);
const
currentDate
=
new
Date
(
2020
,
0
,
1
);
const
today
=
currentDate
.
value
;
const
today
=
currentDate
;
const
desc1
=
ref
(
'
2020-1-1
'
);
const
desc2
=
ref
(
'
2020-1-1
'
);
const
desc3
=
ref
(
'
2020年-1月-1日-0时-0分
'
);
...
...
@@ -134,10 +134,10 @@ export default createDemo({
currentDate
,
minDate
:
new
Date
(
2020
,
0
,
1
),
maxDate
:
new
Date
(
2025
,
10
,
1
),
open
:
index
=>
{
open
:
(
index
:
number
)
=>
{
showList
[
index
].
value
=
true
;
},
confirm
:
(
index
,
val
)
=>
{
confirm
:
(
index
:
number
,
val
:
string
[]
)
=>
{
console
.
log
(
val
);
descList
[
index
].
value
=
val
.
join
(
'
-
'
);
}
...
...
src/packages/datepicker/doc.md
浏览文件 @
f01cfd6d
#
d
atepicker组件
#
D
atepicker组件
### 介绍
...
...
@@ -8,10 +8,10 @@
```
javascript
import
{
createApp
}
from
'
vue
'
;
import
{
Picker
}
from
'
@nutui/nutui
'
;
import
{
Date
Picker
}
from
'
@nutui/nutui
'
;
const
app
=
createApp
();
app
.
use
(
Picker
);
app
.
use
(
Date
Picker
);
```
## 代码演示
...
...
@@ -50,8 +50,8 @@ export default createDemo({
```
html
<nut-datepicker
v-model=
"currentDate"
:min
D
ate=
"minDate"
:max
D
ate=
"maxDate"
:min
-d
ate=
"minDate"
:max
-d
ate=
"maxDate"
@
confirm=
"confirm"
v-model:is-visible=
"show"
:is-show-chinese=
"false"
...
...
@@ -84,8 +84,8 @@ export default createDemo({
```
html
<nut-datepicker
v-model=
"currentDate"
:min
D
ate=
"minDate"
:max
D
ate=
"maxDate"
:min
-d
ate=
"minDate"
:max
-d
ate=
"maxDate"
type=
"datetime"
@
confirm=
"confirm"
v-model:is-visible=
"show"
...
...
@@ -119,8 +119,8 @@ export default createDemo({
<nut-datepicker
v-model=
"currentDate"
type=
"time"
:min
D
ate=
"minDate"
:max
D
ate=
"maxDate"
:min
-d
ate=
"minDate"
:max
-d
ate=
"maxDate"
:is-use12-hours=
"true"
@
confirm=
"confirm"
v-model:is-visible=
"show"
...
...
@@ -132,8 +132,8 @@ export default createDemo({
v-model=
"currentDate"
type=
"time"
:minute-step=
"5"
:min
D
ate=
"minDate"
:max
D
ate=
"maxDate"
:min
-d
ate=
"minDate"
:max
-d
ate=
"maxDate"
:is-use12-hours=
"true"
@
confirm=
"confirm"
v-model:is-visible=
"show"
...
...
@@ -146,13 +146,15 @@ export default createDemo({
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
| type | 类型,日期'date', 日期时间'datetime',时间'time' | String |'date' |isVisible | 是否可见 | Boolean | boolean | false |
| isUse12Hours | 是否十二小时制度,只限类型为'time'时使用 | boolean | false |
| minuteStep | 分钟步进值 | number | 1 |
| isShowChinese | 每列是否展示中文 | boolean | false |
| title | 设置标题 | string | null |
| startDate | 开始日期 | Date | 十年前 |
| endDate | 结束日期 | Date | 十年后 |
| v-model | 初始值 | Date |
`null`
|
| type | 类型,日期'date', 日期时间'datetime',时间'time' | String |
`'date'`
|
| is-visible | 是否可见 | Boolean |
`false`
|
| is-use12-hours | 是否十二小时制度,只限类型为'time'时使用 | Boolean |
`false`
|
| minute-step | 分钟步进值 | Number |
`1`
|
| is-show-chinese | 每列是否展示中文 | Boolean |
`false`
|
| title | 设置标题 | String |
`null`
|
| min-date | 开始日期 | Date |
`十年前`
|
| max-date | 结束日期 | Date |
`十年后`
|
...
...
src/packages/datepicker/index.vue
浏览文件 @
f01cfd6d
...
...
@@ -11,7 +11,7 @@
</view-block>
</
template
>
<
script
lang=
"ts"
>
import
{
toRefs
,
watch
,
ref
,
compu
ted
}
from
'
vue
'
;
import
{
toRefs
,
watch
,
computed
,
reactive
,
onMoun
ted
}
from
'
vue
'
;
import
picker
from
'
@/packages/picker/index.vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
componentName
,
create
}
=
createComponent
(
'
datepicker
'
);
...
...
@@ -70,39 +70,28 @@ export default create({
validator
:
isDate
}
},
components
:
{},
emits
:
[
'
click
'
,
'
close
'
,
'
update:isVisible
'
,
'
confirm
'
],
emits
:
[
'
click
'
,
'
update:isVisible
'
,
'
confirm
'
],
setup
(
props
,
{
emit
})
{
const
show
=
ref
(
false
);
const
title
=
ref
(
props
.
title
);
const
formatValue
=
value
=>
{
const
state
=
reactive
({
show
:
false
,
currentDate
:
new
Date
(),
title
:
props
.
title
});
const
formatValue
=
(
value
:
Date
)
=>
{
if
(
!
isDate
(
value
))
{
value
=
props
.
minDate
;
}
let
timestmp
=
Math
.
max
(
value
.
getTime
(),
props
.
minDate
.
getTime
());
timestmp
=
Math
.
min
(
timestmp
,
props
.
maxDate
.
getTime
());
value
=
Math
.
max
(
value
,
(
props
.
minDate
as
any
).
getTime
());
value
=
Math
.
min
(
value
,
(
props
.
maxDate
as
any
).
getTime
());
return
new
Date
(
value
);
return
new
Date
(
timestmp
);
};
const
currentDate
=
ref
(
formatValue
(
props
.
modelValue
));
watch
(
()
=>
props
.
title
,
val
=>
{
title
.
value
=
val
;
}
);
watch
(
()
=>
props
.
isVisible
,
val
=>
{
show
.
value
=
val
;
}
);
function
getMonthEndDay
(
year
:
number
,
month
:
number
):
number
{
return
32
-
new
Date
(
year
,
month
-
1
,
32
).
getDate
();
}
const
getBoundary
=
(
type
,
valu
e
)
=>
{
const
getBoundary
=
(
type
:
string
,
value
:
Dat
e
)
=>
{
const
boundary
=
props
[
`
${
type
}
Date`
];
const
year
=
boundary
.
getFullYear
();
let
month
=
1
;
...
...
@@ -148,7 +137,7 @@ export default create({
maxHour
,
maxMinute
,
maxSeconds
}
=
getBoundary
(
'
max
'
,
currentDate
.
valu
e
);
}
=
getBoundary
(
'
max
'
,
state
.
currentDat
e
);
const
{
minYear
,
...
...
@@ -157,7 +146,7 @@ export default create({
minHour
,
minMinute
,
minSeconds
}
=
getBoundary
(
'
min
'
,
currentDate
.
valu
e
);
}
=
getBoundary
(
'
min
'
,
state
.
currentDat
e
);
let
result
=
[
{
...
...
@@ -210,19 +199,22 @@ export default create({
return
result
;
});
const
changeHandler
=
val
=>
{
const
changeHandler
=
(
val
:
string
[])
=>
{
console
.
log
(
val
);
let
formatDate
=
[];
if
(
props
.
isShowChinese
)
{
formatDate
=
val
.
forEach
((
res
:
string
)
=>
{
Number
(
res
.
slice
(
0
,
res
.
length
-
2
));
});
formatDate
=
val
.
map
((
res
:
string
)
=>
{
return
Number
(
res
.
slice
(
0
,
res
.
length
-
1
));
})
as
any
;
console
.
log
(
formatDate
);
}
else
{
formatDate
=
val
;
}
currentDate
.
valu
e
=
formatValue
(
state
.
currentDat
e
=
formatValue
(
new
Date
(
formatDate
[
0
],
formatDate
[
1
]
-
1
,
formatDate
[
2
])
);
};
const
generateValue
=
(
min
:
number
,
max
:
number
,
...
...
@@ -232,7 +224,6 @@ export default create({
if
(
!
(
max
>
min
))
return
;
const
arr
:
Array
<
number
|
string
>
=
[];
let
index
=
0
;
// let stopAdd = false;
while
(
min
<=
max
)
{
if
(
props
.
isShowChinese
)
{
arr
.
push
(
min
+
zhCNType
[
type
]);
...
...
@@ -253,22 +244,24 @@ export default create({
return
{
values
:
arr
,
defaultIndex
:
index
};
};
const
getDateIndex
=
type
=>
{
const
getDateIndex
=
(
type
:
string
)
=>
{
if
(
type
===
'
year
'
)
{
return
currentDate
.
valu
e
.
getFullYear
();
return
state
.
currentDat
e
.
getFullYear
();
}
else
if
(
type
===
'
month
'
)
{
return
currentDate
.
valu
e
.
getMonth
()
+
1
;
return
state
.
currentDat
e
.
getMonth
()
+
1
;
}
else
if
(
type
===
'
day
'
)
{
return
currentDate
.
valu
e
.
getDate
();
return
state
.
currentDat
e
.
getDate
();
}
else
if
(
type
===
'
hour
'
)
{
return
currentDate
.
valu
e
.
getHours
();
return
state
.
currentDat
e
.
getHours
();
}
else
if
(
type
===
'
minute
'
)
{
return
currentDate
.
valu
e
.
getMinutes
();
return
state
.
currentDat
e
.
getMinutes
();
}
else
if
(
type
===
'
seconds
'
)
{
return
currentDate
.
valu
e
.
getSeconds
();
return
state
.
currentDat
e
.
getSeconds
();
}
return
0
;
};
const
columns
=
computed
(()
=>
{
const
val
=
ranges
.
value
.
map
(
res
=>
{
return
generateValue
(
...
...
@@ -283,21 +276,43 @@ export default create({
}
return
val
;
});
const
handleClick
=
(
event
:
Event
)
=>
{
emit
(
'
click
'
,
event
);
};
const
closeHandler
=
()
=>
{
emit
(
'
update:isVisible
'
,
false
);
};
const
confirm
=
(
val
:
Event
)
=>
{
emit
(
'
update:isVisible
'
,
false
);
emit
(
'
confirm
'
,
val
);
};
onMounted
(()
=>
{
state
.
currentDate
=
formatValue
(
props
.
modelValue
);
});
watch
(
()
=>
props
.
title
,
val
=>
{
state
.
title
=
val
;
}
);
watch
(
()
=>
props
.
isVisible
,
val
=>
{
state
.
show
=
val
;
}
);
return
{
show
,
title
,
...
toRefs
(
state
),
changeHandler
,
closeHandler
:
()
=>
{
emit
(
'
update:isVisible
'
,
false
);
},
confirm
:
val
=>
{
emit
(
'
update:isVisible
'
,
false
);
emit
(
'
confirm
'
,
val
);
},
closeHandler
,
confirm
,
columns
};
}
...
...
src/packages/picker/doc.md
浏览文件 @
f01cfd6d
...
...
@@ -173,4 +173,5 @@ export default createDemo({
|--------|----------------|--------------|
| close | 关闭弹窗时触发 | event: Event |
| confirm | 点击确认时候触发 | event: Event |
| change | 改变时触发 | val |
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录