React Bootstrap阻止未来日期

Question

我试图阻止用户在此表单控件字段中选择未来日期。下面你会看到我当前的禁用日期功能和form.control输入，我使用的是react bootstrap日期类型。

我已经在中添加了整个组件。这是一个模态组件，里面有一个表单，可以写入firebasefirestore数据库。我尝试过使用"；endDate"；此处链接中的选项(https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#enddate)，但似乎不起作用。

import React, { useRef, useState } from 'react' 
import { Modal, ModalBody, Form, Row, Col, Alert } from 'react-bootstrap' 
import { database } from '../firebase'; 
import { useAuth } from '../contexts/AuthContext'; 

const AddVideoFileModal = (props) => { 
const { show, toggleModal } = props; 
const { currentUser } = useAuth() 
const [loading, setLoading] = useState(false); 
const [error, setError] = useState(''); 

const videoNameRef = useRef(null); 
const videoDescRef = useRef(null); 
const videoRecordedDateRef = useRef(null); 
const videoFileRef = useRef(null); 
const videoFileTranscriptRef = useRef(null);

function handleVideoUpload(e) { 
e.preventDefault(); 
setLoading(true); 
setError(''); 

try { 
var videoUploadQuery = database.portfolioRef.doc(props.pId).collection("videos"); 
videoUploadQuery.add({ 
videoName: videoNameRef.current.value, 
videoDesc: videoDescRef.current.value, 
recordedDate: videoRecordedDateRef.current.value, 
videoFile: videoFileRef.current.value, 
transcriptFile: videoFileTranscriptRef.current.value, 
videoUploadedBy: currentUser.displayName, 
videoUploadDate: new Date().toLocaleString('en-SG') 
}).then(() => { 
toggleModal(); 
}); 
} catch { 
setError("Failed to upload video file!"); 
} 

setLoading(false) 
} 

return ( 
<Modal 
size="lg" 
aria-labelledby="contained-modal-title-vcenter" 
centered 
show={show} 
onHide={toggleModal} 
className="addFile-modal-content"> 
<ModalBody className="addFile-modal-body"> 
<div className="addFile-modal-header">New Video File</div> 
<hr /> 
<Form onSubmit={handleVideoUpload}> 
{error && <Alert variant='danger'>{error}</Alert>} 
<Form.Group as={Row} id="videoFileName"> 
<Form.Label column sm={3}>Video File Name</Form.Label> 
<Col sm={9}> 
<Form.Control 
type={"text"} 
ref={videoNameRef} 
required 
/> 
</Col> 
</Form.Group> 
<Form.Group as={Row} id="videoFileSynopsis"> 
<Form.Label column sm={3}>Video File Synopsis</Form.Label> 
<Col sm={9}> 
<Form.Control 
as={"textarea"} 
rows={3} 
placeholder="Summary of the Video File Content..." 
ref={videoDescRef} 
required 
/> 
</Col> 
</Form.Group> 
<Form.Group as={Row} id="videoFileRecordedDate"> 
<Form.Label column sm={3}>Date Recorded</Form.Label> 
<Col sm={9}> 
<Form.Control
type='date' 
ref={videoRecordedDateRef} 
required 
/> 
</Col> 
</Form.Group> 
<Form.Group as={Row} id="videoFile" controlId='formFile'> 
<Form.Label column sm={3}>Video File:</Form.Label> 
<Col sm={9}>
<Form.Text>(.avchd, .avi, .mov, .mp4 format only)</Form.Text> 
<Form.Control 
type={"file"} 
ref={videoFileRef} 
required 
/> 
</Col> 
</Form.Group> 
<Form.Group as={Row} id="transcriptFile" controlId='formFile'> 
<Form.Label column sm={3}>Transcript File:</Form.Label> 
<Col sm={9}> 
<Form.Text>(.pdf format only)</Form.Text> 
<Form.Control 
type={"file"} 
ref={videoFileTranscriptRef} 
required 
/> 
</Col> 
</Form.Group> 
<button type='submit' className='submitBtn' disabled={loading}>Upload Video File</button> 
</Form> 
<button className='cancelBtn' onClick={toggleModal} disabled={loading}>Cancel</button> 
</ModalBody> 
</Modal> 
) 
} 

export default AddVideoFileModal

Answer 1

这个问题不是反应引导特定的，因为您使用的是type="日期"；。根据MDN，最大属性应以YYYY-MM-DD格式提供：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#max

例如，你可以这样做：

<Form.Control type="date" max={new Date().toISOString().slice(0, 10)} />

https://codesandbox.io/s/ecstatic-goldberg-n4x2it