[英]how do I set the min and max date for date fields?
I am developing start date and end date field screen using React JS and Bootstrap now I need add validation for end date field.我正在使用 React JS 和 Bootstrap 开发开始日期和结束日期字段屏幕,现在我需要为结束日期字段添加验证。 For example: start date 01/01/2021 end date should allow to select from 01/01/2021(start date) up to 3 years(01/01/2023).
例如:开始日期 01/01/2021 结束日期应该允许 select 从 01/01/2021(开始日期)到 3 年(01/01/2023)。
if I use datepicker I can use the min and max attributes but am using bootstrap date <Form.Control type="date" name="endDate" placeholder="endDate" onChange={this.endDatemyChangeHandler}/>
do not have these attributes.如果我使用datepicker我可以使用 min 和 max 属性,但使用引导日期
<Form.Control type="date" name="endDate" placeholder="endDate" onChange={this.endDatemyChangeHandler}/>
没有这些属性.
a) how can I achieve min and max attribute?. a)如何实现最小和最大属性?
b) I am using the placeholder="endDate"
but in UI still showing the dd/mm/yyyy instead of endDate b)我正在使用
placeholder="endDate"
但在 UI 中仍显示dd/mm/yyyy而不是endDate
c) Is it possible to enable the date field to enter dates from keyboard? c)是否可以启用日期字段从键盘输入日期?
below is my complete code下面是我的完整代码
import React from 'react'
import { Form } from 'react-bootstrap';
import './download.css';
import "./App.css";
class BootstrapDate extends React.Component{
constructor(props) {
super(props);
this.state = { startDate: '' };
}
myChangeHandler = (event) => {
this.setState({startDate: event.target.value});
}
endDatemyChangeHandler = (event) => {
this.setState({endDate: event.target.value});
}
mySubmitHandler = (event) => {
event.preventDefault();
alert("You are submitting "+"startDate==" + this.state.startDate +"endDate=="+ this.state.endDate);
}
render(){
return(
<div id="container">
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"></link>
<img src="\is.jpg" id="ui-image"></img>
<div className="row">
<div className="col-md-4">
<Form.Group controlId="startDate">
<Form.Control type="date" name="startDate" placeholder="startDate" onChange={this.myChangeHandler}/>
</Form.Group>
</div>
<div className="col-md-4">
<Form.Group controlId="endDate">
<Form.Control type="date" name="endDate" placeholder="endDate" onChange={this.endDatemyChangeHandler}/>
</Form.Group>
</div>
</div>
<p id="note_bootstrap">Note: Only up to 3 years worth of Data can be downloaded</p>
<div>
{ this.state.startDate && this.state.endDate &&
<button id="button_bootsrap" onClick={this.mySubmitHandler} variant="primary" className="fa fa-download" >Download</button>
}
</div>
</div>
)
}
}
export default BootstrapDate;
First of, I'm using functional components in general and "React Boostrap Components" for the framework, so my answer going to be from that context.首先,我一般使用功能组件和框架的“React Boostrap 组件”,所以我的答案将来自该上下文。
For A and B:对于 A 和 B:
If i had a date object i would do preprocess the object like this:如果我有一个日期 object 我会像这样预处理 object:
// date parameter is a date object
const setDate = (date) => {
// first convert date object to string
let date_as_string = date.toString();
// split the string and get the date part
let date = date.split("T")[0];
// return the date string
return date;
}
I would insert the variables like this in a Boostrap From Controller.我会在 Controller 的 Boostrap 中插入这样的变量。 This datepicker have set the default value from a variable and max date is set to current date.
此日期选择器已从变量设置默认值,并且最大日期设置为当前日期。
<Form.Control
type="date"
max={new Date().toISOString().split("T")[0]}
defaultValue={setToday(date_variable)}
/>
PS: I would also had added an onBlur or onChange attribute with a function that changed to current date if user input exceeded the max date. PS:如果用户输入超过最大日期,我还会添加一个带有 function 的 onBlur 或 onChange 属性,该属性将更改为当前日期。
C : I don't have any good answers as I haven't had an issue with keyboad input for datepicker. C :我没有任何好的答案,因为我没有遇到 datepicker 的键盘输入问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.