[英]react-datepicker time selection with seconds
I need to choose seconds also from react date picker.我还需要从反应日期选择器中选择秒。 I had gone through out the docs found this
我已经通过文档找到了这个
In this solution i can select hour,min,AM/PM from this but no option for seconds is there any way to customize to select seconds also from this.help needed,below example (look for input Time)在这个解决方案中,我可以 select 小时,分钟,上午/下午,但没有秒选项有任何方法可以自定义到 select 秒也来自这个。需要帮助,下面的示例(查找输入时间)
I have tried by changing date format我尝试过更改日期格式
dateFormat="MM/dd/yyyy h:mm:ss aa" not working dateFormat="MM/dd/yyyy h:mm:ss aa" 不工作
() => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
timeInputLabel="Time:"
dateFormat="MM/dd/yyyy h:mm aa"
showTimeInput
/>
);
};
I found the way to show seconds but this working fine but inside a model after we select time the whole Dialog is closing.I'm using this inside MaterialUi Dialog我找到了显示秒数的方法,但这工作正常,但在我们 select 时间后,在 model 内,整个对话框正在关闭。我在 MaterialUi 对话框中使用它
() => {
const [startDate, setStartDate] = useState(new Date());
const ExampleCustomTimeInput = ({ value, onChange }) => (
<input
type="time"
step="1"
value={value}
onChange={e => onChange(e.target.value)}
style={{ border: "solid 1px pink" }}
/>
);
return (
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
showTimeInput
customTimeInput={<ExampleCustomTimeInput />}
/>
);
};
You can use the customTimeInput
property and path own onChange
function in it:您可以在其中使用
customTimeInput
属性和路径自己的onChange
function:
customTimeInput={
<CustomTimeInput
onChangeCustom={this.handleChangeTime}
/>
}
Here is the component:这是组件:
const CustomTimeInput = ({ date, onChangeCustom}) => {
const value = date instanceof Date && !isNaN(date)
? // Getting time from Date beacuse `value` comes here without seconds
date.toLocaleTimeString('it-IT')
: '';
return (
<input
className="bp3-input bp3-fill"
type="time"
step="1"
value={value}
onChange={(event) => onChangeCustom(date, event.target.value)}
/>);
};
And callback sample:和回调示例:
handleChangeTime = (date, time) => {
const [hh, mm, ss] = time.split(':');
const targetDate = date instanceof Date && !isNaN(date) ? date : new Date();
targetDate.setHours(Number(hh) || 0, Number(mm) || 0, Number(ss) || 0);
this.handleDateChange(targetDate);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.