developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyujian_wd
a5061a67 1 parent e2211153

fix： 

1）自定义日期选择组件修改优化；
Inline Side-by-side
Showing 2 changed files with 62 additions and 65 deletions
... ... @@ -6,17 +6,18 @@ const TAG = "RMCalendar"
@Component
export struct RMCalendar {
@State selectItem: RMCalendarBean = new RMCalendarBean()
private today: Date = new Date() // 当天
//选中的日期
private selectDay: Date = new Date()
// 开始日期
startDate: Date = new Date()
// 截止日期
endDate: Date = new Date()
//当前日期-当前显示的月份的第一天
private startDay: Date = new Date(
this.today.getFullYear(),
this.today.getMonth(),
1
)
// private startDay: Date = new Date(
// this.selectDay.getFullYear(),
// this.selectDay.getMonth(),
// 1
// )
// 是否有上一个月
@State private hasPre: boolean = true
// 是否有下一个月
... ... @@ -42,12 +43,12 @@ export struct RMCalendar {
itemFontColor: ResourceColor = "#333333"
itemFontWeight: FontWeight = FontWeight.Bold
// 今日字体颜色
todayFontColor: ResourceColor = "#ED2800"
selectDayFontColor: ResourceColor = "#ED2800"
// 不能使用的日期字体颜色
disabledFontColor: ResourceColor = "#CCCCCC"
// 选中日期字体颜色
selectFontColor: ResourceColor = "#FFFFFF"
// 选中日期背景颜色, 默认与todayFontColor一致
// 选中日期背景颜色, 默认与selectDayFontColor一致
selectItemBgColor: ResourceColor = "#ED2800"
@State private title: string = ''
// 计算的总加载
... ... @@ -57,7 +58,7 @@ export struct RMCalendar {
// 自定义每一项布局
public cellLayout?: (item: RMCalendarBean) => void
// 仅自定义 今日 样式，当使用cellLayout时，tadayLayout无效
todayLayout?: (item: RMCalendarBean) => void
selectDayLayout?: (item: RMCalendarBean) => void
// 计算item时，如需添加更多自定义属性时使用
reBuildDateItem?: (item: RMCalendarBean) => RMCalendarBean
// 选择变化监听，
... ... @@ -84,10 +85,10 @@ export struct RMCalendar {
cellLayout: this.cellLayout,
itemFontSize: this.itemFontSize,
itemFontColor: this.itemFontColor,
today: this.today.getTime(),
selectDay: this.selectDay.getTime(),
itemFontWeight: this.itemFontWeight,
todayFontColor: this.todayFontColor,
todayLayout: this.todayLayout,
selectDayFontColor: this.selectDayFontColor,
selectDayLayout: this.selectDayLayout,
selectItem: $selectItem,
selectFontColor: this.selectFontColor,
selectItemBgColor: this.selectItemBgColor,
... ... @@ -123,12 +124,12 @@ export struct RMCalendar {
*/
initAttr() {
if (!this.selectItemBgColor) {
this.selectItemBgColor = this.todayFontColor
this.selectItemBgColor = this.selectDayFontColor
}
this.today = new Date(
this.today.getFullYear(),
this.today.getMonth(),
this.today.getDate(),
this.selectDay = new Date(
this.selectDay.getFullYear(),
this.selectDay.getMonth(),
this.selectDay.getDate(),
)
// 开始日期
... ... @@ -137,24 +138,24 @@ export struct RMCalendar {
}
// 截止日期
if (!this.endDate) {
this.endDate = new Date(this.today.getFullYear() + 10, 11, 31)
this.endDate = new Date(this.selectDay.getFullYear() + 10, 11, 31)
}
if (this.today.getTime() < this.startDate.getTime()) {
this.startDay.setTime(this.startDate.getTime())
} else if (this.today.getTime() > this.endDate.getTime()) {
this.startDay.setTime(this.endDate.getTime())
if (this.selectDay.getTime() < this.startDate.getTime()) {
this.selectDay.setTime(this.startDate.getTime())
} else if (this.selectDay.getTime() > this.endDate.getTime()) {
this.selectDay.setTime(this.endDate.getTime())
} else {
this.startDay.setTime(this.today.getTime())
this.selectDay.setTime(this.selectDay.getTime())
}
}
aboutToAppear() {
this.initAttr()
let temp = new RMCalendarBean()
temp.time = this.today.getTime()
temp.time = this.selectDay.getTime()
this.selectItem = temp
this.calcDatas()
this.calcData()
}
/**
... ... @@ -163,12 +164,12 @@ export struct RMCalendar {
private nextMonth() {
// this.dates.slice(0, this.dates.length)
this.dates = []
const beforDate = new Date(this.startDay.getFullYear(), this.startDay.getMonth())
this.startDay.setMonth(this.startDay.getMonth() + 1)
const beforDate = new Date(this.selectDay.getFullYear(), this.selectDay.getMonth())
this.selectDay.setMonth(this.selectDay.getMonth() + 1)
if (this.onMonthChange) {
this.onMonthChange(new Date(this.startDay.getFullYear(), this.startDay.getMonth()), beforDate)
this.onMonthChange(new Date(this.selectDay.getFullYear(), this.selectDay.getMonth()), beforDate)
}
this.calcDatas()
this.calcData()
}
/**
... ... @@ -177,60 +178,57 @@ export struct RMCalendar {
private preMonth() {
// this.dates.slice(0, this.dates.length)
this.dates = []
const beforDate = new Date(this.startDay.getFullYear(), this.startDay.getMonth())
this.startDay.setMonth(this.startDay.getMonth() - 1)
const beforDate = new Date(this.selectDay.getFullYear(), this.selectDay.getMonth())
this.selectDay.setMonth(this.selectDay.getMonth() - 1)
if (this.onMonthChange) {
this.onMonthChange(new Date(this.startDay.getFullYear(), this.startDay.getMonth()), beforDate)
this.onMonthChange(new Date(this.selectDay.getFullYear(), this.selectDay.getMonth()), beforDate)
}
this.calcDatas()
this.calcData()
}
/**
* 具体计算
*/
private calcDatas() {
const startDay = this.startDay
this.title = `${startDay.getFullYear()}年${startDay.getMonth() + 1}月`
startDay.setDate(1)
private calcData() {
if (startDay.getFullYear() < this.startDate.getFullYear()
|| (startDay.getFullYear() == this.startDate.getFullYear() && startDay.getMonth() <= this.startDate.getMonth())) {
this.title = `${this.selectDay.getFullYear()}年${this.selectDay.getMonth() + 1}月`
this.selectDay.setDate(1)
if (this.selectDay.getFullYear() < this.startDate.getFullYear()
|| (this.selectDay.getFullYear() == this.startDate.getFullYear() && this.selectDay.getMonth() <= this.startDate.getMonth())) {
this.hasPre = false
} else {
this.hasPre = true
}
if (startDay.getFullYear() > this.endDate.getFullYear()
|| (startDay.getFullYear() == this.endDate.getFullYear() && startDay.getMonth() >= this.endDate.getMonth())) {
if (this.selectDay.getFullYear() > this.endDate.getFullYear()
|| (this.selectDay.getFullYear() == this.endDate.getFullYear() && this.selectDay.getMonth() >= this.endDate.getMonth())) {
this.hasNext = false
} else {
this.hasNext = true
}
// 计算第一个月
// 获取第一个月总天数
let endDay: Date = new Date(
startDay.getFullYear(),
startDay.getMonth() + 1,
// 创建一个整月的日期，获取一个月总天数
let selectDate: Date = new Date(
this.selectDay.getFullYear(),
this.selectDay.getMonth() + 1,
0, 23, 59, 59)
let tempDate: Date = new Date(
startDay.getFullYear(),
startDay.getMonth(),
startDay.getDate()
this.selectDay.getFullYear(),
this.selectDay.getMonth(),
this.selectDay.getDate()
)
//获取当月的总天数
const count = selectDate.getDate()
//当前日期是周几
const preCount = this.selectDay.getDay()
const totalCount = count + preCount
const count = endDay.getDate()
const preCount = startDay.getDay()
// const nextCount = 6 - endDay.getDay()
const nextCount = 0
const finilCount = count + preCount + nextCount
// 补齐上一个月
tempDate.setDate(tempDate.getDate() - preCount)
// 补齐上一个月差的天数，需要在当月展示的部分，下面计算日期循环加1天
tempDate.setDate(this.selectDay.getDate() - preCount)
// 添加日期
for (let index = 0; index < finilCount; index++) {
// 添加当月需要展示的日期
for (let index = 0; index < totalCount; index++) {
let item = new RMCalendarBean(
tempDate.getFullYear(),
tempDate.getMonth(),
... ...
... ... @@ -7,12 +7,12 @@ export struct RMCalenderCell {
itemFontSize: Length = 0
itemFontColor: ResourceColor = {} as ResourceColor
itemFontWeight: FontWeight = FontWeight.Normal
todayFontColor: ResourceColor = {} as ResourceColor
selectDayFontColor: ResourceColor = {} as ResourceColor
selectFontColor: ResourceColor = {} as ResourceColor
selectItemBgColor: ResourceColor = {} as ResourceColor
disabledFontColor: ResourceColor = {} as ResourceColor
// 今日时间戳
today: number = 0
selectDay: number = 0
@Link selectItem: RMCalendarBean
@Link selectedDates: Array<RMCalendarBean>
@Prop hasPre: boolean
... ... @@ -20,7 +20,7 @@ export struct RMCalenderCell {
@ObjectLink item: RMCalendarBean
// 自定义每一项布局
cellLayout?: (item: RMCalendarBean) => void
todayLayout?: (item: RMCalendarBean) => void
selectDayLayout?: (item: RMCalendarBean) => void
cellClick?: (item: RMCalendarBean) => void
disableClick?: (item: RMCalendarBean) => void
... ... @@ -43,8 +43,6 @@ export struct RMCalenderCell {
return this.disabledFontColor
} else if (this.selectItem && this.selectItem.time == this.item.time) {
return this.selectFontColor
} else if (this.item.time == this.today) {
return this.todayFontColor
}
return this.itemFontColor
}
... ... @@ -140,4 +138,5 @@ export struct RMCalenderCell {
}
})
}
}
\ No newline at end of file
... ...