如何解决如何在 react-datepicker 旁边设置日历图标?
如何在 react-datepicker 之后放置日历图标?目前,每次我点击日期选择器时,它都会跟随日期选择器的那一行而不是停留在它旁边。
这些是代码:https://codesandbox.io/s/festive-wescoff-71z8u?file=/src/App.js
<label>
<DatePicker
wrapperClassName="datePicker"
selected={startDate}
onChange={(date) => setStartDate(date)}
showTimeSelect
dateFormat="dd/MM/yyyy hh:mm a"
timeFormat="hh:mm a"
/>
<TodayIcon />
</label>
解决方法
你可以像这样为你的 DatePicker 提供一个自定义输入,它会正常运行
const CustomInput = React.forwardRef((props,ref) => {
return (
<div> // You can style this further
<label onClick={props.onClick} ref={ref}>
{props.value || props.placeholder}
</label>
<TodayIcon onClick={props.onClick} />
</div>
);
});
<DatePicker
wrapperClassName="datePicker"
selected={startDate}
onChange={(date) => setStartDate(date)}
showTimeSelect
minDate={new Date()}
minTime={minTime}
maxTime={new Date(0,17)} // 5:00pm
dateFormat="dd/MM/yyyy hh:mm a"
timeFormat="hh:mm a"
timeIntervals={30}
customInput={<CustomInput/>}
/>
,
您应该保持 <label>
位置相对并更新以下样式
.MuiSvgIcon-root {
fill: currentColor;
width: 1em;
height: 1em;
display: inline-block;
font-size: 1.5rem;
transition: fill 200ms cubic-bezier(0.4,0.2,1) 0ms;
flex-shrink: 0;
user-select: none;
position: absolute;
right: 0;
top: -4px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。