Compare commits
3 Commits
4ada04083e
...
385044da04
Author | SHA1 | Date |
---|---|---|
nopy | 385044da04 | |
nopy | 217197318a | |
nopy | 1beb4fdb86 |
|
@ -202,9 +202,8 @@
|
|||
|
||||
.calendar-box span{
|
||||
position: absolute;
|
||||
/* top: 20px; */
|
||||
top: 380px;
|
||||
right: 160px;
|
||||
top: 400px;
|
||||
right: 185px;
|
||||
}
|
||||
.calendar1{
|
||||
width: 100px;
|
||||
|
|
|
@ -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,27 +332,32 @@ function SendTrain(){
|
|||
{/* 日历 */}
|
||||
<p>请填写考试开始、截止日期</p>
|
||||
<div className='calendar-box'>
|
||||
<DatePicker
|
||||
selected={startDate}
|
||||
onChange={handleStartDateChange}
|
||||
dateFormat="yyyy/MM/dd"
|
||||
placeholderText="选择开始日期"
|
||||
popperPlacement="left-start"
|
||||
className='calendar1'
|
||||
/>
|
||||
<span>-</span>
|
||||
<DatePicker
|
||||
selected={endDate}
|
||||
onChange={handleEndDateChange}
|
||||
dateFormat="yyyy/MM/dd"
|
||||
placeholderText="选择结束日期"
|
||||
minDate={startDate} // 设置最小日期为开始日期
|
||||
withFullScreenPortal={false} // 避免全屏模式
|
||||
popperPlacement="left-start"
|
||||
className='calendar2'
|
||||
/>
|
||||
{/* 开始时间输入框 */}
|
||||
<div className='start-date-input'>
|
||||
{/* 日历组件 */}
|
||||
<div className='calendar-picker'>
|
||||
<DatePicker
|
||||
selected={startDate}
|
||||
onChange={handleStartDateChange}
|
||||
dateFormat="yyyy-MM-dd HH:mm"
|
||||
showTimeSelect
|
||||
timeIntervals={10} // 时间选择间隔,单位为分钟
|
||||
timeCaption="time"
|
||||
minDate={new Date()} // 不能选择过去的日期
|
||||
/>
|
||||
<DatePicker
|
||||
selected={endDate}
|
||||
onChange={handleEndDateChange}
|
||||
dateFormat="yyyy-MM-dd HH:mm"
|
||||
showTimeSelect
|
||||
timeIntervals={10}
|
||||
timeCaption="time"
|
||||
minDate={startDate || new Date()} // 结束日期不能早于开始日期
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<p className='data-num'>总天数:{calculateTotalDays()}天</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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 />} />{/* 练习-考试页面 */}
|
||||
|
|
Loading…
Reference in New Issue