This commit is contained in:
parent
2b499c9347
commit
634321d69d
|
|
@ -31,6 +31,7 @@
|
|||
"postcss": "^8.4.38",
|
||||
"react": "^18.3.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-datepicker": "^7.2.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-redux": "^9.1.2",
|
||||
"react-router-dom": "^6.23.0",
|
||||
|
|
@ -2737,6 +2738,54 @@
|
|||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.6.3",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.3.tgz",
|
||||
"integrity": "sha512-1ZpCvYf788/ZXOhRQGFxnYQOVgeU+pi0i+d0Ow34La7qjIXETi6RNswGVKkA6KcDO8/+Ysu2E/CeUmmeEBDvTg==",
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.2.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.6.6",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.6.tgz",
|
||||
"integrity": "sha512-qiTYajAnh3P+38kECeffMSQgbvXty2VB6rS+42iWR4FPIlZjLK84E9qtLnMTLIpPz2znD/TaFqaiavMUrS+Hcw==",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.0.0",
|
||||
"@floating-ui/utils": "^0.2.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/react": {
|
||||
"version": "0.26.18",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/react/-/react-0.26.18.tgz",
|
||||
"integrity": "sha512-enDDX09Jpi3kmhcXXpvs+fvRXOfBj1jUV2KF6uDMf5HjS+SOZJzNTFUW71lKbFcxz0BkmQqwbvqdmHIxMq/fyQ==",
|
||||
"dependencies": {
|
||||
"@floating-ui/react-dom": "^2.1.0",
|
||||
"@floating-ui/utils": "^0.2.3",
|
||||
"tabbable": "^6.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/react-dom": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
|
||||
"integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.3.tgz",
|
||||
"integrity": "sha512-XGndio0l5/Gvd6CLIABvsav9HHezgDFFhDfHk1bvLfr9ni8dojqLSvBbotJEjmIwNHL7vK4QzBJTdBRoB+c1ww=="
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.11.14",
|
||||
"resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
|
||||
|
|
@ -7387,6 +7436,15 @@
|
|||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-3.6.0.tgz",
|
||||
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
|
||||
|
|
@ -15233,6 +15291,22 @@
|
|||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-datepicker": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/react-datepicker/-/react-datepicker-7.2.0.tgz",
|
||||
"integrity": "sha512-Hhs1Fk6/ZqpGGg9QX/JjzvgEJoSFKYCAvRVdBbjxvOjflsXutFprAl/E0ZOm1J+/b/jQqU03WMTTNLcw5nXcuw==",
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "^0.26.2",
|
||||
"clsx": "^2.1.0",
|
||||
"date-fns": "^3.3.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-onclickoutside": "^6.13.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.9.0 || ^17 || ^18",
|
||||
"react-dom": "^16.9.0 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dev-utils": {
|
||||
"version": "12.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
|
||||
|
|
@ -15408,6 +15482,19 @@
|
|||
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-onclickoutside": {
|
||||
"version": "6.13.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz",
|
||||
"integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==",
|
||||
"funding": {
|
||||
"type": "individual",
|
||||
"url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.5.x || ^16.x || ^17.x || ^18.x",
|
||||
"react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
|
||||
}
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "9.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-9.1.2.tgz",
|
||||
|
|
@ -17098,6 +17185,11 @@
|
|||
"integrity": "sha512-Nk8c4lXvMB98MtbmjX7JwJRgJOL8fluecYCfCeYBznwmpOs8Bf15hLM6z4z71EDAhQVrQrI+wt1aLWSXZq+hXA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tabbable": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/tabbable/-/tabbable-6.2.0.tgz",
|
||||
"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.4.3.tgz",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
"postcss": "^8.4.38",
|
||||
"react": "^18.3.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-datepicker": "^7.2.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-redux": "^9.1.2",
|
||||
"react-router-dom": "^6.23.0",
|
||||
|
|
|
|||
|
|
@ -2,34 +2,48 @@
|
|||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
/* 页面区域占比 */
|
||||
.SendTrain_body_left{
|
||||
flex: 20%;
|
||||
flex: 11%;
|
||||
/* border: 1px solid #000; */
|
||||
}
|
||||
.SendTrain_body_right{
|
||||
flex: 60%;
|
||||
}
|
||||
|
||||
|
||||
.SendTrain_body_left_ul{
|
||||
all: unset;
|
||||
/* 左边导航 */
|
||||
.SendTrain_body_left h3{
|
||||
background-color: #a7f4e2;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 26px;
|
||||
font-weight: 440;
|
||||
margin-top: 43px;
|
||||
padding-left: 75px;
|
||||
}
|
||||
.SendTrain_body_left_ul li{
|
||||
text-align: center;
|
||||
.SendTrain_body_left_ul{
|
||||
/* all: unset; */
|
||||
list-style-type: none;
|
||||
margin-left: -40px;
|
||||
margin-top: -28px;
|
||||
}
|
||||
.SendTrain_body_left_ul button{
|
||||
background-color: rgb(114, 134, 232);
|
||||
background-color: rgb(247, 232, 189);
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.SendTrain_body_left_ul_div{
|
||||
background-color: aqua;
|
||||
font-size: 36px;
|
||||
margin-top: 43px;
|
||||
.left-list-ul li{
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
/* 页面中间题目(基础题) */
|
||||
.SendTrain_body_right p{
|
||||
font-size: 32px;
|
||||
font-size: 30px;
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
margin-top: 0px;
|
||||
|
|
@ -42,7 +56,7 @@
|
|||
border-right: 1px solid black;
|
||||
}
|
||||
.title{
|
||||
font-size: 26px;
|
||||
font-size: 25px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.questiontitle{
|
||||
|
|
@ -120,7 +134,6 @@
|
|||
|
||||
|
||||
/* 右边的内容 */
|
||||
|
||||
.right_right{
|
||||
flex: 20%;
|
||||
}
|
||||
|
|
@ -174,9 +187,37 @@
|
|||
|
||||
.TrainSelectTime{
|
||||
width: 95%;
|
||||
height: 200px;
|
||||
height: 220px;
|
||||
background-color: beige;
|
||||
text-align: center;
|
||||
margin-left: 7px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.TrainSelectTime p{
|
||||
padding-top: 10px;
|
||||
}
|
||||
.TrainSelectTime p::before{
|
||||
content: "▶";
|
||||
}
|
||||
|
||||
.calendar-box span{
|
||||
position: absolute;
|
||||
/* top: 20px; */
|
||||
top: 380px;
|
||||
right: 160px;
|
||||
}
|
||||
.calendar1{
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: -110px;
|
||||
}
|
||||
.calendar2{
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: -130px;
|
||||
}
|
||||
.data-num{
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
@ -2,6 +2,8 @@ import React,{ useState ,useEffect} from 'react';
|
|||
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';
|
||||
|
||||
function SendTrain(){
|
||||
const teacher_ID=localStorage.getItem('islogin')
|
||||
|
|
@ -135,23 +137,136 @@ function SendTrain(){
|
|||
SetStopTime(event.target.value)
|
||||
}
|
||||
|
||||
// 日历
|
||||
// 用于存储开始日期和结束日期的状态
|
||||
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));
|
||||
return differenceInDays;
|
||||
};
|
||||
useEffect(() => {
|
||||
console.log(calculateTotalDays());
|
||||
}, [startDate, endDate]);
|
||||
|
||||
return(
|
||||
<div className='SendTrain_body'>
|
||||
<div className='SendTrain_body_left'>
|
||||
<h3>题目集</h3>
|
||||
<ul className='SendTrain_body_left_ul'>
|
||||
<li><div className='SendTrain_body_left_ul_div'>题目集</div></li>
|
||||
<li>
|
||||
<button onClick={clickQuestion}>基础题</button>
|
||||
<ul style={{all:'unset'}}>
|
||||
<ul style={{all:'unset'}} className='left-list-ul'>
|
||||
<li>第一章</li>
|
||||
<li>第二章</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><button onClick={clickTrain}>实训题</button></li>
|
||||
<li>
|
||||
<button onClick={clickTrain}>实训题</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className='SendTrain_body_right'>
|
||||
<p>题目选择</p>
|
||||
{/* 基础题 */}
|
||||
{Trainquestion &&<table>
|
||||
<span className='title'>选择题</span>
|
||||
<tbody>
|
||||
{Object.keys(Trainquestion['choice']).map((key)=>(
|
||||
<tr key={key}>
|
||||
{/* 章节切换⬇ */}
|
||||
<td className='Trainbox'>
|
||||
<div>{Trainquestion['choice'][key][8]}</div>
|
||||
<tr>
|
||||
<td className='questiontitle'>问.{Trainquestion['choice'][key][1]}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<div className='Train_answer_box'>
|
||||
<tr>A:{Trainquestion['choice'][key][2]}</tr>
|
||||
<tr>B:{Trainquestion['choice'][key][3]}</tr>
|
||||
<tr>C:{Trainquestion['choice'][key][4]}</tr>
|
||||
<tr>D:{Trainquestion['choice'][key][5]}</tr>
|
||||
</div>
|
||||
</tr>
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
//在选择题目集中添加选择题的ID
|
||||
setTrainChoice(items=>([
|
||||
...items,
|
||||
Trainquestion['choice'][key][7]
|
||||
]))
|
||||
}else{
|
||||
setTrainChoice((items)=>
|
||||
items.filter((item)=>item!==Trainquestion['choice'][key][7])
|
||||
)
|
||||
}
|
||||
}} />
|
||||
<span>是否选择</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<span className='title'>填空题</span>
|
||||
{Object.keys(Trainquestion['completion']).map((key)=>(
|
||||
<tr key={key}>
|
||||
<td className='Trainbox'>
|
||||
{Trainquestion['completion'][key][4]}
|
||||
<td className='questiontitle'>
|
||||
问.{Trainquestion['completion'][key][1]}
|
||||
</td>
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
//在选择题目集中添加选择题的ID
|
||||
setTrainCompletion(items=>([
|
||||
...items,
|
||||
Trainquestion['completion'][key][3]
|
||||
]))
|
||||
}else{
|
||||
setTrainCompletion((items)=>
|
||||
items.filter((item)=>item!==Trainquestion['completion'][key][3])
|
||||
)
|
||||
}
|
||||
}} />
|
||||
<span>是否选择</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<span className='title'>判断题</span>
|
||||
{Object.keys(Trainquestion['judge']).map((key)=>(
|
||||
<tr key={key}>
|
||||
<td className='Trainbox'>
|
||||
{Trainquestion['judge'][key][4]}
|
||||
<td className='judgetitle'>问:{Trainquestion['judge'][key][1]}</td>
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
setTrainJudge(items=>([
|
||||
...items,
|
||||
Trainquestion['judge'][key][3]
|
||||
]))
|
||||
}else{
|
||||
setTrainJudge((items)=>
|
||||
items.filter((item)=>item!==Trainquestion['judge'][key][3])
|
||||
)
|
||||
}
|
||||
}} />
|
||||
<span>是否选择</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>}
|
||||
{/* 实训题 */}
|
||||
{isTrain&&<div className='Train_div'>
|
||||
<div id='Train_1'>
|
||||
|
|
@ -195,93 +310,9 @@ function SendTrain(){
|
|||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
{/* 基础题 */}
|
||||
{Trainquestion &&<table>
|
||||
<span className='title'>选择题</span>
|
||||
<tbody>
|
||||
{Object.keys(Trainquestion['choice']).map((key)=>(
|
||||
<tr key={key}>
|
||||
{/* 章节切换⬇ */}
|
||||
<td className='Trainbox'>
|
||||
<div>{Trainquestion['choice'][key][8]}</div>
|
||||
<tr>
|
||||
<td className='questiontitle'>问.{Trainquestion['choice'][key][1]}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<div className='Train_answer_box'>
|
||||
<tr>A:{Trainquestion['choice'][key][2]}</tr>
|
||||
<tr>B:{Trainquestion['choice'][key][3]}</tr>
|
||||
<tr>C:{Trainquestion['choice'][key][4]}</tr>
|
||||
<tr>D:{Trainquestion['choice'][key][5]}</tr>
|
||||
</div>
|
||||
</tr>
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
//在选择题目集中添加选择题的ID
|
||||
setTrainChoice(items=>([
|
||||
...items,
|
||||
Trainquestion['choice'][key][7]
|
||||
]))
|
||||
}else{
|
||||
setTrainChoice((items)=>
|
||||
items.filter((item)=>item!==Trainquestion['choice'][key][7])
|
||||
)
|
||||
}
|
||||
}} /><span>是否选择</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<span className='title'>填空题</span>
|
||||
{Object.keys(Trainquestion['completion']).map((key)=>(
|
||||
<tr key={key}>
|
||||
<td className='Trainbox'>
|
||||
{Trainquestion['completion'][key][4]}
|
||||
<td className='questiontitle'>
|
||||
问.{Trainquestion['completion'][key][1]}
|
||||
</td>
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
//在选择题目集中添加选择题的ID
|
||||
setTrainCompletion(items=>([
|
||||
...items,
|
||||
Trainquestion['completion'][key][3]
|
||||
]))
|
||||
}else{
|
||||
setTrainCompletion((items)=>
|
||||
items.filter((item)=>item!==Trainquestion['completion'][key][3])
|
||||
)
|
||||
}
|
||||
}} /><span>是否选择</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<span className='title'>判断题</span>
|
||||
{Object.keys(Trainquestion['judge']).map((key)=>(
|
||||
<tr key={key}>
|
||||
<td className='Trainbox'>
|
||||
{Trainquestion['judge'][key][4]}
|
||||
<td className='judgetitle'>问:{Trainquestion['judge'][key][1]}</td>
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
setTrainJudge(items=>([
|
||||
...items,
|
||||
Trainquestion['judge'][key][3]
|
||||
]))
|
||||
}else{
|
||||
setTrainJudge((items)=>
|
||||
items.filter((item)=>item!==Trainquestion['judge'][key][3])
|
||||
)
|
||||
}
|
||||
}} /><span>是否选择</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>}
|
||||
<button onClick={SendTrainBtn} id='SendTrainBtn'>发布按钮</button>
|
||||
</div>
|
||||
{/* 右边的内容 */}
|
||||
{/* 最右边的内容 */}
|
||||
<div className='right_right'>
|
||||
<div className='OptionBox'>
|
||||
<div className='TrainSelectClass'>
|
||||
|
|
@ -297,23 +328,45 @@ function SendTrain(){
|
|||
</ul>}
|
||||
</div>
|
||||
<div className='TrainSelectTime'>
|
||||
<p>请填写考试时间</p>
|
||||
<p>请填写考试总时长</p>
|
||||
<select name="" id="" alue={HourValue} onChange={gethourvalue}>
|
||||
{Object.keys(hour_list).map((num)=>(
|
||||
<option value={num} key={num}>{num}</option>
|
||||
))}
|
||||
</select>小时
|
||||
<button onClick={()=>{
|
||||
{/* <button onClick={()=>{
|
||||
console.log(selectedItems);
|
||||
console.log(Train);
|
||||
}}>asd</button>
|
||||
<select name="" id="" alue={MinValue} onChange={getminvalue}>
|
||||
}}>asd</button> */}
|
||||
<select name="" id="" value={MinValue} onChange={getminvalue}>
|
||||
{min_list.map((num)=>(
|
||||
<option value={num} key={num}>{num}</option>
|
||||
))}
|
||||
</select>分钟
|
||||
<p>请填写截至时间</p>
|
||||
<input type="text" maxLength={10} style={{width:'30px'}} value={StopTime} onChange={getstoptime} />天后
|
||||
{/* 日历 */}
|
||||
<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>
|
||||
<p className='data-num'>总天数：{calculateTotalDays()}天</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue