Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in / Register
Toggle navigation
U
uni-pdtravel
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
panyongping
uni-pdtravel
Commits
e2b958b4
Commit
e2b958b4
authored
Feb 01, 2024
by
潘永坪
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
日历禁用修改
parent
79627ed6
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
256 additions
and
253 deletions
+256
-253
calendar.vue
pages/scenic/scenicComponents/calendar.vue
+9
-8
u-calendar.vue
uview-ui/components/u-calendar/u-calendar.vue
+247
-245
No files found.
pages/scenic/scenicComponents/calendar.vue
View file @
e2b958b4
...
...
@@ -3,10 +3,9 @@
:show=
"showPop"
@
confirm=
"onConfirm"
@
close=
"showPop=false"
:maxDate=
"maxDate"
:minDate=
'minDate'
:defaultDate=
"defaultDate"
:formatter=
'formatter'
:customList=
'customList'
ref=
"calendar2"
rowHeight=
'112'
round=
'20'
...
...
@@ -21,10 +20,14 @@ export default {
dateList
:{
handler
(
newValue
,
oldValue
){
if
(
newValue
&&
newValue
.
length
>
0
){
this
.
maxDate
=
newValue
[
newValue
.
length
-
1
].
startTime
.
substr
(
0
,
10
)
//默认和最小日期都为第一天
this
.
minDate
=
newValue
[
0
].
startTime
.
substr
(
0
,
10
)
this
.
customList
=
newValue
.
map
(
item
=>
{
return
item
.
startTime
.
substr
(
0
,
10
)
}
)
this
.
defaultDate
=
newValue
[
0
].
startTime
.
substr
(
0
,
10
)
//由于传入了customList,最大日期和最小日期可以取消
// this.maxDate=newValue[newValue.length-1].startTime.substr(0,10)
// //默认和最小日期都为第一天
// this.minDate=newValue[0].startTime.substr(0,10)
}
},
deep
:
true
,
...
...
@@ -37,6 +40,7 @@ export default {
defaultDate
:
''
,
//默认日期
maxDate
:
''
,
//最大日期
minDate
:
''
,
//最小日期
customList
:[],
//转化之后的日期列表
}
},
mounted
()
{
...
...
@@ -67,9 +71,6 @@ export default {
// day.dot = true
// }
// })
// if (!day.bottomInfo) {
// day.type = 'disabled'
// }
return
day
}
...
...
uview-ui/components/u-calendar/u-calendar.vue
View file @
e2b958b4
...
...
@@ -109,267 +109,269 @@ import Calendar from '../../libs/util/calendar.js'
</u-calendar>
* */
export
default
{
name
:
'u-calendar'
,
mixins
:
[
uni
.
$u
.
mpMixin
,
uni
.
$u
.
mixin
,
props
],
components
:
{
uHeader
,
uMonth
},
data
()
{
return
{
// 需要显示的月份的数组
months
:
[],
// 在月份滚动区域中,当前视图中月份的index索引
monthIndex
:
0
,
// 月份滚动区域的高度
listHeight
:
0
,
// month组件中选择的日期数组
selected
:
[],
scrollIntoView
:
''
,
scrollTop
:
0
,
// 过滤处理方法
innerFormatter
:
(
value
)
=>
value
}
},
watch
:
{
selectedChange
:
{
immediate
:
true
,
handler
(
n
)
{
this
.
setMonth
()
}
},
// 打开弹窗时,设置月份数据
show
:
{
immediate
:
true
,
handler
(
n
)
{
this
.
setMonth
()
}
}
},
computed
:
{
// 由于maxDate和minDate可以为字符串(2021-10-10),或者数值(时间戳),但是dayjs如果接受字符串形式的时间戳会有问题,这里进行处理
innerMaxDate
()
{
return
uni
.
$u
.
test
.
number
(
this
.
maxDate
)
?
Number
(
this
.
maxDate
)
:
this
.
maxDate
},
innerMinDate
()
{
return
uni
.
$u
.
test
.
number
(
this
.
minDate
)
?
Number
(
this
.
minDate
)
:
this
.
minDate
},
// 多个条件的变化,会引起选中日期的变化,这里统一管理监听
selectedChange
()
{
return
[
this
.
innerMinDate
,
this
.
innerMaxDate
,
this
.
defaultDate
]
},
subtitle
()
{
// 初始化时,this.months为空数组,所以需要特别判断处理
if
(
this
.
months
.
length
)
{
return
`
${
this
.
months
[
this
.
monthIndex
].
year
}
年
${
this
.
months
[
this
.
monthIndex
].
month
}
月`
}
else
{
return
''
}
},
buttonDisabled
()
{
// 如果为range类型,且选择的日期个数不足1个时,让底部的按钮出于disabled状态
if
(
this
.
mode
===
'range'
)
{
if
(
this
.
selected
.
length
<=
1
)
{
return
true
}
else
{
return
false
}
}
else
{
return
false
}
}
},
mounted
()
{
this
.
start
=
Date
.
now
()
this
.
init
()
},
methods
:
{
// 在微信小程序中,不支持将函数当做props参数,故只能通过ref形式调用
setFormatter
(
e
)
{
this
.
innerFormatter
=
e
},
// month组件内部选择日期后,通过事件通知给父组件
monthSelected
(
e
)
{
this
.
selected
=
e
if
(
!
this
.
showConfirm
)
{
// 在不需要确认按钮的情况下,如果为单选,或者范围多选且已选长度大于2,则直接进行返还
if
(
this
.
mode
===
'multiple'
||
name
:
'u-calendar'
,
mixins
:
[
uni
.
$u
.
mpMixin
,
uni
.
$u
.
mixin
,
props
],
components
:
{
uHeader
,
uMonth
},
data
()
{
return
{
// 需要显示的月份的数组
months
:
[],
// 在月份滚动区域中,当前视图中月份的index索引
monthIndex
:
0
,
// 月份滚动区域的高度
listHeight
:
0
,
// month组件中选择的日期数组
selected
:
[],
scrollIntoView
:
''
,
scrollTop
:
0
,
// 过滤处理方法
innerFormatter
:
(
value
)
=>
value
}
},
watch
:
{
selectedChange
:
{
immediate
:
true
,
handler
(
n
)
{
this
.
setMonth
()
}
},
// 打开弹窗时,设置月份数据
show
:
{
immediate
:
true
,
handler
(
n
)
{
this
.
setMonth
()
}
}
},
computed
:
{
// 由于maxDate和minDate可以为字符串(2021-10-10),或者数值(时间戳),但是dayjs如果接受字符串形式的时间戳会有问题,这里进行处理
innerMaxDate
()
{
return
uni
.
$u
.
test
.
number
(
this
.
maxDate
)
?
Number
(
this
.
maxDate
)
:
this
.
maxDate
},
innerMinDate
()
{
return
uni
.
$u
.
test
.
number
(
this
.
minDate
)
?
Number
(
this
.
minDate
)
:
this
.
minDate
},
// 多个条件的变化,会引起选中日期的变化,这里统一管理监听
selectedChange
()
{
return
[
this
.
innerMinDate
,
this
.
innerMaxDate
,
this
.
defaultDate
]
},
subtitle
()
{
// 初始化时,this.months为空数组,所以需要特别判断处理
if
(
this
.
months
.
length
)
{
return
`
${
this
.
months
[
this
.
monthIndex
].
year
}
年
${
this
.
months
[
this
.
monthIndex
].
month
}
月`
}
else
{
return
''
}
},
buttonDisabled
()
{
// 如果为range类型,且选择的日期个数不足1个时,让底部的按钮出于disabled状态
if
(
this
.
mode
===
'range'
)
{
if
(
this
.
selected
.
length
<=
1
)
{
return
true
}
else
{
return
false
}
}
else
{
return
false
}
}
},
mounted
()
{
this
.
start
=
Date
.
now
()
this
.
init
()
},
methods
:
{
// 在微信小程序中,不支持将函数当做props参数,故只能通过ref形式调用
setFormatter
(
e
)
{
this
.
innerFormatter
=
e
},
// month组件内部选择日期后,通过事件通知给父组件
monthSelected
(
e
)
{
this
.
selected
=
e
if
(
!
this
.
showConfirm
)
{
// 在不需要确认按钮的情况下,如果为单选,或者范围多选且已选长度大于2,则直接进行返还
if
(
this
.
mode
===
'multiple'
||
this
.
mode
===
'single'
||
(
this
.
mode
===
'range'
&&
this
.
selected
.
length
>=
2
)
)
{
this
.
$emit
(
'confirm'
,
this
.
selected
)
}
}
},
init
()
{
// 校验maxDate,不能小于minDate
if
(
this
.
innerMaxDate
&&
)
{
this
.
$emit
(
'confirm'
,
this
.
selected
)
}
}
},
init
()
{
// 校验maxDate,不能小于minDate
if
(
this
.
innerMaxDate
&&
this
.
innerMinDate
&&
new
Date
(
this
.
innerMaxDate
).
getTime
()
<
new
Date
(
this
.
innerMinDate
).
getTime
()
)
{
return
uni
.
$u
.
error
(
'maxDate不能小于minDate'
)
}
// 滚动区域的高度
this
.
listHeight
=
this
.
rowHeight
*
5
+
30
this
.
setMonth
()
},
close
()
{
this
.
$emit
(
'close'
)
},
// 点击确定按钮
confirm
()
{
if
(
!
this
.
buttonDisabled
)
{
this
.
$emit
(
'confirm'
,
this
.
selected
)
}
},
// 获得两个日期之间的月份数
getMonths
(
minDate
,
maxDate
)
{
const
minYear
=
dayjs
(
minDate
).
year
()
const
minMonth
=
dayjs
(
minDate
).
month
()
+
1
const
maxYear
=
dayjs
(
maxDate
).
year
()
const
maxMonth
=
dayjs
(
maxDate
).
month
()
+
1
return
(
maxYear
-
minYear
)
*
12
+
(
maxMonth
-
minMonth
)
+
1
},
// 设置月份数据
setMonth
()
{
// 最小日期的毫秒数
const
minDate
=
this
.
innerMinDate
||
dayjs
().
valueOf
()
// 如果没有指定最大日期,则往后推3个月
const
maxDate
=
)
{
return
uni
.
$u
.
error
(
'maxDate不能小于minDate'
)
}
// 滚动区域的高度
this
.
listHeight
=
this
.
rowHeight
*
5
+
30
this
.
setMonth
()
},
close
()
{
this
.
$emit
(
'close'
)
},
// 点击确定按钮
confirm
()
{
if
(
!
this
.
buttonDisabled
)
{
this
.
$emit
(
'confirm'
,
this
.
selected
)
}
},
// 获得两个日期之间的月份数
getMonths
(
minDate
,
maxDate
)
{
const
minYear
=
dayjs
(
minDate
).
year
()
const
minMonth
=
dayjs
(
minDate
).
month
()
+
1
const
maxYear
=
dayjs
(
maxDate
).
year
()
const
maxMonth
=
dayjs
(
maxDate
).
month
()
+
1
return
(
maxYear
-
minYear
)
*
12
+
(
maxMonth
-
minMonth
)
+
1
},
// 设置月份数据
setMonth
()
{
// 最小日期的毫秒数
const
minDate
=
this
.
innerMinDate
||
dayjs
().
valueOf
()
// 如果没有指定最大日期,则往后推3个月
const
maxDate
=
this
.
innerMaxDate
||
dayjs
(
minDate
)
.
add
(
this
.
monthNum
-
1
,
'month'
)
.
valueOf
()
// 最大最小月份之间的共有多少个月份,
const
months
=
uni
.
$u
.
range
(
1
,
this
.
monthNum
,
this
.
getMonths
(
minDate
,
maxDate
)
)
// 先清空数组
this
.
months
=
[]
for
(
let
i
=
0
;
i
<
months
;
i
++
)
{
this
.
months
.
push
({
date
:
new
Array
(
dayjs
(
minDate
).
add
(
i
,
'month'
).
daysInMonth
()
)
.
fill
(
1
)
.
map
((
item
,
index
)
=>
{
// 日期,取值1-31
let
day
=
index
+
1
// 星期,0-6,0为周日
const
week
=
dayjs
(
minDate
)
.
add
(
i
,
'month'
)
.
date
(
day
)
.
day
()
const
date
=
dayjs
(
minDate
)
.
add
(
i
,
'month'
)
.
date
(
day
)
.
format
(
'YYYY-MM-DD'
)
let
bottomInfo
=
''
if
(
this
.
showLunar
)
{
// 将日期转为农历格式
const
lunar
=
Calendar
.
solar2lunar
(
dayjs
(
date
).
year
(),
dayjs
(
date
).
month
()
+
1
,
dayjs
(
date
).
date
()
)
bottomInfo
=
lunar
.
IDayCn
}
let
config
=
{
day
,
week
,
// 小于最小允许的日期,或者大于最大的日期,则设置为disabled状态
disabled
:
.
add
(
this
.
monthNum
-
1
,
'month'
)
.
valueOf
()
// 最大最小月份之间的共有多少个月份,
const
months
=
uni
.
$u
.
range
(
1
,
this
.
monthNum
,
this
.
getMonths
(
minDate
,
maxDate
)
)
// 先清空数组
this
.
months
=
[]
for
(
let
i
=
0
;
i
<
months
;
i
++
)
{
this
.
months
.
push
({
date
:
new
Array
(
dayjs
(
minDate
).
add
(
i
,
'month'
).
daysInMonth
()
)
.
fill
(
1
)
.
map
((
item
,
index
)
=>
{
// 日期,取值1-31
let
day
=
index
+
1
// 星期,0-6,0为周日
const
week
=
dayjs
(
minDate
)
.
add
(
i
,
'month'
)
.
date
(
day
)
.
day
()
const
date
=
dayjs
(
minDate
)
.
add
(
i
,
'month'
)
.
date
(
day
)
.
format
(
'YYYY-MM-DD'
)
let
bottomInfo
=
''
if
(
this
.
showLunar
)
{
// 将日期转为农历格式
const
lunar
=
Calendar
.
solar2lunar
(
dayjs
(
date
).
year
(),
dayjs
(
date
).
month
()
+
1
,
dayjs
(
date
).
date
()
)
bottomInfo
=
lunar
.
IDayCn
}
let
config
=
{
day
,
week
,
// 小于最小允许的日期,或者大于最大的日期,则设置为disabled状态
disabled
:
dayjs
(
date
).
isBefore
(
dayjs
(
minDate
).
format
(
'YYYY-MM-DD'
)
dayjs
(
minDate
).
format
(
'YYYY-MM-DD'
)
)
||
dayjs
(
date
).
isAfter
(
dayjs
(
maxDate
).
format
(
'YYYY-MM-DD'
)
),
// 返回一个日期对象,供外部的formatter获取当前日期的年月日等信息,进行加工处理
date
:
new
Date
(
date
),
bottomInfo
,
dot
:
false
,
month
:
dayjs
(
maxDate
).
format
(
'YYYY-MM-DD'
)
)
||
//自己修改的--用于禁用最大和最小日期之间的日期
this
.
customList
.
indexOf
(
date
)
===
-
1
,
// 返回一个日期对象,供外部的formatter获取当前日期的年月日等信息,进行加工处理
date
:
new
Date
(
date
),
bottomInfo
,
dot
:
false
,
month
:
dayjs
(
minDate
).
add
(
i
,
'month'
).
month
()
+
1
}
const
formatter
=
}
const
formatter
=
this
.
formatter
||
this
.
innerFormatter
return
formatter
(
config
)
}),
// 当前所属的月份
month
:
dayjs
(
minDate
).
add
(
i
,
'month'
).
month
()
+
1
,
// 当前年份
year
:
dayjs
(
minDate
).
add
(
i
,
'month'
).
year
()
})
}
return
formatter
(
config
)
}),
// 当前所属的月份
month
:
dayjs
(
minDate
).
add
(
i
,
'month'
).
month
()
+
1
,
// 当前年份
year
:
dayjs
(
minDate
).
add
(
i
,
'month'
).
year
()
})
}
},
// 滚动到默认设置的月份
scrollIntoDefaultMonth
(
selected
)
{
// 查询默认日期在可选列表的下标
const
_index
=
this
.
months
.
findIndex
(({
},
// 滚动到默认设置的月份
scrollIntoDefaultMonth
(
selected
)
{
// 查询默认日期在可选列表的下标
const
_index
=
this
.
months
.
findIndex
(({
year
,
month
})
=>
{
month
=
uni
.
$u
.
padZero
(
month
)
return
`
${
year
}
-
${
month
}
`
===
selected
})
if
(
_index
!==
-
1
)
{
// #ifndef MP-WEIXIN
this
.
$nextTick
(()
=>
{
this
.
scrollIntoView
=
`month-
${
_index
}
`
})
// #endif
// #ifdef MP-WEIXIN
this
.
scrollTop
=
this
.
months
[
_index
].
top
||
0
;
// #endif
}
},
// scroll-view滚动监听
onScroll
(
event
)
{
// 不允许小于0的滚动值,如果scroll-view到顶了,继续下拉,会出现负数值
const
scrollTop
=
Math
.
max
(
0
,
event
.
detail
.
scrollTop
)
// 将当前滚动条数值,除以滚动区域的高度,可以得出当前滚动到了哪一个月份的索引
for
(
let
i
=
0
;
i
<
this
.
months
.
length
;
i
++
)
{
if
(
scrollTop
>=
(
this
.
months
[
i
].
top
||
this
.
listHeight
))
{
this
.
monthIndex
=
i
}
}
},
// 更新月份的top值
updateMonthTop
(
topArr
=
[])
{
// 设置对应月份的top值,用于onScroll方法更新月份
topArr
.
map
((
item
,
index
)
=>
{
this
.
months
[
index
].
top
=
item
})
month
=
uni
.
$u
.
padZero
(
month
)
return
`
${
year
}
-
${
month
}
`
===
selected
})
if
(
_index
!==
-
1
)
{
// #ifndef MP-WEIXIN
this
.
$nextTick
(()
=>
{
this
.
scrollIntoView
=
`month-
${
_index
}
`
})
// #endif
// #ifdef MP-WEIXIN
this
.
scrollTop
=
this
.
months
[
_index
].
top
||
0
// #endif
}
},
// scroll-view滚动监听
onScroll
(
event
)
{
// 不允许小于0的滚动值,如果scroll-view到顶了,继续下拉,会出现负数值
const
scrollTop
=
Math
.
max
(
0
,
event
.
detail
.
scrollTop
)
// 将当前滚动条数值,除以滚动区域的高度,可以得出当前滚动到了哪一个月份的索引
for
(
let
i
=
0
;
i
<
this
.
months
.
length
;
i
++
)
{
if
(
scrollTop
>=
(
this
.
months
[
i
].
top
||
this
.
listHeight
))
{
this
.
monthIndex
=
i
}
}
},
// 更新月份的top值
updateMonthTop
(
topArr
=
[])
{
// 设置对应月份的top值,用于onScroll方法更新月份
topArr
.
map
((
item
,
index
)
=>
{
this
.
months
[
index
].
top
=
item
})
// 获取默认日期的下标
if
(
!
this
.
defaultDate
)
{
// 如果没有设置默认日期,则将当天日期设置为默认选中的日期
const
selected
=
dayjs
().
format
(
"YYYY-MM"
)
this
.
scrollIntoDefaultMonth
(
selected
)
return
}
let
selected
=
dayjs
().
format
(
"YYYY-MM"
);
// 单选模式,可以是字符串或数组,Date对象等
if
(
!
uni
.
$u
.
test
.
array
(
this
.
defaultDate
))
{
selected
=
dayjs
(
this
.
defaultDate
).
format
(
"YYYY-MM"
)
}
else
{
selected
=
dayjs
(
this
.
defaultDate
[
0
]).
format
(
"YYYY-MM"
);
}
this
.
scrollIntoDefaultMonth
(
selected
)
}
}
// 获取默认日期的下标
if
(
!
this
.
defaultDate
)
{
// 如果没有设置默认日期,则将当天日期设置为默认选中的日期
const
selected
=
dayjs
().
format
(
'YYYY-MM'
)
this
.
scrollIntoDefaultMonth
(
selected
)
return
}
let
selected
=
dayjs
().
format
(
'YYYY-MM'
)
// 单选模式,可以是字符串或数组,Date对象等
if
(
!
uni
.
$u
.
test
.
array
(
this
.
defaultDate
))
{
selected
=
dayjs
(
this
.
defaultDate
).
format
(
'YYYY-MM'
)
}
else
{
selected
=
dayjs
(
this
.
defaultDate
[
0
]).
format
(
'YYYY-MM'
)
}
this
.
scrollIntoDefaultMonth
(
selected
)
}
}
}
</
script
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment