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

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

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

@@ -3,8 +3,7 @@ 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')
@@ -135,18 +134,31 @@ 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'>
@@ -332,35 +344,30 @@ function SendTrain(){
                         {/* 日历 */}
                         <p>请填写考试开始、截止日期</p>
                         <div className='calendar-box'>
-                        {/* 开始时间输入框 */}
+                            <DatePicker
-                            <div className='start-date-input'>
+                                selected={startDate}
-                                {/* 日历组件 */}
+                                onChange={handleStartDateChange}
-                                <div className='calendar-picker'>
+                                dateFormat="yyyy/MM/dd"
-                                    <DatePicker
+                                placeholderText="选择开始日期"
-                                        selected={startDate}
+                                popperPlacement="left-start"
-                                        onChange={handleStartDateChange}
+                                className='calendar1'
-                                        dateFormat="yyyy-MM-dd HH:mm"
+                            />
-                                        showTimeSelect
+                            <span>-</span>
-                                        timeIntervals={10} // 时间选择间隔，单位为分钟
+                            <DatePicker
-                                        timeCaption="time"
+                                selected={endDate}
-                                        minDate={new Date()} // 不能选择过去的日期
+                                onChange={handleEndDateChange}
-                                    />
+                                dateFormat="yyyy/MM/dd"
-                                    <DatePicker
+                                placeholderText="选择结束日期"
-                                        selected={endDate}
+                                minDate={startDate} // 设置最小日期为开始日期
-                                        onChange={handleEndDateChange}
+                                withFullScreenPortal={false} // 避免全屏模式
-                                        dateFormat="yyyy-MM-dd HH:mm"
+                                popperPlacement="left-start"
-                                        showTimeSelect
+                                className='calendar2'
-                                        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,7 +69,6 @@ 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 />} />{/* 练习-考试页面 */}