Merge branch 'master' of https://gitea.xn--7p0a.site/2312072104/dm

app-dm/src/TeacherPages/Trainmanage/SendTrain.css

@@ -202,9 +202,8 @@
 
 .calendar-box span{
     position: absolute;
-    /* top: 20px; */
+    top: 400px;
-    top: 380px;
+    right: 185px;
-    right: 160px;
 }
 .calendar1{
     width: 100px;

app-dm/src/TeacherPages/Trainmanage/SendTrain.jsx

@@ -3,7 +3,8 @@ import { Link } from 'react-router-dom';
 import './SendTrain.css'
 import axios from 'axios';
 import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
+import "react-datepicker/dist/react-datepicker.css";
+
 
 function SendTrain(){
     const teacher_ID=localStorage.getItem('islogin')
@@ -134,31 +135,18 @@ function SendTrain(){
     //获取截止时间
     const [StopTime,SetStopTime]=useState('')
 
-    // 用于存储开始日期和结束日期的状态
+    // 日历
     const [startDate, setStartDate] = useState(new Date());
     const [endDate, setEndDate] = useState(new Date());
-    // 格式化日期显示
+    // 处理开始时间选择
-    const formatDate = (date) => {
-        return date.toLocaleDateString();
-    };
-    // 选择日期时更新状态
     const handleStartDateChange = (date) => {
         setStartDate(date);
     };
+
+    // 处理结束时间选择
     const handleEndDateChange = (date) => {
         setEndDate(date);
     };
-    // 计算并显示总天数
-    const calculateTotalDays = () => {
-        const differenceInTime = endDate - startDate;
-        const differenceInDays = Math.floor(differenceInTime / (1000 * 60 * 60 * 24)+1);
-        return differenceInDays;
-    };
-    // const [starTime,setstartTime]=useState()
-    useEffect(() => {
-        SetStopTime(calculateTotalDays())
-        console.log(calculateTotalDays());
-      }, [startDate, endDate]);
 
     return(
         <div className='SendTrain_body'>
@@ -344,30 +332,35 @@ function SendTrain(){
                         {/* 日历 */}
                         <p>请填写考试开始、截止日期</p>
                         <div className='calendar-box'>
-                            <DatePicker
+                        {/* 开始时间输入框 */}
-                                selected={startDate}
+                            <div className='start-date-input'>
-                                onChange={handleStartDateChange}
+                                {/* 日历组件 */}
-                                dateFormat="yyyy/MM/dd"
+                                <div className='calendar-picker'>
-                                placeholderText="选择开始日期"
+                                    <DatePicker
-                                popperPlacement="left-start"
+                                        selected={startDate}
-                                className='calendar1'
+                                        onChange={handleStartDateChange}
-                            />
+                                        dateFormat="yyyy-MM-dd HH:mm"
-                            <span>-</span>
+                                        showTimeSelect
-                            <DatePicker
+                                        timeIntervals={10} // 时间选择间隔，单位为分钟
-                                selected={endDate}
+                                        timeCaption="time"
-                                onChange={handleEndDateChange}
+                                        minDate={new Date()} // 不能选择过去的日期
-                                dateFormat="yyyy/MM/dd"
+                                    />
-                                placeholderText="选择结束日期"
+                                    <DatePicker
-                                minDate={startDate} // 设置最小日期为开始日期
+                                        selected={endDate}
-                                withFullScreenPortal={false} // 避免全屏模式
+                                        onChange={handleEndDateChange}
-                                popperPlacement="left-start"
+                                        dateFormat="yyyy-MM-dd HH:mm"
-                                className='calendar2'
+                                        showTimeSelect
-                            />
+                                        timeIntervals={10}
+                                        timeCaption="time"
+                                        minDate={startDate || new Date()} // 结束日期不能早于开始日期
+                                    />
+                                </div>
+                       
+                            </div>
                         </div>
-                        <p className='data-num'>总天数：{calculateTotalDays()}天</p>
                     </div>
                 </div>
-            </div>  
+            </div> 
         </div>
     )
 }

app-dm/src/router/index.jsx

@@ -69,6 +69,7 @@ function App() {
           <Route path="/classID/:key" element={<MainLayout headerNav={HeaderNavTeacher} />}>
             <Route index element={<ClassID/>} />
           </Route>
+          <Route path="test" element={<Test />}/>
 
           {/* 页面使用单独的布局，不包含HeaderNav和HeaderNavTeacher */}
           <Route path="exam/:examId" element={<Exam />} />{/* 练习-考试页面 */}