React-Bootstrap 防止未来约会

Question

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

我已经添加了整个组件。这是一个模态组件，里面有一个表单可以写入 firebase firestore 数据库。我已尝试使用 link 此处 (https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#enddate) 中的“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

这个问题并不react-bootstrap具体，因为您使用的是 type="date" 的普通输入。根据 MDN，max 属性应以 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

React-Bootstrap 防止未来约会

React-Bootstrap prevent future dates

datepicker

react-bootstrap