Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
M
mallapp
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
viitto
mallapp
Commits
414d25dc
Commit
414d25dc
authored
Oct 13, 2022
by
黄奎
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
日历组件
parent
b10d89e0
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
1898 additions
and
0 deletions
+1898
-0
changelog.md
uni_modules/uni-calendar/changelog.md
+20
-0
calendar.js
uni_modules/uni-calendar/components/uni-calendar/calendar.js
+546
-0
en.json
...modules/uni-calendar/components/uni-calendar/i18n/en.json
+12
-0
index.js
...odules/uni-calendar/components/uni-calendar/i18n/index.js
+8
-0
zh-Hans.json
...es/uni-calendar/components/uni-calendar/i18n/zh-Hans.json
+12
-0
zh-Hant.json
...es/uni-calendar/components/uni-calendar/i18n/zh-Hant.json
+12
-0
uni-calendar-item.vue
...ni-calendar/components/uni-calendar/uni-calendar-item.vue
+188
-0
uni-calendar.vue
...les/uni-calendar/components/uni-calendar/uni-calendar.vue
+562
-0
util.js
uni_modules/uni-calendar/components/uni-calendar/util.js
+350
-0
package.json
uni_modules/uni-calendar/package.json
+85
-0
readme.md
uni_modules/uni-calendar/readme.md
+103
-0
No files found.
uni_modules/uni-calendar/changelog.md
0 → 100644
View file @
414d25dc
## 1.4.7(2022-09-16)
-
可以使用 uni-scss 控制主题色
## 1.4.6(2022-09-08)
-
fix: 表头年月切换,导致改变当前日期为选择月1号,且未触发change事件
## 1.4.5(2022-02-25)
-
修复 条件编译 nvue 不支持的 css 样式
## 1.4.4(2022-02-25)
-
修复 条件编译 nvue 不支持的 css 样式
## 1.4.3(2021-09-22)
-
修复 startDate、 endDate 属性失效的 bug
## 1.4.2(2021-08-24)
-
新增 支持国际化
## 1.4.1(2021-08-05)
-
修复 弹出层被 tabbar 遮盖 bug
## 1.4.0(2021-07-30)
-
组件兼容 vue3,如何创建vue3项目,详见
[
uni-app 项目支持 vue3 介绍
](
https://ask.dcloud.net.cn/article/37834
)
## 1.3.16(2021-05-12)
-
新增 组件示例地址
## 1.3.15(2021-02-04)
-
调整为uni_modules目录规范
uni_modules/uni-calendar/components/uni-calendar/calendar.js
0 → 100644
View file @
414d25dc
This diff is collapsed.
Click to expand it.
uni_modules/uni-calendar/components/uni-calendar/i18n/en.json
0 → 100644
View file @
414d25dc
{
"uni-calender.ok"
:
"ok"
,
"uni-calender.cancel"
:
"cancel"
,
"uni-calender.today"
:
"today"
,
"uni-calender.MON"
:
"MON"
,
"uni-calender.TUE"
:
"TUE"
,
"uni-calender.WED"
:
"WED"
,
"uni-calender.THU"
:
"THU"
,
"uni-calender.FRI"
:
"FRI"
,
"uni-calender.SAT"
:
"SAT"
,
"uni-calender.SUN"
:
"SUN"
}
uni_modules/uni-calendar/components/uni-calendar/i18n/index.js
0 → 100644
View file @
414d25dc
import
en
from
'./en.json'
import
zhHans
from
'./zh-Hans.json'
import
zhHant
from
'./zh-Hant.json'
export
default
{
en
,
'zh-Hans'
:
zhHans
,
'zh-Hant'
:
zhHant
}
uni_modules/uni-calendar/components/uni-calendar/i18n/zh-Hans.json
0 → 100644
View file @
414d25dc
{
"uni-calender.ok"
:
"确定"
,
"uni-calender.cancel"
:
"取消"
,
"uni-calender.today"
:
"今日"
,
"uni-calender.SUN"
:
"日"
,
"uni-calender.MON"
:
"一"
,
"uni-calender.TUE"
:
"二"
,
"uni-calender.WED"
:
"三"
,
"uni-calender.THU"
:
"四"
,
"uni-calender.FRI"
:
"五"
,
"uni-calender.SAT"
:
"六"
}
uni_modules/uni-calendar/components/uni-calendar/i18n/zh-Hant.json
0 → 100644
View file @
414d25dc
{
"uni-calender.ok"
:
"確定"
,
"uni-calender.cancel"
:
"取消"
,
"uni-calender.today"
:
"今日"
,
"uni-calender.SUN"
:
"日"
,
"uni-calender.MON"
:
"一"
,
"uni-calender.TUE"
:
"二"
,
"uni-calender.WED"
:
"三"
,
"uni-calender.THU"
:
"四"
,
"uni-calender.FRI"
:
"五"
,
"uni-calender.SAT"
:
"六"
}
uni_modules/uni-calendar/components/uni-calendar/uni-calendar-item.vue
0 → 100644
View file @
414d25dc
<
template
>
<view
class=
"uni-calendar-item__weeks-box"
:class=
"
{
'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate
&&
weeks.isDay,
'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate
&&
!weeks.isDay) ,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
}"
@click="choiceDate(weeks)">
<view
class=
"uni-calendar-item__weeks-box-item"
>
<text
v-if=
"selected&&weeks.extraInfo"
class=
"uni-calendar-item__weeks-box-circle"
></text>
<text
class=
"uni-calendar-item__weeks-box-text"
:class=
"
{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate
&&
weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate
&&
!weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">
{{
weeks
.
date
}}
</text>
<text
v-if=
"!lunar&&!weeks.extraInfo && weeks.isDay"
class=
"uni-calendar-item__weeks-lunar-text"
:class=
"
{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate
&&
weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate
&&
!weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
}">
{{
todayText
}}
</text>
<text
v-if=
"lunar&&!weeks.extraInfo"
class=
"uni-calendar-item__weeks-lunar-text"
:class=
"
{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate
&&
weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate
&&
!weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">
{{
weeks
.
isDay
?
todayText
:
(
weeks
.
lunar
.
IDayCn
===
'初一'
?
weeks
.
lunar
.
IMonthCn
:
weeks
.
lunar
.
IDayCn
)
}}
</text>
<text
v-if=
"weeks.extraInfo&&weeks.extraInfo.info"
class=
"uni-calendar-item__weeks-lunar-text"
:class=
"
{
'uni-calendar-item--extra':weeks.extraInfo.info,
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate
&&
weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate
&&
!weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">
{{
weeks
.
extraInfo
.
info
}}
</text>
</view>
</view>
</
template
>
<
script
>
import
{
initVueI18n
}
from
'@dcloudio/uni-i18n'
import
messages
from
'./i18n/index.js'
const
{
t
}
=
initVueI18n
(
messages
)
export
default
{
emits
:[
'change'
],
props
:
{
weeks
:
{
type
:
Object
,
default
()
{
return
{}
}
},
calendar
:
{
type
:
Object
,
default
:
()
=>
{
return
{}
}
},
selected
:
{
type
:
Array
,
default
:
()
=>
{
return
[]
}
},
lunar
:
{
type
:
Boolean
,
default
:
false
}
},
computed
:
{
todayText
()
{
return
t
(
"uni-calender.today"
)
},
},
methods
:
{
choiceDate
(
weeks
)
{
this
.
$emit
(
'change'
,
weeks
)
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
$uni-font-size-base
:
14px
;
$uni-text-color
:
#333
;
$uni-font-size-sm
:
12px
;
$uni-color-error
:
#e43d33
;
$uni-opacity-disabled
:
0
.3
;
$uni-text-color-disable
:
#c0c0c0
;
$uni-primary
:
#2979ff
!
default
;
.uni-calendar-item__weeks-box
{
flex
:
1
;
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
column
;
justify-content
:
center
;
align-items
:
center
;
}
.uni-calendar-item__weeks-box-text
{
font-size
:
$uni-font-size-base
;
color
:
$uni-text-color
;
}
.uni-calendar-item__weeks-lunar-text
{
font-size
:
$uni-font-size-sm
;
color
:
$uni-text-color
;
}
.uni-calendar-item__weeks-box-item
{
position
:
relative
;
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
column
;
justify-content
:
center
;
align-items
:
center
;
width
:
100rpx
;
height
:
100rpx
;
}
.uni-calendar-item__weeks-box-circle
{
position
:
absolute
;
top
:
5px
;
right
:
5px
;
width
:
8px
;
height
:
8px
;
border-radius
:
8px
;
background-color
:
$uni-color-error
;
}
.uni-calendar-item--disable
{
background-color
:
rgba
(
249
,
249
,
249
,
$uni-opacity-disabled
);
color
:
$uni-text-color-disable
;
}
.uni-calendar-item--isDay-text
{
color
:
$uni-primary
;
}
.uni-calendar-item--isDay
{
background-color
:
$uni-primary
;
opacity
:
0
.8
;
color
:
#fff
;
}
.uni-calendar-item--extra
{
color
:
$uni-color-error
;
opacity
:
0
.8
;
}
.uni-calendar-item--checked
{
background-color
:
$uni-primary
;
color
:
#fff
;
opacity
:
0
.8
;
}
.uni-calendar-item--multiple
{
background-color
:
$uni-primary
;
color
:
#fff
;
opacity
:
0
.8
;
}
.uni-calendar-item--before-checked
{
background-color
:
#ff5a5f
;
color
:
#fff
;
}
.uni-calendar-item--after-checked
{
background-color
:
#ff5a5f
;
color
:
#fff
;
}
</
style
>
uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue
0 → 100644
View file @
414d25dc
This diff is collapsed.
Click to expand it.
uni_modules/uni-calendar/components/uni-calendar/util.js
0 → 100644
View file @
414d25dc
import
CALENDAR
from
'./calendar.js'
class
Calendar
{
constructor
({
date
,
selected
,
startDate
,
endDate
,
range
}
=
{})
{
// 当前日期
this
.
date
=
this
.
getDate
(
new
Date
())
// 当前初入日期
// 打点信息
this
.
selected
=
selected
||
[];
// 范围开始
this
.
startDate
=
startDate
// 范围结束
this
.
endDate
=
endDate
this
.
range
=
range
// 多选状态
this
.
cleanMultipleStatus
()
// 每周日期
this
.
weeks
=
{}
// this._getWeek(this.date.fullDate)
}
/**
* 设置日期
* @param {Object} date
*/
setDate
(
date
)
{
this
.
selectDate
=
this
.
getDate
(
date
)
this
.
_getWeek
(
this
.
selectDate
.
fullDate
)
}
/**
* 清理多选状态
*/
cleanMultipleStatus
()
{
this
.
multipleStatus
=
{
before
:
''
,
after
:
''
,
data
:
[]
}
}
/**
* 重置开始日期
*/
resetSatrtDate
(
startDate
)
{
// 范围开始
this
.
startDate
=
startDate
}
/**
* 重置结束日期
*/
resetEndDate
(
endDate
)
{
// 范围结束
this
.
endDate
=
endDate
}
/**
* 获取任意时间
*/
getDate
(
date
,
AddDayCount
=
0
,
str
=
'day'
)
{
if
(
!
date
)
{
date
=
new
Date
()
}
if
(
typeof
date
!==
'object'
)
{
date
=
date
.
replace
(
/-/g
,
'/'
)
}
const
dd
=
new
Date
(
date
)
switch
(
str
)
{
case
'day'
:
dd
.
setDate
(
dd
.
getDate
()
+
AddDayCount
)
// 获取AddDayCount天后的日期
break
case
'month'
:
if
(
dd
.
getDate
()
===
31
)
{
dd
.
setDate
(
dd
.
getDate
()
+
AddDayCount
)
}
else
{
dd
.
setMonth
(
dd
.
getMonth
()
+
AddDayCount
)
// 获取AddDayCount天后的日期
}
break
case
'year'
:
dd
.
setFullYear
(
dd
.
getFullYear
()
+
AddDayCount
)
// 获取AddDayCount天后的日期
break
}
const
y
=
dd
.
getFullYear
()
const
m
=
dd
.
getMonth
()
+
1
<
10
?
'0'
+
(
dd
.
getMonth
()
+
1
)
:
dd
.
getMonth
()
+
1
// 获取当前月份的日期,不足10补0
const
d
=
dd
.
getDate
()
<
10
?
'0'
+
dd
.
getDate
()
:
dd
.
getDate
()
// 获取当前几号,不足10补0
return
{
fullDate
:
y
+
'-'
+
m
+
'-'
+
d
,
year
:
y
,
month
:
m
,
date
:
d
,
day
:
dd
.
getDay
()
}
}
/**
* 获取上月剩余天数
*/
_getLastMonthDays
(
firstDay
,
full
)
{
let
dateArr
=
[]
for
(
let
i
=
firstDay
;
i
>
0
;
i
--
)
{
const
beforeDate
=
new
Date
(
full
.
year
,
full
.
month
-
1
,
-
i
+
1
).
getDate
()
dateArr
.
push
({
date
:
beforeDate
,
month
:
full
.
month
-
1
,
lunar
:
this
.
getlunar
(
full
.
year
,
full
.
month
-
1
,
beforeDate
),
disable
:
true
})
}
return
dateArr
}
/**
* 获取本月天数
*/
_currentMonthDys
(
dateData
,
full
)
{
let
dateArr
=
[]
let
fullDate
=
this
.
date
.
fullDate
for
(
let
i
=
1
;
i
<=
dateData
;
i
++
)
{
let
nowDate
=
full
.
year
+
'-'
+
(
full
.
month
<
10
?
full
.
month
:
full
.
month
)
+
'-'
+
(
i
<
10
?
'0'
+
i
:
i
)
// 是否今天
let
isDay
=
fullDate
===
nowDate
// 获取打点信息
let
info
=
this
.
selected
&&
this
.
selected
.
find
((
item
)
=>
{
if
(
this
.
dateEqual
(
nowDate
,
item
.
date
))
{
return
item
}
})
// 日期禁用
let
disableBefore
=
true
let
disableAfter
=
true
if
(
this
.
startDate
)
{
// let dateCompBefore = this.dateCompare(this.startDate, fullDate)
// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
disableBefore
=
this
.
dateCompare
(
this
.
startDate
,
nowDate
)
}
if
(
this
.
endDate
)
{
// let dateCompAfter = this.dateCompare(fullDate, this.endDate)
// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
disableAfter
=
this
.
dateCompare
(
nowDate
,
this
.
endDate
)
}
let
multiples
=
this
.
multipleStatus
.
data
let
checked
=
false
let
multiplesStatus
=
-
1
if
(
this
.
range
)
{
if
(
multiples
)
{
multiplesStatus
=
multiples
.
findIndex
((
item
)
=>
{
return
this
.
dateEqual
(
item
,
nowDate
)
})
}
if
(
multiplesStatus
!==
-
1
)
{
checked
=
true
}
}
let
data
=
{
fullDate
:
nowDate
,
year
:
full
.
year
,
date
:
i
,
multiple
:
this
.
range
?
checked
:
false
,
beforeMultiple
:
this
.
dateEqual
(
this
.
multipleStatus
.
before
,
nowDate
),
afterMultiple
:
this
.
dateEqual
(
this
.
multipleStatus
.
after
,
nowDate
),
month
:
full
.
month
,
lunar
:
this
.
getlunar
(
full
.
year
,
full
.
month
,
i
),
disable
:
!
(
disableBefore
&&
disableAfter
),
isDay
}
if
(
info
)
{
data
.
extraInfo
=
info
}
dateArr
.
push
(
data
)
}
return
dateArr
}
/**
* 获取下月天数
*/
_getNextMonthDays
(
surplus
,
full
)
{
let
dateArr
=
[]
for
(
let
i
=
1
;
i
<
surplus
+
1
;
i
++
)
{
dateArr
.
push
({
date
:
i
,
month
:
Number
(
full
.
month
)
+
1
,
lunar
:
this
.
getlunar
(
full
.
year
,
Number
(
full
.
month
)
+
1
,
i
),
disable
:
true
})
}
return
dateArr
}
/**
* 获取当前日期详情
* @param {Object} date
*/
getInfo
(
date
)
{
if
(
!
date
)
{
date
=
new
Date
()
}
const
dateInfo
=
this
.
canlender
.
find
(
item
=>
item
.
fullDate
===
this
.
getDate
(
date
).
fullDate
)
return
dateInfo
}
/**
* 比较时间大小
*/
dateCompare
(
startDate
,
endDate
)
{
// 计算截止时间
startDate
=
new
Date
(
startDate
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
// 计算详细项的截止时间
endDate
=
new
Date
(
endDate
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
if
(
startDate
<=
endDate
)
{
return
true
}
else
{
return
false
}
}
/**
* 比较时间是否相等
*/
dateEqual
(
before
,
after
)
{
// 计算截止时间
before
=
new
Date
(
before
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
// 计算详细项的截止时间
after
=
new
Date
(
after
.
replace
(
'-'
,
'/'
).
replace
(
'-'
,
'/'
))
if
(
before
.
getTime
()
-
after
.
getTime
()
===
0
)
{
return
true
}
else
{
return
false
}
}
/**
* 获取日期范围内所有日期
* @param {Object} begin
* @param {Object} end
*/
geDateAll
(
begin
,
end
)
{
var
arr
=
[]
var
ab
=
begin
.
split
(
'-'
)
var
ae
=
end
.
split
(
'-'
)
var
db
=
new
Date
()
db
.
setFullYear
(
ab
[
0
],
ab
[
1
]
-
1
,
ab
[
2
])
var
de
=
new
Date
()
de
.
setFullYear
(
ae
[
0
],
ae
[
1
]
-
1
,
ae
[
2
])
var
unixDb
=
db
.
getTime
()
-
24
*
60
*
60
*
1000
var
unixDe
=
de
.
getTime
()
-
24
*
60
*
60
*
1000
for
(
var
k
=
unixDb
;
k
<=
unixDe
;)
{
k
=
k
+
24
*
60
*
60
*
1000
arr
.
push
(
this
.
getDate
(
new
Date
(
parseInt
(
k
))).
fullDate
)
}
return
arr
}
/**
* 计算阴历日期显示
*/
getlunar
(
year
,
month
,
date
)
{
return
CALENDAR
.
solar2lunar
(
year
,
month
,
date
)
}
/**
* 设置打点
*/
setSelectInfo
(
data
,
value
)
{
this
.
selected
=
value
this
.
_getWeek
(
data
)
}
/**
* 获取多选状态
*/
setMultiple
(
fullDate
)
{
let
{
before
,
after
}
=
this
.
multipleStatus
if
(
!
this
.
range
)
return
if
(
before
&&
after
)
{
this
.
multipleStatus
.
before
=
''
this
.
multipleStatus
.
after
=
''
this
.
multipleStatus
.
data
=
[]
}
else
{
if
(
!
before
)
{
this
.
multipleStatus
.
before
=
fullDate
}
else
{
this
.
multipleStatus
.
after
=
fullDate
if
(
this
.
dateCompare
(
this
.
multipleStatus
.
before
,
this
.
multipleStatus
.
after
))
{
this
.
multipleStatus
.
data
=
this
.
geDateAll
(
this
.
multipleStatus
.
before
,
this
.
multipleStatus
.
after
);
}
else
{
this
.
multipleStatus
.
data
=
this
.
geDateAll
(
this
.
multipleStatus
.
after
,
this
.
multipleStatus
.
before
);
}
}
}
this
.
_getWeek
(
fullDate
)
}
/**
* 获取每周数据
* @param {Object} dateData
*/
_getWeek
(
dateData
)
{
const
{
year
,
month
}
=
this
.
getDate
(
dateData
)
let
firstDay
=
new
Date
(
year
,
month
-
1
,
1
).
getDay
()
let
currentDay
=
new
Date
(
year
,
month
,
0
).
getDate
()
let
dates
=
{
lastMonthDays
:
this
.
_getLastMonthDays
(
firstDay
,
this
.
getDate
(
dateData
)),
// 上个月末尾几天
currentMonthDys
:
this
.
_currentMonthDys
(
currentDay
,
this
.
getDate
(
dateData
)),
// 本月天数
nextMonthDays
:
[],
// 下个月开始几天
weeks
:
[]
}
let
canlender
=
[]
const
surplus
=
42
-
(
dates
.
lastMonthDays
.
length
+
dates
.
currentMonthDys
.
length
)
dates
.
nextMonthDays
=
this
.
_getNextMonthDays
(
surplus
,
this
.
getDate
(
dateData
))
canlender
=
canlender
.
concat
(
dates
.
lastMonthDays
,
dates
.
currentMonthDys
,
dates
.
nextMonthDays
)
let
weeks
=
{}
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
for
(
let
i
=
0
;
i
<
canlender
.
length
;
i
++
)
{
if
(
i
%
7
===
0
)
{
weeks
[
parseInt
(
i
/
7
)]
=
new
Array
(
7
)
}
weeks
[
parseInt
(
i
/
7
)][
i
%
7
]
=
canlender
[
i
]
}
this
.
canlender
=
canlender
this
.
weeks
=
weeks
}
//静态方法
// static init(date) {
// if (!this.instance) {
// this.instance = new Calendar(date);
// }
// return this.instance;
// }
}
export
default
Calendar
uni_modules/uni-calendar/package.json
0 → 100644
View file @
414d25dc
{
"id"
:
"uni-calendar"
,
"displayName"
:
"uni-calendar 日历"
,
"version"
:
"1.4.7"
,
"description"
:
"日历组件"
,
"keywords"
:
[
"uni-ui"
,
"uniui"
,
"日历"
,
""
,
"打卡"
,
"日历选择"
],
"repository"
:
"https://github.com/dcloudio/uni-ui"
,
"engines"
:
{
"HBuilderX"
:
""
},
"directories"
:
{
"example"
:
"../../temps/example_temps"
},
"dcloudext"
:
{
"sale"
:
{
"regular"
:
{
"price"
:
"0.00"
},
"sourcecode"
:
{
"price"
:
"0.00"
}
},
"contact"
:
{
"qq"
:
""
},
"declaration"
:
{
"ads"
:
"无"
,
"data"
:
"无"
,
"permissions"
:
"无"
},
"npmurl"
:
"https://www.npmjs.com/package/@dcloudio/uni-ui"
,
"type"
:
"component-vue"
},
"uni_modules"
:
{
"dependencies"
:
[],
"encrypt"
:
[],
"platforms"
:
{
"cloud"
:
{
"tcb"
:
"y"
,
"aliyun"
:
"y"
},
"client"
:
{
"App"
:
{
"app-vue"
:
"y"
,
"app-nvue"
:
"y"
},
"H5-mobile"
:
{
"Safari"
:
"y"
,
"Android Browser"
:
"y"
,
"微信浏览器(Android)"
:
"y"
,
"QQ浏览器(Android)"
:
"y"
},
"H5-pc"
:
{
"Chrome"
:
"y"
,
"IE"
:
"y"
,
"Edge"
:
"y"
,
"Firefox"
:
"y"
,
"Safari"
:
"y"
},
"小程序"
:
{
"微信"
:
"y"
,
"阿里"
:
"y"
,
"百度"
:
"y"
,
"字节跳动"
:
"y"
,
"QQ"
:
"y"
},
"快应用"
:
{
"华为"
:
"u"
,
"联盟"
:
"u"
},
"Vue"
:
{
"vue2"
:
"y"
,
"vue3"
:
"y"
}
}
}
}
}
\ No newline at end of file
uni_modules/uni-calendar/readme.md
0 → 100644
View file @
414d25dc
## Calendar 日历
> **组件名:uni-calendar**
> 代码块: `uCalendar`
日历组件
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 本组件农历转换使用的js是 [@1900-2100区间内的公历、农历互转](https://github.com/jjonline/calendar.js)
> - 仅支持自定义组件模式
> - `date`属性传入的应该是一个 String ,如: 2019-06-27 ,而不是 new Date()
> - 通过 `insert` 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件,但是为了区分模式,现使用两个事件,这里需要注意
> - 弹窗模式下无法阻止后面的元素滚动,如有需要阻止,请在弹窗弹出后,手动设置滚动元素为不可滚动
### 安装方式
本组件符合
[
easycom
](
https://uniapp.dcloud.io/collocation/pages?id=easycom
)
规范,
`HBuilderX 2.5.5`
起,只需将本组件导入项目,在页面
`template`
中即可直接使用,无需在页面中
`import`
和注册
`components`
。
如需通过
`npm`
方式使用
`uni-ui`
组件,另见文档:
[
https://ext.dcloud.net.cn/plugin?id=55
](
https://ext.dcloud.net.cn/plugin?id=55
)
### 基本用法
在
``template``
中使用组件
```
html
<view>
<uni-calendar
:insert=
"true"
:lunar=
"true"
:start-date=
"'2019-3-2'"
:end-date=
"'2019-5-20'"
@
change=
"change"
/>
</view>
```
### 通过方法打开日历
需要设置
`insert`
为
`false`
```
html
<view>
<uni-calendar
ref=
"calendar"
:insert=
"false"
@
confirm=
"confirm"
/>
<button
@
click=
"open"
>
打开日历
</button>
</view>
```
```
javascript
export
default
{
data
()
{
return
{};
},
methods
:
{
open
(){
this
.
$refs
.
calendar
.
open
();
},
confirm
(
e
)
{
console
.
log
(
e
);
}
}
};
```
## API
### Calendar Props
| 属性名 | 类型 | 默认值| 说明 |
| | |
| date | String |- | 自定义当前时间,默认为今天 |
| lunar | Boolean | false | 显示农历 |
| startDate | String |- | 日期选择范围-开始日期 |
| endDate | String |- | 日期选择范围-结束日期 |
| range | Boolean | false | 范围选择 |
| insert | Boolean | false | 插入模式,可选值,ture:插入模式;false:弹窗模式;默认为插入模式 |
|clearDate |Boolean |true |弹窗模式是否清空上次选择内容 |
| selected | Array |- | 打点,期待格式
[
{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}
]
|
|showMonth | Boolean | true | 是否显示月份为背景 |
### Calendar Events
| 事件名 | 说明 |返回值|
| | | |
| open | 弹出日历组件,
`insert :false`
时生效|- |
## 组件示例
点击查看:
[
https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar
](
https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar
)
\ No newline at end of file
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