封装时间日期组件

.env

@@ -1,5 +1,5 @@
-TARO_APP_API=https://yjx.dev.yaojiankang.top
-#TARO_APP_API=https://playedu.yaojiankang.top
+#TARO_APP_API=https://yjx.dev.yaojiankang.top
+TARO_APP_API=https://playedu.yaojiankang.top
 TARO_APP_LGOIN=true
 
 

src/components/dateTimePicker/dateTimePicker.tsx

@@ -1,33 +1,70 @@
-import {FC} from "react";
+import {FC, useEffect, useState} from "react";
+import {Picker} from "@tarojs/components";
+import {dateDate, DateTime, dateTimePicker, DateTimePickers, getIndex, getTime} from './utils'
 
 interface Props {
-  children: JSX.Element
+  children?: JSX.Element
   disabled?: boolean
+  defaultValue?: string
+  onChange?: (time: string) => void
+  name?:string
 }
 
-const DateTimePicker: FC<Props> = () => {
+const DateTimePicker: FC<Props> = (props) => {
+  const [defaultValue, setDefaultValue] = useState<DateTime>(dateDate(new Date(props.defaultValue || Date.now())))   // 默认时间 或者 当天时间
+  const datePicker = dateTimePicker(defaultValue.year, defaultValue.year)  // 时间选择器数据（年，月，日，时间）
+  const [activityArray, setActivityArray] = useState<DateTimePickers>([])
+  const [value, setValue] = useState<number[]>([])
 
-  // function bindMultiPickerChange() {
-  // let activityArray = JSON.parse(JSON.stringify(this.activityArray)),
-  //   {value} = e.detail,
-  //   _result = [];
-  // for (let i = 0; i < value.length; i++) {
-  //   _result[i] = activityArray[i][value[i]].id;
-  // }
-  // this.$emit("result", _result);
-  // }
 
+  useEffect(() => {
+    setDefaultValue(dateDate(new Date(props.defaultValue || Date.now())))
+    const data = datePicker(defaultValue.year, defaultValue.month)
+    setValue(getIndex(data, defaultValue))
+    setActivityArray(data)
+  }, [props.defaultValue])
+
+
+  function change(e) {
+    props?.onChange?.(getTime(activityArray, e.detail.value))
+  }
+
+  function columnChange(e) {
+    const oldValue: number[] = JSON.parse(JSON.stringify(value))
+    oldValue[e.detail.column] = e.detail.value
+    setValue(oldValue)
+
+    let year = activityArray[0][oldValue[0]].id
+    let month = activityArray[1][oldValue[1]].id
+
+    switch (e.detail.column) {
+      case 0:
+        year = e.detail.value
+        break
+      case 1:
+        month = e.detail.value + 1
+        break
+    }
+    if ([0, 1].includes(e.detail.value)) {
+      const data = datePicker(year, month)
+      setActivityArray(data)
+    }
+  }
 
   return (
-    <></>
-    // <Picker
-    //   mode="multiSelector"
-    //   range-key='name'
-    //   disabled={props.disabled}
-    //   onChange={bindMultiPickerChange}
-    // >
-    //   {props.children}12
-    // </Picker>
+    <Picker
+      name={props.name}
+      value={value}
+      range={activityArray}
+      rangeKey='name'
+      disabled={props.disabled}
+      mode="multiSelector"
+      range-key='name'
+      onChange={change}
+      onColumnChange={columnChange}
+    >
+      {props.children}
+    </Picker>
   )
 }
 

src/components/dateTimePicker/utils.ts

@@ -1,4 +1,4 @@
-interface DateTime {
+export interface DateTime {
   year: number
   month: number
   day: number
@@ -6,6 +6,16 @@ interface DateTime {
   minutes: number
 }
 
+export interface DateTimePickerType {
+  name: string
+  id: number | string
+
+  [key: string]: any
+}
+
+
+export type DateTimePickers = Array<DateTimePickerType>[]
+
 /**
  * 获取一个月的天数
  * @param year 年
@@ -33,10 +43,6 @@ const dateDate = function (date: Date): DateTime {
   }
 };
 
-interface DateTimePicker {
-  name: string
-  id: number | string
-}
 
 /**
  * 时间选择器
@@ -45,10 +51,10 @@ interface DateTimePicker {
  * @param endyear 结束月
  */
 const dateTimePicker = function (startyear: number, endyear: number) {
-  const years: DateTimePicker[] = [];
-  const months: DateTimePicker[] = [];
-  const hours: DateTimePicker[] = [];
-  const minutes: DateTimePicker[] = [];
+  const years: DateTimePickerType[] = [];
+  const months: DateTimePickerType[] = [];
+  const hours: DateTimePickerType[] = [];
+  const minutes: DateTimePickerType[] = [];
   for (let i = startyear - 20; i <= endyear + 20; i++) {
     years.push({name: i + '年', id: i})
   }
@@ -78,12 +84,12 @@ const dateTimePicker = function (startyear: number, endyear: number) {
       id: i
     });
   }
-  return function (_year: number | string, _month: string | number) {
-    const days: DateTimePicker[] = [];
+  return function (_year: number | string, _month: string | number): DateTimePickers {
+    const days: DateTimePickerType[] = [];
     _year = parseInt(String(_year));
     _month = parseInt(String(_month));
     //获取日期
-    for (let i: string | number = 0; i <= getDaysInOneMonth(_year, _month); i = Number(i) + 1) {
+    for (let i: string | number = 1; i <= getDaysInOneMonth(_year, _month); i = Number(i) + 1) {
       if (i < 10) {
         i = "0" + i;
       }
@@ -97,8 +103,40 @@ const dateTimePicker = function (startyear: number, endyear: number) {
 };
 
 
+/**
+ * 获取时间下标
+ */
+function getIndex(pickerData: DateTimePickers, arr: DateTime) {
+  let timeIndex: number[] = [];
+  let indexKey = ["year", "month", "day", "hours", "minutes"];
+  pickerData.forEach((picker, index) => {
+    const _index = picker.findIndex(d => parseInt(String(d.id)) === parseInt(arr[indexKey[index]]))
+    timeIndex[index] = _index >= 0 ? _index : 0;
+  })
+  return timeIndex;
+}
+
+
+/** 获取时间 */
+function getTime(pickerData: DateTimePickers, arr: number[]): string {
+  let time = ''
+  pickerData.forEach((picker, index) => {
+    if (index < 2) {
+      time += picker[arr[index]].id + '-'
+    } else if (index === 3) {
+      time += " " + picker[arr[index]].id + ':'
+    } else {
+      time += picker[arr[index]].id
+    }
+  })
+  return time
+}
+
+
 export {
   dateTimePicker,
   getDaysInOneMonth,
+  getIndex,
+  getTime,
   dateDate
 }

src/pages/manage/spotMeeting/spotMeeting.module.scss

@@ -21,7 +21,7 @@
 
 
 .code {
-  width: 300rpx;
+  width: 400rpx;
   margin: 40rpx auto;
   position: relative;
 }
@@ -33,7 +33,7 @@
   top: 0;
   bottom: 0;
   margin: auto;
-  width: 300rpx;
+  width: 400rpx;
   height: 40rpx;
   text-align: center;
   font-weight: bold;

src/pages/manage/spotMeeting/spotMeeting.tsx

@@ -10,13 +10,14 @@ import code from '@/static/img/code.png'
 import Icon from "@/components/icon";
 import failure from "@/static/img/failure.png"
 import {Profile} from "@/store";
+import DateTimePicker from "@/components/dateTimePicker/dateTimePicker";
 
 const SpotMeeting: FC = () => {
   const path = encodeURIComponent("/pages/meeting/meeting")
   const params = Taro.getCurrentInstance().router?.params as { id: string | undefined }
   const [manages, setManages] = useState<Manage[]>([])
-  const [start, setStart] = useState<string>(formatDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000), "YY-MM-dd hh:00:00"))
-  const [end, setEnd] = useState<string>(formatDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000), "YY-MM-dd 18:00:00"))
+  const [start, setStart] = useState<string>(formatDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000), "YY-MM-dd 08:00"))
+  const [end, setEnd] = useState<string>(formatDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000), "YY-MM-dd 18:00"))
   const [depid, setDepid] = useState<number | null>(null)
   const [imgUrl, setImgUrl] = useState('')
   const [name, setName] = useState('')
@@ -41,8 +42,8 @@ const SpotMeeting: FC = () => {
 
       if (res) {
         downUrl(res.id, false)
-        setEnd(formatDate(new Date(res.estimate_end_time), "YY-MM-dd 18:00:00"))
-        setStart(formatDate(new Date(res.estimate_start_time), "YY-MM-dd 08:00:00"))
+        setEnd(formatDate(new Date(res.estimate_end_time), "YY-MM-dd 18:00"))
+        setStart(formatDate(new Date(res.estimate_start_time), "YY-MM-dd 08:00"))
       }
     } else {
       setLoading(false)
@@ -67,6 +68,7 @@ const SpotMeeting: FC = () => {
   const depChange = useCallback((e) => {
     setDepid(manages[Number(e.detail.value)]?.id)
   }, [manages])
+
   const change_start = useCallback((time: string) => {
     const mil = new Date(time).getTime()
     const endMil = new Date(end).getTime()
@@ -76,6 +78,7 @@ const SpotMeeting: FC = () => {
       setStart(time)
     }
   }, [end])
+
   const change_end = useCallback((time: string) => {
     const mil = new Date(time).getTime()
     const startMil = new Date(start).getTime()
@@ -243,7 +246,7 @@ const SpotMeeting: FC = () => {
               ? <Image
                 src={imgUrl}
                 mode='aspectFit'
-                style={{width: '150px'}}
+                style={{width: '200px'}}
                 onLoad={imagLoad}
                 onError={imagLoad}
                 fadeIn/>
@@ -269,22 +272,26 @@ const SpotMeeting: FC = () => {
                 onInput={(e) => setName(e.detail.value)}
               />}
             />
-            <Picker
-              mode="date"
-              value={start}
+
+            <DateTimePicker
+              name='estimate_start_time'
+              defaultValue={start}
               disabled={status === 1}
-              onChange={(e) => change_start(e.detail.value + ' 8:00:00')}
-              name='estimate_start_time'>
+              onChange={(time) => change_start(time)}
+            >
               <PopPut title='开始时间' content={start}/>
-            </Picker>
-            <Picker
-              mode="date"
-              value={end}
+            </DateTimePicker>
+
+
+            <DateTimePicker
+              name='estimate_end_time'
+              defaultValue={end}
               disabled={status === 1}
-              onChange={(e) => change_end(e.detail.value + ' 18:00:00')}
-              name='estimate_end_time'>
+              onChange={(time) => change_end(time)}
+            >
               <PopPut title='结束时间' content={end}/>
-            </Picker>
+            </DateTimePicker>
+
             <Picker
               mode='selector'
               range={manages}
@@ -307,7 +314,6 @@ const SpotMeeting: FC = () => {
             {/*</Textarea>*/}
 
             <View className='flex justify-between'>
-
               {
                 id !== undefined && <>
                   {