修改日历组件
This commit is contained in:
筱野
@@ -1,117 +0,0 @@
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import { View, Text, Image } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
import images from '@/config/images'
|
||||
interface CalendarCardProps {
|
||||
value?: Date
|
||||
minDate?: Date
|
||||
maxDate?: Date
|
||||
onChange?: (date: Date) => void
|
||||
onNext?: (date: Date) => void
|
||||
onHeaderClick?: (date: Date) => void
|
||||
}
|
||||
|
||||
const startOfMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth(), 1)
|
||||
const endOfMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth() + 1, 0)
|
||||
const addMonths = (date: Date, delta: number) => new Date(date.getFullYear(), date.getMonth() + delta, 1)
|
||||
|
||||
const formatHeader = (date: Date) => `${date.getMonth() + 1}月 ${date.getFullYear()}`
|
||||
|
||||
const CalendarCard: React.FC<CalendarCardProps> = ({
|
||||
value,
|
||||
minDate,
|
||||
maxDate,
|
||||
onChange,
|
||||
onHeaderClick
|
||||
}) => {
|
||||
const today = new Date()
|
||||
const [current, setCurrent] = useState<Date>(value || startOfMonth(today))
|
||||
const [selected, setSelected] = useState<Date>(value || today)
|
||||
|
||||
|
||||
const firstDay = useMemo(() => startOfMonth(current), [current])
|
||||
const lastDay = useMemo(() => endOfMonth(current), [current])
|
||||
|
||||
const days = useMemo(() => {
|
||||
const startWeekday = firstDay.getDay() // 0 周日
|
||||
const prevPadding = startWeekday // 周日为第一列
|
||||
const total = prevPadding + lastDay.getDate()
|
||||
const rows = Math.ceil(total / 7)
|
||||
const grid: (Date | null)[] = []
|
||||
for (let i = 0; i < rows * 7; i++) {
|
||||
const day = i - prevPadding + 1
|
||||
if (day < 1 || day > lastDay.getDate()) {
|
||||
grid.push(null)
|
||||
} else {
|
||||
grid.push(new Date(current.getFullYear(), current.getMonth(), day))
|
||||
}
|
||||
}
|
||||
return grid
|
||||
}, [firstDay, lastDay, current])
|
||||
|
||||
const isDisabled = (d: Date) => {
|
||||
if (minDate && d < minDate) return true
|
||||
if (maxDate && d > maxDate) return true
|
||||
return false
|
||||
}
|
||||
|
||||
const gotoMonth = (delta: number) => setCurrent(prev => addMonths(prev, delta))
|
||||
|
||||
const handleHeaderClick = () => {
|
||||
onHeaderClick && onHeaderClick(current)
|
||||
}
|
||||
|
||||
const handleSelectDay = (d: Date | null) => {
|
||||
if (!d || isDisabled(d)) return
|
||||
setSelected(d)
|
||||
onChange && onChange(d)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<View className={styles['calendar-card']}>
|
||||
<View className={styles['header']}>
|
||||
<View className={styles['header-left']} onClick={handleHeaderClick}>
|
||||
<Text className={styles['header-text']}>{formatHeader(current)}</Text>
|
||||
<Image src={images.ICON_RIGHT_MAX} className={`${styles['month-arrow']}}`} onClick={() => gotoMonth(1)} />
|
||||
</View>
|
||||
<View className={styles['header-actions']}>
|
||||
<Image src={images.ICON_RIGHT_MAX} className={`${styles['arrow']} ${styles['left']}`} onClick={() => gotoMonth(-1)} />
|
||||
<Image src={images.ICON_RIGHT_MAX} className={`${styles['arrow']}}`} onClick={() => gotoMonth(1)} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className={styles['week-row']}>
|
||||
{['周日','周一','周二','周三','周四','周五','周六'].map((w) => (
|
||||
<Text key={w} className={styles['week-item']}>{w}</Text>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View className={styles['grid']}>
|
||||
{days.map((d, idx) => {
|
||||
const isSelected = !!(d && selected && d.toDateString() === new Date(selected.getFullYear(), selected.getMonth(), selected.getDate()).toDateString())
|
||||
return (
|
||||
<View
|
||||
key={idx}
|
||||
className={`${styles['cell']} ${!d ? styles['empty'] : ''} ${d && isDisabled(d) ? styles['disabled'] : ''} `}
|
||||
onClick={() => handleSelectDay(d)}
|
||||
>
|
||||
{d ? <Text className={`${styles['cell-text']} ${isSelected ? styles['selected'] : ''}`}>{d.getDate()}</Text> : null}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
|
||||
|
||||
|
||||
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default CalendarCard
|
||||
@@ -1,130 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import CommonPopup from '@/components/CommonPopup'
|
||||
import CalendarCard from './CalendarCard'
|
||||
import DateTimePicker from '@/components/DateTimePicker'
|
||||
import HourMinutePicker from '@/components/HourMinutePicker'
|
||||
export interface DialogCalendarCardProps {
|
||||
value?: Date
|
||||
minDate?: Date
|
||||
maxDate?: Date
|
||||
onChange?: (date: Date) => void
|
||||
onNext?: (date: Date) => void
|
||||
visible: boolean
|
||||
onClose: () => void
|
||||
title?: React.ReactNode
|
||||
}
|
||||
|
||||
const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
|
||||
visible,
|
||||
onClose,
|
||||
title,
|
||||
value,
|
||||
minDate,
|
||||
maxDate,
|
||||
onChange,
|
||||
onNext
|
||||
}) => {
|
||||
const [selected, setSelected] = useState<Date>(value || new Date())
|
||||
const [type, setType] = useState<'year' | 'month' | 'time'>('year');
|
||||
const [selectedHour, setSelectedHour] = useState(8)
|
||||
const [selectedMinute, setSelectedMinute] = useState(0)
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (type === 'year') {
|
||||
// 年份选择完成后，进入月份选择
|
||||
setType('time')
|
||||
} else if (type === 'month') {
|
||||
// 月份选择完成后，进入时间选择
|
||||
setType('year')
|
||||
} else if (type === 'time') {
|
||||
// 时间选择完成后，调用onNext回调
|
||||
const finalDate = new Date(selected.getFullYear(), selected.getMonth(), selected.getDate(), selectedHour, selectedMinute)
|
||||
console.log('finalDate', finalDate)
|
||||
if (onChange) onChange(finalDate)
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
const handleChange = (d: Date) => {
|
||||
console.log('handleChange', d)
|
||||
setSelected(d)
|
||||
// if (onChange) onChange(d)
|
||||
}
|
||||
const onHeaderClick = (date: Date) => {
|
||||
console.log('onHeaderClick', date)
|
||||
setSelected(date)
|
||||
setType('month')
|
||||
}
|
||||
const getConfirmText = () => {
|
||||
if (type === 'time' || type === 'month') return '完成'
|
||||
return '下一步'
|
||||
}
|
||||
const handleDateTimePickerChange = (year: number, month: number) => {
|
||||
console.log('year', year)
|
||||
console.log('month', month)
|
||||
setSelected(new Date(year, month - 1, 1))
|
||||
}
|
||||
const dialogClose = () => {
|
||||
if (type === 'month') {
|
||||
setType('year')
|
||||
} else if (type === 'time') {
|
||||
setType('year')
|
||||
} else {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
setSelected(value || new Date())
|
||||
if (visible) {
|
||||
setType('year')
|
||||
setSelectedHour(8)
|
||||
setSelectedMinute(0)
|
||||
}
|
||||
}, [value, visible])
|
||||
|
||||
|
||||
return (
|
||||
<CommonPopup
|
||||
visible={visible}
|
||||
onClose={dialogClose}
|
||||
showHeader={!!title}
|
||||
title={title}
|
||||
hideFooter={false}
|
||||
cancelText='取消'
|
||||
confirmText={getConfirmText()}
|
||||
onConfirm={handleConfirm}
|
||||
position='bottom'
|
||||
round
|
||||
zIndex={1000}
|
||||
>
|
||||
{
|
||||
type === 'year' && <CalendarCard
|
||||
value={selected}
|
||||
minDate={minDate}
|
||||
maxDate={maxDate}
|
||||
onChange={handleChange}
|
||||
onHeaderClick={onHeaderClick}
|
||||
/>
|
||||
}
|
||||
{
|
||||
type === 'month' && <DateTimePicker
|
||||
onChange={handleDateTimePickerChange}
|
||||
defaultYear={selected.getFullYear()}
|
||||
defaultMonth={selected.getMonth() + 1}
|
||||
/>
|
||||
}
|
||||
{
|
||||
type === 'time' && <HourMinutePicker
|
||||
onChange={(hour, minute) => {
|
||||
setSelectedHour(hour)
|
||||
setSelectedMinute(minute)
|
||||
}}
|
||||
defaultHour={selectedHour}
|
||||
defaultMinute={selectedMinute}
|
||||
/>
|
||||
}
|
||||
</CommonPopup>
|
||||
)
|
||||
}
|
||||
|
||||
export default DialogCalendarCard
|
||||
@@ -1,105 +0,0 @@
|
||||
.calendar-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 12px 12px 8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 9px 16px 11px 16px;
|
||||
height: 24px;
|
||||
}
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.header-text {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
.month-arrow{
|
||||
width: 8px
|
||||
}
|
||||
.arrow {
|
||||
width: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.arrow.left {
|
||||
left: 9px;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.week-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
padding: 0 0 4px 0;
|
||||
}
|
||||
.week-item {
|
||||
text-align: center;
|
||||
color: rgba(60, 60, 67, 0.30);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 8px 0;
|
||||
padding: 4px 0 16px;
|
||||
}
|
||||
.cell {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
.cell.empty {
|
||||
opacity: 0;
|
||||
}
|
||||
.cell.disabled {
|
||||
color: rgba(0,0,0,0.2);
|
||||
}
|
||||
.cell-text.selected {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
background: rgba(0,0,0,0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn.primary {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hm-placeholder {
|
||||
height: 240px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
export { default } from './CalendarCard'
|
||||
export { default as DialogCalendarCard } from './DialogCalendarCard'
|
||||
@@ -75,7 +75,7 @@
|
||||
height: 44px;
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.06);
|
||||
background: #000;
|
||||
border-radius: 12px;
|
||||
border-radius: 12px!important;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, PickerView, PickerViewColumn } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
|
||||
|
||||
export interface DateTimePickerProps {
|
||||
onChange: (year: number, month: number) => void
|
||||
defaultYear?: number
|
||||
defaultMonth?: number
|
||||
minYear?: number
|
||||
maxYear?: number
|
||||
}
|
||||
|
||||
const DateTimePicker: React.FC<DateTimePickerProps> = ({
|
||||
|
||||
onChange,
|
||||
defaultYear = new Date().getFullYear(),
|
||||
defaultMonth = new Date().getMonth() + 1,
|
||||
minYear = 2020,
|
||||
maxYear = 2030
|
||||
}) => {
|
||||
console.log('defaultYear', defaultYear)
|
||||
console.log('defaultMonth', defaultMonth)
|
||||
const [selectedYear, setSelectedYear] = useState(defaultYear)
|
||||
const [selectedMonth, setSelectedMonth] = useState(defaultMonth)
|
||||
|
||||
// 计算当前选项在数组中的索引
|
||||
const getYearIndex = (year: number) => year - minYear
|
||||
const getMonthIndex = (month: number) => month - 1
|
||||
|
||||
// 生成多列选择器的选项数据
|
||||
const pickerOptions = [
|
||||
// 年份列
|
||||
Array.from({ length: maxYear - minYear + 1 }, (_, index) => ({
|
||||
text: `${minYear + index}年`,
|
||||
value: minYear + index
|
||||
})),
|
||||
// 月份列
|
||||
Array.from({ length: 12 }, (_, index) => ({
|
||||
text: `${index + 1}月`,
|
||||
value: index + 1
|
||||
}))
|
||||
]
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedYear(defaultYear)
|
||||
setSelectedMonth(defaultMonth)
|
||||
}, [ defaultYear, defaultMonth])
|
||||
|
||||
const handlePickerChange = (event: any) => {
|
||||
const values = event.detail.value
|
||||
if (values && values.length >= 2) {
|
||||
// 根据索引获取实际值
|
||||
const yearIndex = values[0]
|
||||
const monthIndex = values[1]
|
||||
const year = minYear + yearIndex
|
||||
const month = monthIndex + 1
|
||||
setSelectedYear(year)
|
||||
setSelectedMonth(month)
|
||||
onChange(year, month)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles['date-time-picker-overlay']} >
|
||||
<View className={styles['date-time-picker-popup']} onClick={(e) => e.stopPropagation()}>
|
||||
{/* 拖拽手柄 */}
|
||||
<View className={styles['drag-handle']} />
|
||||
|
||||
{/* 时间选择器 */}
|
||||
<View className={styles['picker-container']}>
|
||||
{/* 多列选择器 */}
|
||||
<View className={styles['picker-wrapper']}>
|
||||
<PickerView
|
||||
value={[getYearIndex(selectedYear), getMonthIndex(selectedMonth)]}
|
||||
onChange={handlePickerChange}
|
||||
className={styles['multi-column-picker']}
|
||||
>
|
||||
<PickerViewColumn className={styles['picker-column']}>
|
||||
{pickerOptions[0].map((option, index) => (
|
||||
<View key={option.value} className={styles['picker-item']}>
|
||||
<Text className={styles['picker-item-text']}>{option.text}</Text>
|
||||
</View>
|
||||
))}
|
||||
</PickerViewColumn>
|
||||
<PickerViewColumn className={styles['picker-column']}>
|
||||
{pickerOptions[1].map((option, index) => (
|
||||
<View key={option.value} className={styles['picker-item']}>
|
||||
<Text className={styles['picker-item-text']}>{option.text}</Text>
|
||||
</View>
|
||||
))}
|
||||
</PickerViewColumn>
|
||||
</PickerView>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default DateTimePicker
|
||||
@@ -1,89 +0,0 @@
|
||||
/* 日期选择器弹出层样式 */
|
||||
.date-time-picker-popup {
|
||||
.common-popup-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-handle {
|
||||
width: 32px;
|
||||
height: 4px;
|
||||
background: #e0e0e0;
|
||||
border-radius: 2px;
|
||||
margin: 12px auto;
|
||||
}
|
||||
|
||||
.picker-container {
|
||||
padding: 26px 16px 0 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.picker-header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.picker-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.picker-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.multi-column-picker {
|
||||
width: 100%;
|
||||
height: 216px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: none;
|
||||
/* 自定义选择器样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 选中项指示器 */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
background: rgba(22, 24, 35, 0.05);
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
color: #161823;
|
||||
transition: all 0.3s ease;
|
||||
&.picker-item-active {
|
||||
color: rgba(22, 24, 35, 0.05);
|
||||
font-weight: 600;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.picker-column {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.picker-item-text {
|
||||
font-size: 16px;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
import DateTimePicker from './DateTimePicker'
|
||||
export default DateTimePicker
|
||||
151
src/components/Picker/CalendarDialog/DialogCalendarCard.tsx
Normal file
151
src/components/Picker/CalendarDialog/DialogCalendarCard.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import CommonPopup from '@/components/CommonPopup'
|
||||
import { View } from '@tarojs/components'
|
||||
import CalendarUI, { CalendarUIRef } from '@/components/Picker/CalendarUI/CalendarUI'
|
||||
import { PickerCommon, PickerCommonRef } from '@/components/Picker'
|
||||
import dayjs from 'dayjs'
|
||||
import styles from './index.module.scss'
|
||||
export interface DialogCalendarCardProps {
|
||||
value?: Date
|
||||
onChange?: (date: Date) => void
|
||||
visible: boolean
|
||||
onClose: () => void
|
||||
title?: React.ReactNode
|
||||
}
|
||||
|
||||
const DialogCalendarCard: React.FC<DialogCalendarCardProps> = ({
|
||||
visible,
|
||||
onClose,
|
||||
title,
|
||||
value,
|
||||
onChange,
|
||||
}) => {
|
||||
const [selected, setSelected] = useState<Date>(value || new Date())
|
||||
const calendarRef = useRef<CalendarUIRef>(null);
|
||||
const [type, setType] = useState<'year' | 'month' | 'time'>('year');
|
||||
const [selectedHour, setSelectedHour] = useState(8)
|
||||
const [selectedMinute, setSelectedMinute] = useState(0)
|
||||
const pickerRef = useRef<PickerCommonRef>(null);
|
||||
const hourMinutePickerRef = useRef<PickerCommonRef>(null);
|
||||
const [pendingJump, setPendingJump] = useState<{ year: number; month: number } | null>(null)
|
||||
const handleConfirm = () => {
|
||||
if (type === 'year') {
|
||||
// 年份选择完成后，进入月份选择
|
||||
setType('time')
|
||||
} else if (type === 'month') {
|
||||
// 月份选择完成后，进入时间选择
|
||||
const value = pickerRef.current?.getValue()
|
||||
if (value) {
|
||||
const year = value[0] as number
|
||||
const month = value[1] as number
|
||||
setSelected(new Date(year, month - 1, 1))
|
||||
setPendingJump({ year, month })
|
||||
}
|
||||
setType('year')
|
||||
} else if (type === 'time') {
|
||||
// 时间选择完成后，调用onNext回调
|
||||
const value = hourMinutePickerRef.current?.getValue()
|
||||
if (value) {
|
||||
const hour = value[0] as number
|
||||
const minute = value[1] as number
|
||||
setSelectedHour(hour)
|
||||
setSelectedMinute(minute)
|
||||
const finalDate = new Date(dayjs(selected).format('YYYY-MM-DD') + ' ' + hour + ':' + minute)
|
||||
if (onChange) onChange(finalDate)
|
||||
}
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
const handleChange = (d: Date | Date[]) => {
|
||||
if (Array.isArray(d)) {
|
||||
setSelected(d[0])
|
||||
} else {
|
||||
setSelected(d)
|
||||
}
|
||||
}
|
||||
const onHeaderClick = (date: Date) => {
|
||||
setSelected(date)
|
||||
setType('month')
|
||||
}
|
||||
const getConfirmText = () => {
|
||||
if (type === 'time' || type === 'month') return '完成'
|
||||
return '下一步'
|
||||
}
|
||||
const handleDateTimePickerChange = (value: (string | number)[]) => {
|
||||
const year = value[0] as number
|
||||
const month = value[1] as number
|
||||
setSelected(new Date(year, month - 1, 1))
|
||||
}
|
||||
const dialogClose = () => {
|
||||
if (type === 'month') {
|
||||
setType('year')
|
||||
} else if (type === 'time') {
|
||||
setType('year')
|
||||
} else {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
if (visible && value) {
|
||||
setSelected(value || new Date())
|
||||
setSelectedHour(value ? dayjs(value).hour() : 8)
|
||||
setSelectedMinute(value ? dayjs(value).minute() : 0)
|
||||
}
|
||||
}, [value, visible])
|
||||
|
||||
useEffect(() => {
|
||||
if (type === 'year' && pendingJump && calendarRef.current) {
|
||||
calendarRef.current.jumpTo(pendingJump.year, pendingJump.month)
|
||||
setPendingJump(null)
|
||||
}
|
||||
}, [type, pendingJump])
|
||||
|
||||
|
||||
return (
|
||||
<CommonPopup
|
||||
visible={visible}
|
||||
onClose={dialogClose}
|
||||
showHeader={!!title}
|
||||
title={title}
|
||||
hideFooter={false}
|
||||
cancelText='取消'
|
||||
confirmText={getConfirmText()}
|
||||
onConfirm={handleConfirm}
|
||||
position='bottom'
|
||||
round
|
||||
zIndex={1000}
|
||||
>
|
||||
{
|
||||
type === 'year' &&
|
||||
<View className={styles['calendar-container']}>
|
||||
<CalendarUI
|
||||
ref={calendarRef}
|
||||
value={selected}
|
||||
onChange={handleChange}
|
||||
showQuickActions={false}
|
||||
onHeaderClick={onHeaderClick}
|
||||
/></View>
|
||||
}
|
||||
{
|
||||
type === 'month' && <PickerCommon
|
||||
ref={pickerRef}
|
||||
onChange={handleDateTimePickerChange}
|
||||
type="month"
|
||||
value={[selected.getFullYear(), selected.getMonth() + 1]}
|
||||
/>
|
||||
|
||||
}
|
||||
{
|
||||
type === 'time' && <PickerCommon
|
||||
ref={hourMinutePickerRef}
|
||||
type="hour"
|
||||
value={[selectedHour, selectedMinute]}
|
||||
/>
|
||||
|
||||
}
|
||||
</CommonPopup>
|
||||
)
|
||||
}
|
||||
|
||||
export default DialogCalendarCard
|
||||
3
src/components/Picker/CalendarDialog/index.module.scss
Normal file
3
src/components/Picker/CalendarDialog/index.module.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.calendar-container{
|
||||
padding: 26px 12px 8px;
|
||||
}
|
||||
211
src/components/Picker/CalendarUI/CalendarUI.tsx
Normal file
211
src/components/Picker/CalendarUI/CalendarUI.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
import React, { useState, useEffect, useRef, useImperativeHandle } from 'react'
|
||||
import { CalendarCard } from '@nutui/nutui-react-taro'
|
||||
import { View, Text, Image } from '@tarojs/components'
|
||||
import images from '@/config/images'
|
||||
import styles from './index.module.scss'
|
||||
import { getMonth, getWeekend, getWeekendOfCurrentWeek } from '@/utils/timeUtils'
|
||||
import { PopupPicker } from '@/components/Picker/index'
|
||||
interface NutUICalendarProps {
|
||||
type?: 'single' | 'range' | 'multiple'
|
||||
value?: string | Date | String[] | Date[]
|
||||
defaultValue?: string | string[]
|
||||
onChange?: (value: Date | Date[]) => void,
|
||||
isBorder?: boolean
|
||||
showQuickActions?: boolean,
|
||||
onHeaderClick?: (date: Date) => void
|
||||
}
|
||||
|
||||
export interface CalendarUIRef {
|
||||
jumpTo: (year: number, month: number) => void
|
||||
}
|
||||
|
||||
const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(({
|
||||
type = 'single',
|
||||
value,
|
||||
onChange,
|
||||
isBorder = false,
|
||||
showQuickActions = true,
|
||||
onHeaderClick
|
||||
}, ref) => {
|
||||
// 根据类型初始化选中值
|
||||
// const getInitialValue = (): Date | Date[] => {
|
||||
// console.log(value,defaultValue,'today')
|
||||
|
||||
// if (typeof value === 'string' && value) {
|
||||
// return new Date(value)
|
||||
// }
|
||||
// if (Array.isArray(value) && value.length > 0) {
|
||||
// return value.map(item => new Date(item))
|
||||
// }
|
||||
// if (typeof defaultValue === 'string' && defaultValue) {
|
||||
// return new Date(defaultValue)
|
||||
// }
|
||||
// if (Array.isArray(defaultValue) && defaultValue.length > 0) {
|
||||
// return defaultValue.map(item => new Date(item))
|
||||
// }
|
||||
// const today = new Date();
|
||||
// if (type === 'multiple') {
|
||||
// return [today]
|
||||
// }
|
||||
// return today
|
||||
// }
|
||||
const startOfMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth(), 1)
|
||||
|
||||
const [selectedValue, setSelectedValue] = useState<Date | Date[]>()
|
||||
const [current, setCurrent] = useState<Date>(startOfMonth(new Date()))
|
||||
const calendarRef = useRef<any>(null)
|
||||
const [visible, setvisible] = useState(false)
|
||||
console.log('current', current)
|
||||
// 当外部 value 变化时更新内部状态
|
||||
useEffect(() => {
|
||||
if (Array.isArray(value) && value.length > 0) {
|
||||
setSelectedValue(value.map(item => new Date(item)))
|
||||
setCurrent(new Date(value[0]))
|
||||
}
|
||||
if ((typeof value === 'string' || value instanceof Date) && value) {
|
||||
setSelectedValue(new Date(value))
|
||||
setCurrent(new Date(value))
|
||||
}
|
||||
}, [value])
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
jumpTo: (year: number, month: number) => {
|
||||
calendarRef.current?.jumpTo(year, month)
|
||||
}
|
||||
}))
|
||||
|
||||
const handleDateChange = (newValue: any) => {
|
||||
setSelectedValue(newValue)
|
||||
onChange?.(newValue as any)
|
||||
}
|
||||
const formatHeader = (date: Date) => `${getMonth(date)}`
|
||||
|
||||
const handlePageChange = (data: { year: number; month: number }) => {
|
||||
// 月份切换时的处理逻辑，如果需要的话
|
||||
console.log('月份切换:', data)
|
||||
}
|
||||
|
||||
const gotoMonth = (delta: number) => {
|
||||
const base = current instanceof Date ? new Date(current) : new Date()
|
||||
base.setMonth(base.getMonth() + delta)
|
||||
const next = startOfMonth(base)
|
||||
setCurrent(next)
|
||||
// 同步底部 CalendarCard 的月份
|
||||
try {
|
||||
calendarRef.current?.jump?.(delta)
|
||||
} catch (e) {
|
||||
console.warn('CalendarCardRef jump 调用失败', e)
|
||||
}
|
||||
handlePageChange({ year: next.getFullYear(), month: next.getMonth() + 1 })
|
||||
}
|
||||
|
||||
const handleHeaderClick = () => {
|
||||
onHeaderClick && onHeaderClick(current)
|
||||
setvisible(true)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const syncMonthTo = (anchor: Date) => {
|
||||
// 计算从 current 到目标 anchor 所在月份的偏移，调用 jump(delta)
|
||||
const monthsDelta = (anchor.getFullYear() - current.getFullYear()) * 12 + (anchor.getMonth() - current.getMonth())
|
||||
if (monthsDelta !== 0) {
|
||||
gotoMonth(monthsDelta)
|
||||
}
|
||||
}
|
||||
const renderDay = (day: any) => {
|
||||
const { date, month, year} = day;
|
||||
const today = new Date()
|
||||
if (date === today.getDate() && month === today.getMonth() + 1 && year === today.getFullYear()) {
|
||||
return (
|
||||
<View class="day-container">
|
||||
{date}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
return date
|
||||
}
|
||||
|
||||
const selectWeekend = () => {
|
||||
const [start, end] = getWeekend()
|
||||
setSelectedValue([start, end])
|
||||
syncMonthTo(start)
|
||||
onChange?.([start, end])
|
||||
}
|
||||
const selectWeek = () => {
|
||||
const dayList = getWeekendOfCurrentWeek(7)
|
||||
setSelectedValue(dayList)
|
||||
syncMonthTo(dayList[0])
|
||||
onChange?.(dayList)
|
||||
}
|
||||
const selectMonth = () => {
|
||||
const dayList = getWeekendOfCurrentWeek(30)
|
||||
setSelectedValue(dayList)
|
||||
syncMonthTo(dayList[0])
|
||||
onChange?.(dayList)
|
||||
}
|
||||
|
||||
const handleMonthChange = (value: any) => {
|
||||
const [year, month] = value;
|
||||
const newDate = new Date(year, month - 1, 1);
|
||||
setCurrent(newDate);
|
||||
calendarRef.current?.jumpTo(year, month)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<View>
|
||||
{/* 快速操作行 */}
|
||||
{
|
||||
showQuickActions &&
|
||||
<View className={styles['quick-actions']}>
|
||||
<View className={styles['quick-action']} onClick={selectWeekend}>本周末</View>
|
||||
<View className={styles['quick-action']} onClick={selectWeek}>一周内</View>
|
||||
<View className={styles['quick-action']} onClick={selectMonth}>一个月</View>
|
||||
</View>
|
||||
}
|
||||
<View className={`${styles['calendar-card']} ${isBorder ? styles['border'] : ''}`}>
|
||||
{/* 自定义头部显示周一到周日 */}
|
||||
<View className={styles['header']}>
|
||||
<View className={styles['header-left']} onClick={handleHeaderClick}>
|
||||
<Text className={styles['header-text']}>{formatHeader(current as Date)}</Text>
|
||||
<Image src={images.ICON_RIGHT_MAX} className={`${styles['month-arrow']}`} onClick={() => gotoMonth(1)} />
|
||||
</View>
|
||||
<View className={styles['header-actions']}>
|
||||
<View className={styles['arrow-left-container']} onClick={() => gotoMonth(-1)}>
|
||||
<Image src={images.ICON_RIGHT_MAX} className={`${styles['arrow']} ${styles['left']}`} />
|
||||
</View>
|
||||
<View className={styles['arrow-right-container']} onClick={() => gotoMonth(1)}>
|
||||
<Image src={images.ICON_RIGHT_MAX} className={`${styles['arrow']}`} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles['week-header']}>
|
||||
{[ '周日', '周一', '周二', '周三', '周四', '周五', '周六'].map((day) => (
|
||||
<Text key={day} className={styles['week-day']}>
|
||||
{day}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* NutUI CalendarCard 组件 */}
|
||||
<CalendarCard
|
||||
ref={calendarRef}
|
||||
type={type}
|
||||
value={selectedValue}
|
||||
renderDay={renderDay}
|
||||
onChange={handleDateChange}
|
||||
onPageChange={handlePageChange}
|
||||
/>
|
||||
</View>
|
||||
{ visible && <PopupPicker
|
||||
visible={visible}
|
||||
setvisible={setvisible}
|
||||
value={[current.getFullYear(), current.getMonth() + 1]}
|
||||
type="month"
|
||||
onChange={(value) => handleMonthChange(value)}/> }
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
export default NutUICalendar
|
||||
292
src/components/Picker/CalendarUI/index.module.scss
Normal file
292
src/components/Picker/CalendarUI/index.module.scss
Normal file
@@ -0,0 +1,292 @@
|
||||
.calendar-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
&.border{
|
||||
border-radius: 12px;
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.12);
|
||||
margin-bottom: 6px;
|
||||
padding: 12px 12px 8px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 9px 4px 11px 4px;
|
||||
height: 24px;
|
||||
}
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.header-text {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
.header-actions {
|
||||
display: flex;
|
||||
width: 60px;
|
||||
.arrow-left-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 50%;
|
||||
flex: 1;
|
||||
}
|
||||
.arrow-right-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 50%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.month-arrow{
|
||||
width: 8px;
|
||||
height: 24px;
|
||||
}
|
||||
.arrow {
|
||||
width: 10px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.arrow.left {
|
||||
left: 9px;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.week-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
padding: 0 0 4px 0;
|
||||
}
|
||||
.week-item {
|
||||
text-align: center;
|
||||
color: rgba(60, 60, 67, 0.30);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// 新增的周一到周日头部样式
|
||||
.week-header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
padding: 8px 0;
|
||||
}
|
||||
.week-day {
|
||||
text-align: center;
|
||||
color: rgba(60, 60, 67, 0.30);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 8px 0;
|
||||
padding: 4px 0 16px;
|
||||
}
|
||||
.cell {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.cell.empty {
|
||||
opacity: 0;
|
||||
}
|
||||
.cell.disabled {
|
||||
color: rgba(0,0,0,0.2);
|
||||
}
|
||||
.cell-text.selected {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// 时间段选择样式
|
||||
.cell-text.range-start {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cell-text.range-end {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
background: rgba(0,0,0,0.9);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cell-text.in-range {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
background: rgba(0,0,0,0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn.primary {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hm-placeholder {
|
||||
height: 240px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// CalendarRange 组件样式
|
||||
.calendar-range {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quick-select {
|
||||
display: flex;
|
||||
padding: 16px 12px 12px;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.quick-btn {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
border-radius: 18px;
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.quick-btn.active {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.quick-btn-text {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.quick-btn.active .quick-btn-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.quick-action {
|
||||
border-radius: 999px;
|
||||
border: 0.5px solid rgba(0, 0, 0, 0.12);
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
padding: 4px 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
// 隐藏 CalendarCard 默认头部
|
||||
:global {
|
||||
.nut-calendarcard {
|
||||
.nut-calendarcard-header {
|
||||
display: none !important;
|
||||
}
|
||||
.nut-calendarcard-content{
|
||||
.nut-calendarcard-days{
|
||||
&:first-child{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.nut-calendarcard-day{
|
||||
margin-bottom:0px!important;
|
||||
height: 44px;
|
||||
width: 44px!important;
|
||||
&.active{
|
||||
background-color: #000!important;
|
||||
color: #fff!important;
|
||||
height: 44px;
|
||||
border-radius: 22px!important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px!important;
|
||||
font-size: 24px!important;
|
||||
.day-container{
|
||||
background-color: transparent!important;
|
||||
}
|
||||
}
|
||||
&.weekend{
|
||||
color: rgb(0,0,0)!important;
|
||||
&.active{
|
||||
color: #fff!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nut-calendarcard-day-inner{
|
||||
font-size: 20px;
|
||||
.day-container{
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 22px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
86
src/components/Picker/Picker.tsx
Normal file
86
src/components/Picker/Picker.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import React, { useState, useCallback, useEffect } from 'react'
|
||||
import { Picker, ConfigProvider } from '@nutui/nutui-react-taro'
|
||||
import { View } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface PickerOption {
|
||||
text: string | number
|
||||
value: string | number
|
||||
}
|
||||
|
||||
interface PickerProps {
|
||||
visible: boolean
|
||||
options?: PickerOption[][]
|
||||
defaultValue?: (string | number)[]
|
||||
onConfirm?: (options: PickerOption[], values: (string | number)[]) => void
|
||||
onChange?: (options: PickerOption[], values: (string | number)[], columnIndex: number) => void
|
||||
}
|
||||
|
||||
const CustomPicker = ({
|
||||
visible,
|
||||
options = [],
|
||||
defaultValue = [],
|
||||
onConfirm,
|
||||
onChange
|
||||
}: PickerProps) => {
|
||||
// 使用内部状态管理当前选中的值
|
||||
const [currentValue, setCurrentValue] = useState<(string | number)[]>(defaultValue)
|
||||
|
||||
// 当外部 defaultValue 变化时，同步更新内部状态
|
||||
useEffect(() => {
|
||||
setCurrentValue(defaultValue)
|
||||
}, [defaultValue])
|
||||
|
||||
const confirmPicker = (
|
||||
options: PickerOption[],
|
||||
values: (string | number)[]
|
||||
) => {
|
||||
let description = ''
|
||||
options.forEach((option: any) => {
|
||||
description += ` ${option.text}`
|
||||
})
|
||||
|
||||
if (onConfirm) {
|
||||
onConfirm(options, values)
|
||||
}
|
||||
}
|
||||
|
||||
const changePicker = useCallback((options: any[], values: any, columnIndex: number) => {
|
||||
// 更新内部状态
|
||||
setCurrentValue(values)
|
||||
|
||||
if (onChange) {
|
||||
onChange(options, values, columnIndex)
|
||||
}
|
||||
}, [onChange])
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles['picker-container']}>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
nutuiPickerItemHeight: '48px',
|
||||
nutuiPickerItemActiveLineBorder: 'none',
|
||||
nutuiPickerItemTextColor: '#000',
|
||||
nutuiPickerItemFontSize: '20px',
|
||||
}}
|
||||
>
|
||||
<Picker
|
||||
visible={visible}
|
||||
options={options}
|
||||
value={currentValue}
|
||||
onChange={changePicker}
|
||||
popupProps={{
|
||||
overlay: false,
|
||||
round: true,
|
||||
zIndex: 1000,
|
||||
}}
|
||||
onConfirm={(list, values) => confirmPicker(list, values)}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default CustomPicker
|
||||
70
src/components/Picker/PickerCommon.tsx
Normal file
70
src/components/Picker/PickerCommon.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react'
|
||||
import Picker from './Picker'
|
||||
import { renderYearMonth, renderHourMinute } from './PickerData'
|
||||
interface PickerOption {
|
||||
text: string | number
|
||||
value: string | number
|
||||
}
|
||||
|
||||
interface PickerProps {
|
||||
options?: PickerOption[][]
|
||||
value?: (string | number)[]
|
||||
type?: 'month' | 'hour' | null
|
||||
onConfirm?: (options: PickerOption[], values: (string | number)[]) => void
|
||||
onChange?: ( value: (string | number)[] ) => void
|
||||
}
|
||||
|
||||
export interface PickerCommonRef {
|
||||
getValue: () => (string | number)[]
|
||||
setValue: (v: (string | number)[]) => void
|
||||
}
|
||||
|
||||
const PopupPicker = ({
|
||||
value = [],
|
||||
onChange,
|
||||
options = [],
|
||||
type = null
|
||||
}: PickerProps, ref: React.Ref<PickerCommonRef>) => {
|
||||
const [defaultValue, setDefaultValue] = useState<(string | number)[]>([])
|
||||
|
||||
const [defaultOptions, setDefaultOptions] = useState<PickerOption[][]>([])
|
||||
const changePicker = (options: any[], values: any, columnIndex: number) => {
|
||||
console.log('picker onChange', columnIndex, values, options)
|
||||
setDefaultValue(values)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (type === 'month') {
|
||||
setDefaultOptions(renderYearMonth())
|
||||
} else if (type === 'hour') {
|
||||
setDefaultOptions(renderHourMinute())
|
||||
} else {
|
||||
setDefaultOptions(options)
|
||||
}
|
||||
}, [type])
|
||||
|
||||
useEffect(() => {
|
||||
// 同步初始值到内部状态，供 getValue 使用
|
||||
setDefaultValue(value)
|
||||
}, [value])
|
||||
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
getValue: () => (defaultValue && defaultValue.length ? defaultValue : value),
|
||||
setValue: (v: (string | number)[]) => {
|
||||
setDefaultValue(v)
|
||||
},
|
||||
}), [defaultValue, value])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Picker
|
||||
visible={true}
|
||||
options={defaultOptions}
|
||||
defaultValue={defaultValue.length ? defaultValue : value}
|
||||
onChange={changePicker}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.forwardRef<PickerCommonRef, PickerProps>(PopupPicker)
|
||||
30
src/components/Picker/PickerData.js
Normal file
30
src/components/Picker/PickerData.js
Normal file
@@ -0,0 +1,30 @@
|
||||
export const renderYearMonth = (minYear = 2020, maxYear = 2099) => {
|
||||
return [
|
||||
// 年份列
|
||||
Array.from({ length: maxYear - minYear + 1 }, (_, index) => ({
|
||||
text: `${minYear + index}年`,
|
||||
value: minYear + index
|
||||
})),
|
||||
// 月份列
|
||||
Array.from({ length: 12 }, (_, index) => ({
|
||||
text: `${index + 1}月`,
|
||||
value: index + 1
|
||||
}))
|
||||
]
|
||||
}
|
||||
|
||||
export const renderHourMinute = (minHour = 0, maxHour = 23) => {
|
||||
// 生成小时和分钟的选项数据
|
||||
return [
|
||||
// 小时列
|
||||
Array.from({ length: maxHour - minHour + 1 }, (_, index) => ({
|
||||
text: `${minHour + index}时`,
|
||||
value: minHour + index
|
||||
})),
|
||||
// 分钟列 (5分钟间隔)
|
||||
Array.from({ length: 12 }, (_, index) => ({
|
||||
text: `${index * 5 < 10 ? '0' + index * 5 : index * 5}分`,
|
||||
value: index * 5
|
||||
}))
|
||||
]
|
||||
}
|
||||
90
src/components/Picker/PopupPicker.tsx
Normal file
90
src/components/Picker/PopupPicker.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react'
|
||||
import CommonPopup from '@/components/CommonPopup'
|
||||
import Picker from './Picker'
|
||||
import { renderYearMonth, renderHourMinute } from './PickerData'
|
||||
interface PickerOption {
|
||||
text: string | number
|
||||
value: string | number
|
||||
}
|
||||
|
||||
interface PickerProps {
|
||||
visible: boolean
|
||||
setvisible: (visible: boolean) => void
|
||||
options?: PickerOption[][]
|
||||
value?: (string | number)[]
|
||||
type?: 'month' | 'hour' | null
|
||||
onConfirm?: (options: PickerOption[], values: (string | number)[]) => void
|
||||
onChange?: ( value: (string | number)[] ) => void
|
||||
}
|
||||
|
||||
const PopupPicker = ({
|
||||
visible,
|
||||
setvisible,
|
||||
value = [],
|
||||
onConfirm,
|
||||
onChange,
|
||||
options = [],
|
||||
type = null
|
||||
}: PickerProps) => {
|
||||
|
||||
const [defaultValue, setDefaultValue] = useState<(string | number)[]>([])
|
||||
const [defaultOptions, setDefaultOptions] = useState<PickerOption[][]>([])
|
||||
const changePicker = (options: any[], values: any, columnIndex: number) => {
|
||||
if (onChange) {
|
||||
console.log('picker onChange', columnIndex, values, options)
|
||||
|
||||
setDefaultValue(values)
|
||||
}
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
console.log(defaultValue,'defaultValue');
|
||||
onChange(defaultValue)
|
||||
setvisible(false)
|
||||
}
|
||||
|
||||
const dialogClose = () => {
|
||||
setvisible(false)
|
||||
}
|
||||
useEffect(() => {
|
||||
if (type === 'month') {
|
||||
setDefaultOptions(renderYearMonth())
|
||||
} else if (type === 'hour') {
|
||||
setDefaultOptions(renderHourMinute())
|
||||
} else {
|
||||
setDefaultOptions(options)
|
||||
}
|
||||
}, [type])
|
||||
|
||||
// useEffect(() => {
|
||||
// if (value.length > 0 && defaultOptions.length > 0) {
|
||||
// setDefaultValue([...value])
|
||||
// }
|
||||
// }, [value, defaultOptions])
|
||||
return (
|
||||
<>
|
||||
<CommonPopup
|
||||
visible={visible}
|
||||
onClose={dialogClose}
|
||||
showHeader={false}
|
||||
title={null}
|
||||
hideFooter={false}
|
||||
cancelText='取消'
|
||||
confirmText='完成'
|
||||
onConfirm={handleConfirm}
|
||||
position='bottom'
|
||||
round
|
||||
zIndex={1000}
|
||||
>
|
||||
<Picker
|
||||
visible={visible}
|
||||
options={defaultOptions}
|
||||
defaultValue={value}
|
||||
onChange={changePicker}
|
||||
/>
|
||||
</CommonPopup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default PopupPicker
|
||||
25
src/components/Picker/index.module.scss
Normal file
25
src/components/Picker/index.module.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
.picker-container {
|
||||
:global{
|
||||
.nut-popup-round{
|
||||
position: relative!important;
|
||||
.nut-picker-control {
|
||||
display: none!important;
|
||||
}
|
||||
.nut-picker{
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 16px;
|
||||
right: 16px!important;
|
||||
width: calc(100% - 32px);
|
||||
height: 48px;
|
||||
background: rgba(22, 24, 35, 0.05);
|
||||
transform: translateY(-50%);
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
6
src/components/Picker/index.ts
Normal file
6
src/components/Picker/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export { default as CustomPicker } from './Picker'
|
||||
export { default as PopupPicker } from './PopupPicker'
|
||||
export { default as PickerCommon } from './PickerCommon'
|
||||
export type { PickerCommonRef } from './PickerCommon'
|
||||
export { default as CalendarUI } from './CalendarUI/CalendarUI'
|
||||
export { default as DialogCalendarCard } from './CalendarDialog/DialogCalendarCard'
|
||||
@@ -1,8 +1,9 @@
|
||||
import React, { useState } from 'react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, } from '@tarojs/components'
|
||||
import { getDate, getTime, getDateStr, getEndTime } from '@/utils/timeUtils'
|
||||
import DialogCalendarCard from '@/components/CalendarCard/DialogCalendarCard'
|
||||
import { DialogCalendarCard } from '@/components/index'
|
||||
import './TimeSelector.scss'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export interface TimeRange {
|
||||
start_time: string
|
||||
@@ -23,12 +24,38 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
|
||||
}) => {
|
||||
// 格式化日期显示
|
||||
const [visible, setVisible] = useState(false)
|
||||
const [currentTimeValue, setCurrentTimeValue] = useState<Date>(new Date())
|
||||
const [currentTimeType, setCurrentTimeType] = useState<'start' | 'end'>('start')
|
||||
const [showEndTime, setShowEndTime] = useState(false)
|
||||
const handleConfirm = (date: Date) => {
|
||||
console.log('选择的日期:', date)
|
||||
const start_time = getDateStr(date)
|
||||
const end_time = getEndTime(start_time)
|
||||
const start_time = currentTimeType === 'start' ? getDateStr(date) : value.start_time;
|
||||
const isLater = dayjs(value.start_time).isAfter(dayjs(value.end_time));
|
||||
if (isLater) {
|
||||
if (onChange) onChange({start_time, end_time: getEndTime(start_time)})
|
||||
return
|
||||
}
|
||||
const initEndTime = value.end_time ? value.end_time : getEndTime(start_time)
|
||||
const end_time = currentTimeType === 'end' ? getDateStr(date) : initEndTime;
|
||||
if (onChange) onChange({start_time, end_time})
|
||||
}
|
||||
const openPicker = (type: 'start' | 'end') => {
|
||||
setCurrentTimeValue(type === 'start' ? new Date(value.start_time) : new Date(value.end_time))
|
||||
setCurrentTimeType(type)
|
||||
setVisible(true)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (value.start_time && value.end_time) {
|
||||
const start_time = dayjs(value.start_time).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(value.end_time).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) {
|
||||
setShowEndTime(false)
|
||||
} else {
|
||||
setShowEndTime(true)
|
||||
}
|
||||
}
|
||||
}, [value])
|
||||
return (
|
||||
<View className='time-selector'>
|
||||
<View className='time-section'>
|
||||
@@ -37,7 +64,7 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
|
||||
<View className='time-label'>
|
||||
<View className='dot'></View>
|
||||
</View>
|
||||
<View className='time-content' onClick={() => setVisible(true)}>
|
||||
<View className='time-content' onClick={() => openPicker('start')}>
|
||||
<Text className='time-label'>开始时间</Text>
|
||||
<view className='time-text-wrapper'>
|
||||
<Text className='time-text'>{getDate(value.start_time)}</Text>
|
||||
@@ -51,9 +78,10 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
|
||||
<View className='time-label'>
|
||||
<View className='dot hollow'></View>
|
||||
</View>
|
||||
<View className='time-content'>
|
||||
<View className='time-content' onClick={() => openPicker('end')}>
|
||||
<Text className='time-label'>结束时间</Text>
|
||||
<view className='time-text-wrapper'>
|
||||
{showEndTime && (<Text className='time-text'>{getDate(value.end_time)}</Text>)}
|
||||
<Text className='time-text time-am'>{getTime(value.end_time)}</Text>
|
||||
</view>
|
||||
</View>
|
||||
@@ -61,6 +89,7 @@ const TimeSelector: React.FC<TimeSelectorProps> = ({
|
||||
</View>
|
||||
<DialogCalendarCard
|
||||
visible={visible}
|
||||
value={currentTimeValue}
|
||||
onChange={handleConfirm}
|
||||
onClose={() => setVisible(false)}
|
||||
/>
|
||||
|
||||
@@ -8,12 +8,12 @@ import NumberInterval from './NumberInterval'
|
||||
import TimeSelector from './TimeSelector'
|
||||
import TitleTextarea from './TitleTextarea'
|
||||
import CommonPopup from './CommonPopup'
|
||||
import DateTimePicker from './DateTimePicker/DateTimePicker'
|
||||
import TimePicker from './TimePicker/TimePicker'
|
||||
import CalendarCard, { DialogCalendarCard } from './CalendarCard'
|
||||
import { CalendarUI, DialogCalendarCard } from './Picker'
|
||||
import CommonDialog from './CommonDialog'
|
||||
import PublishMenu from './PublishMenu/PublishMenu'
|
||||
import UploadCover from './UploadCover'
|
||||
import { CustomPicker, PopupPicker } from './Picker'
|
||||
|
||||
export {
|
||||
ActivityTypeSwitch,
|
||||
@@ -25,12 +25,12 @@ import UploadCover from './UploadCover'
|
||||
TimeSelector,
|
||||
TitleTextarea,
|
||||
CommonPopup,
|
||||
DateTimePicker,
|
||||
TimePicker,
|
||||
CalendarCard,
|
||||
DialogCalendarCard,
|
||||
CalendarUI,
|
||||
CommonDialog,
|
||||
PublishMenu,
|
||||
UploadCover
|
||||
UploadCover,
|
||||
CustomPicker,
|
||||
PopupPicker
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { Popup } from "@nutui/nutui-react-taro";
|
||||
import Range from "../../components/Range";
|
||||
import Bubble from "../../components/Bubble";
|
||||
@@ -6,14 +7,15 @@ import TitleComponent from "@/components/Title";
|
||||
import { Button } from "@nutui/nutui-react-taro";
|
||||
import { Image } from "@tarojs/components";
|
||||
import img from "../../config/images";
|
||||
import dayjs from "dayjs";
|
||||
import { useListStore } from "src/store/listStore";
|
||||
import { FilterPopupProps } from "../../../types/list/types";
|
||||
import { CalendarUI } from "@/components";
|
||||
// 场地
|
||||
import CourtType from "@/components/CourtType";
|
||||
// 玩法
|
||||
import GamePlayType from "@/components/GamePlayType";
|
||||
import { useDictionaryActions } from "@/store/dictionaryStore";
|
||||
import { useMemo } from "react";
|
||||
|
||||
const FilterPopup = (props: FilterPopupProps) => {
|
||||
const {
|
||||
@@ -32,6 +34,14 @@ const FilterPopup = (props: FilterPopupProps) => {
|
||||
const { getDictionaryValue } = useDictionaryActions() || {};
|
||||
const { timeBubbleData } = store;
|
||||
|
||||
const [selectedDates, setSelectedDates] = useState<String[]>([])
|
||||
|
||||
const handleDateChange = (dates: Date[]) => {
|
||||
const dateArray = dates.map(date => dayjs(date).format('YYYY-MM-DD'))
|
||||
setSelectedDates(dateArray)
|
||||
console.log('选中的日期:', dateArray)
|
||||
}
|
||||
|
||||
const handleOptions = (dictionaryValue: []) => {
|
||||
return dictionaryValue?.map((item) => ({ label: item, value: item })) || [];
|
||||
};
|
||||
@@ -68,6 +78,12 @@ const FilterPopup = (props: FilterPopupProps) => {
|
||||
>
|
||||
<div className={styles.filterPopupWrapper}>
|
||||
{/* 时间气泡选项 */}
|
||||
<CalendarUI
|
||||
type="multiple"
|
||||
isBorder={true}
|
||||
value={selectedDates}
|
||||
onChange={handleDateChange}
|
||||
/>
|
||||
<Bubble
|
||||
options={timeBubbleData}
|
||||
value={filterOptions?.time}
|
||||
|
||||
@@ -29,6 +29,40 @@ export const getDate = (date: string): string => {
|
||||
return dayjs(date).format('YYYY年MM月DD日')
|
||||
}
|
||||
|
||||
export const getDay = (date?: string | Date): string => {
|
||||
if (!date) {
|
||||
return dayjs().format('YYYY-MM-DD')
|
||||
}
|
||||
return dayjs(date).format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
export const getMonth = (date?: string | Date): string => {
|
||||
if (!date) {
|
||||
return dayjs().format('MM月 YYYY')
|
||||
}
|
||||
return dayjs(date).format('MM月 YYYY')
|
||||
}
|
||||
|
||||
export const getWeekend = (date?: string | Date): [Date, Date] => {
|
||||
const today = dayjs(date);
|
||||
const currentDayOfWeek = today.day();
|
||||
console.log('currentDayOfWeek', currentDayOfWeek)
|
||||
const saturdayOffset = 6 - currentDayOfWeek
|
||||
const sundayOffset = 7 - currentDayOfWeek
|
||||
const sat = today.add(saturdayOffset, 'day')
|
||||
const sun = today.add(sundayOffset, 'day')
|
||||
return [sat.toDate(), sun.toDate()]
|
||||
}
|
||||
|
||||
export const getWeekendOfCurrentWeek = (days = 7): Date[] => {
|
||||
const dayList: Date[] = [];
|
||||
for (let i = 0; i < days; i++) {
|
||||
const day = dayjs().add(i, 'day').toDate()
|
||||
dayList.push(day)
|
||||
}
|
||||
return dayList
|
||||
}
|
||||
|
||||
export const getTime = (time: string): string => {
|
||||
const timeObj = dayjs(time)
|
||||
const hour = timeObj.hour()
|
||||
|
||||
Reference in New Issue
Block a user