Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/443.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 用秒来响应日期选择器时间选择_Javascript_Material Ui_React Datepicker - Fatal编程技术网

Javascript 用秒来响应日期选择器时间选择

Javascript 用秒来响应日期选择器时间选择,javascript,material-ui,react-datepicker,Javascript,Material Ui,React Datepicker,我还需要从react date picker中选择秒数。我已经检查过了医生们发现的这个 在这个解决方案中,我可以从中选择小时、分钟、上午/下午,但没有秒选项。有任何自定义方法也可以从中选择秒。下面的示例需要帮助 我尝试过改变日期格式 dateFormat=“MM/dd/yyyy h:MM:ss aa”不工作 () => { const [startDate, setStartDate] = useState(new Date()); return ( <DatePic

我还需要从react date picker中选择秒数。我已经检查过了医生们发现的这个

在这个解决方案中,我可以从中选择小时、分钟、上午/下午,但没有秒选项。有任何自定义方法也可以从中选择秒。下面的示例需要帮助

我尝试过改变日期格式

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
    />
  );
};
()=>{
const[startDate,setStartDate]=useState(新日期());
返回(
设置开始日期(日期)}
timeInputLabel=“时间:”
dateFormat=“MM/dd/yyyy h:MM aa”
显示时间输入
/>
);
};
我找到了显示秒数的方法,但效果很好,但是在我们选择时间后,整个对话框关闭,在模型内部。我正在使用这个内部材质对话框

() => {
  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 />}
    />
  );
};
()=>{
const[startDate,setStartDate]=useState(新日期());
const ExampleCustomTimeInput=({value,onChange})=>(
onChange(e.target.value)}
样式={{边框:“实心1px粉红色”}
/>
);
返回(
设置开始日期(日期)}
显示时间输入
customTimeInput={}
/>
);
};

您可以在其中使用
customTimeInput
属性和路径own
onChange
功能:

customTimeInput={
        <CustomTimeInput
          onChangeCustom={this.handleChangeTime}
        />
      }

谢谢我也在找同样的
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)}
    />);
};
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);
};