修改日历
This commit is contained in:
@@ -16,6 +16,7 @@ export default defineAppConfig({
|
|||||||
root: 'publish_pages',
|
root: 'publish_pages',
|
||||||
pages: [
|
pages: [
|
||||||
"publishBall/index",
|
"publishBall/index",
|
||||||
|
"footballRules/index"
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
.common-popup {
|
.common-popup {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 99999!important;
|
z-index: 9999!important;
|
||||||
.common-popup__drag-handle-container {
|
.common-popup__drag-handle-container {
|
||||||
position: position;
|
position: position;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -39,10 +39,21 @@ const FilterPopup = (props: FilterPopupProps) => {
|
|||||||
// const [selectedDates, setSelectedDates] = useState<String[]>([])
|
// const [selectedDates, setSelectedDates] = useState<String[]>([])
|
||||||
|
|
||||||
const handleDateChange = (dates: Date[]) => {
|
const handleDateChange = (dates: Date[]) => {
|
||||||
const dateArray = dates.map(date => dayjs(date).format('YYYY-MM-DD'))
|
console.log(dates,'datesdatesdatesdatesdates');
|
||||||
|
let times: String[] = [];
|
||||||
|
if (Array.isArray(dates)) {
|
||||||
|
const currentDay = dayjs(dates[0]).format('YYYY-MM-DD');
|
||||||
|
if (filterOptions.dateRange.length === 0 || filterOptions.dateRange.length === 2) {
|
||||||
|
times.push(currentDay);
|
||||||
|
} else {
|
||||||
|
times = [...filterOptions.dateRange, currentDay].sort(
|
||||||
|
(a, b) => new Date(a).getTime() - new Date(b).getTime()
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onChange({
|
onChange({
|
||||||
'dateRange': dateArray,
|
'dateRange': times,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -113,8 +124,9 @@ const FilterPopup = (props: FilterPopupProps) => {
|
|||||||
{/* 日历 */}
|
{/* 日历 */}
|
||||||
<View>
|
<View>
|
||||||
<CalendarUI
|
<CalendarUI
|
||||||
type="multiple"
|
type="range"
|
||||||
isBorder={true}
|
isBorder={true}
|
||||||
|
showRangeStart={false}
|
||||||
value={filterOptions?.dateRange}
|
value={filterOptions?.dateRange}
|
||||||
onChange={handleDateChange}
|
onChange={handleDateChange}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ interface NutUICalendarProps {
|
|||||||
isBorder?: boolean;
|
isBorder?: boolean;
|
||||||
showQuickActions?: boolean;
|
showQuickActions?: boolean;
|
||||||
onHeaderClick?: (date: Date) => void;
|
onHeaderClick?: (date: Date) => void;
|
||||||
|
showRangeStart?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface CalendarUIRef {
|
export interface CalendarUIRef {
|
||||||
@@ -32,6 +33,7 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(
|
|||||||
value,
|
value,
|
||||||
onChange,
|
onChange,
|
||||||
isBorder = false,
|
isBorder = false,
|
||||||
|
showRangeStart = true,
|
||||||
showQuickActions = true,
|
showQuickActions = true,
|
||||||
onHeaderClick,
|
onHeaderClick,
|
||||||
},
|
},
|
||||||
@@ -195,7 +197,7 @@ const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(
|
|||||||
isBorder ? styles["border"] : ""
|
isBorder ? styles["border"] : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{type === "range" && (
|
{type === "range" && showRangeStart && (
|
||||||
<View className={styles["date-range-container"]}>
|
<View className={styles["date-range-container"]}>
|
||||||
<Text
|
<Text
|
||||||
className={`${styles["date-text-placeholder"]} ${
|
className={`${styles["date-text-placeholder"]} ${
|
||||||
|
|||||||
@@ -125,7 +125,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cell {
|
.cell {
|
||||||
height: 44px;
|
height: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -142,8 +142,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cell-text.selected {
|
.cell-text.selected {
|
||||||
width: 44px;
|
width: 40px;
|
||||||
height: 44px;
|
height: 40px;
|
||||||
border-radius: 22px;
|
border-radius: 22px;
|
||||||
background: rgba(0, 0, 0, 0.9);
|
background: rgba(0, 0, 0, 0.9);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -154,8 +154,8 @@
|
|||||||
|
|
||||||
// 时间段选择样式
|
// 时间段选择样式
|
||||||
.cell-text.range-start {
|
.cell-text.range-start {
|
||||||
width: 44px;
|
width: 40px;
|
||||||
height: 44px;
|
height: 40px;
|
||||||
border-radius: 22px;
|
border-radius: 22px;
|
||||||
background: rgba(0, 0, 0, 0.9);
|
background: rgba(0, 0, 0, 0.9);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -165,8 +165,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cell-text.range-end {
|
.cell-text.range-end {
|
||||||
width: 44px;
|
width: 40px;
|
||||||
height: 44px;
|
height: 40px;
|
||||||
border-radius: 22px;
|
border-radius: 22px;
|
||||||
background: rgba(0, 0, 0, 0.9);
|
background: rgba(0, 0, 0, 0.9);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -176,8 +176,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cell-text.in-range {
|
.cell-text.in-range {
|
||||||
width: 44px;
|
width: 40px;
|
||||||
height: 44px;
|
height: 40px;
|
||||||
border-radius: 22px;
|
border-radius: 22px;
|
||||||
background: rgba(0, 0, 0, 0.1);
|
background: rgba(0, 0, 0, 0.1);
|
||||||
color: #000;
|
color: #000;
|
||||||
@@ -193,7 +193,7 @@
|
|||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 44px;
|
height: 40px;
|
||||||
border-radius: 22px;
|
border-radius: 22px;
|
||||||
background: rgba(0, 0, 0, 0.06);
|
background: rgba(0, 0, 0, 0.06);
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -299,18 +299,18 @@
|
|||||||
|
|
||||||
.nut-calendarcard-day {
|
.nut-calendarcard-day {
|
||||||
margin-bottom: 0px !important;
|
margin-bottom: 0px !important;
|
||||||
height: 44px;
|
height: 40px;
|
||||||
width: 44px !important;
|
width: 40px !important;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: #000 !important;
|
background-color: #000 !important;
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
height: 44px;
|
height: 40px;
|
||||||
border-radius: 22px !important;
|
border-radius: 22px !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 44px !important;
|
width: 40px !important;
|
||||||
font-size: 24px !important;
|
font-size: 24px !important;
|
||||||
|
|
||||||
.day-container {
|
.day-container {
|
||||||
@@ -333,8 +333,8 @@
|
|||||||
.day-container {
|
.day-container {
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
border-radius: 22px;
|
border-radius: 22px;
|
||||||
width: 44px;
|
width: 40px;
|
||||||
height: 44px;
|
height: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
:global {
|
:global {
|
||||||
.guide-bar {
|
.guide-bar {
|
||||||
z-index: 9999;
|
z-index: 1002;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 9999;
|
z-index: 99;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.publish-ball {
|
.publish-ball {
|
||||||
@@ -233,7 +233,7 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
z-index: 9999;
|
z-index: 99;
|
||||||
|
|
||||||
.loading-spinner {
|
.loading-spinner {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
|
|||||||
@@ -591,12 +591,11 @@ useEffect(() => {
|
|||||||
|
|
||||||
const handleAnyInputFocus = (item: FormFieldConfig, e: any) => {
|
const handleAnyInputFocus = (item: FormFieldConfig, e: any) => {
|
||||||
const { prop } = item
|
const { prop } = item
|
||||||
if (prop === 'title') {
|
if (prop === 'descriptionInfo') {
|
||||||
return
|
setShouldReactToKeyboard(true)
|
||||||
}
|
}
|
||||||
setShouldReactToKeyboard(true)
|
|
||||||
}
|
}
|
||||||
const handleAnyInputBlur = (item: FormFieldConfig, e: any) => {
|
const handleAnyInputBlur = () => {
|
||||||
setShouldReactToKeyboard(false)
|
setShouldReactToKeyboard(false)
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
@@ -680,7 +679,7 @@ useEffect(() => {
|
|||||||
activityType === 'individual' && (
|
activityType === 'individual' && (
|
||||||
<Text className={styles['submit-tip']}>
|
<Text className={styles['submit-tip']}>
|
||||||
点击确定发布约球,即表示已经同意条款
|
点击确定发布约球,即表示已经同意条款
|
||||||
<Text className={styles['link']} onClick={() => Taro.navigateTo({url: '/publish_pages/publishBall/footballRules/index'})}>《约球规则》</Text>
|
<Text className={styles['link']} onClick={() => Taro.navigateTo({url: '/publish_pages/footballRules/index'})}>《约球规则》</Text>
|
||||||
</Text>
|
</Text>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user