Я пытаюсь запретить пользователям выбирать будущую дату в этом поле управления формой. Ниже вы увидите мою текущую функцию отключения даты и ввод form.control, где я использую тип даты react-bootstrap.
Я добавил весь компонент. Это модальный компонент с формой внутри для записи в базу данных firebase firestore. Я попытался использовать параметр "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
Этот вопрос не относится к реакции на загрузку, так как вы используете обычный ввод с type="date". Согласно MDN атрибут max должен быть указан в формате ГГГГ-ММ-ДД: 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
Где вы используете библиотеку bootstrap-datepicker в своем коде? мне нужно это
Привет @IgorGonak, их нет. Я следил за этим stackoverflow.com/questions/66429812/… . Я не совсем уверен, как это должно быть сделано, так как я уже использую формы реакции-загрузки. Я думал просто следовать этому стилю.
Я понимаю. Вы просто используете обычный ввод с type = "date". Я был сбит с толку, потому что "bootstrap-datepicker" - это отдельная библиотека. Пожалуйста, удалите тег из исходного сообщения.
Привет @IgorGonak, я пробовал, и это не работает. Я предоставил весь модальный компонент выше.