已解決430363個問題，去搜搜看，總會有你想問的

如何僅在選擇選項時顯示日期選擇器？

首頁猿問如何僅在選擇選項時顯示日期選擇器？

如何僅在選擇選項時顯示日期選擇器？

JavaScript

元芳怎么了 2023-04-20 10:15:46

我正在使用 react-datepicker 并選擇了 4 個選項，我只需要在選擇選項號 3 時顯示日歷。這是我到目前為止的代碼。const [startDate, setStartDate] = useState(new Date())<div className="input-block"> <label htmlFor="status">Status</label> <select id="status" name="status" required> <option value="1">Aguardando Disponibilidade</option> <option value="2">Aguardando Agendamento</option> <option value="3">Ativa??o Agendada</option> <option value="4">Ativa??o Efetuada</option> </select> <div className="calendar"> <DatePicker className="calendar-input" selected={startDate} onChange={(date) => setStartDate(date)} showTimeSelect timeFormat="HH:mm" dateFormat="dd/MM/yyyy HH:mm " /> </div></div>

查看完整描述

1 回答

弒天下

TA貢獻1818條經驗獲得超8個贊

import React, { useState } from 'react';

const YourComp = () => {

? const [selectedValue, updateSelectedValue] = useState();

? const [startDate, setStartDate] = useState(new Date())

? const onSelectChange = ({ target: { value } }) => updateSelectedValue(value);

? return (

? ? <div className="input-block">

? ? ?<label htmlFor="status">Status</label>

? ? ?<select

? ? ? id="status"

? ? ? name="status"

? ? ? required

? ? ? onChange={onSelectChange}

? ? ?>

? ? ? ?<option value="1">Aguardando Disponibilidade</option>

? ? ? ?<option value="2">Aguardando Agendamento</option>

? ? ? ?<option value="3">Ativa??o Agendada</option>

? ? ? ?<option value="4">Ativa??o Efetuada</option>

? ? ?</select>

? ?{

? ? ?selectedValue === '3'

? ? ?? (

? ? ? <div className="calendar">

? ? ? ? <DatePicker

? ? ? ? ?className="calendar-input"

? ? ? ? ?selected={startDate}

? ? ? ? ?onChange={(date) => setStartDate(date)}

? ? ? ? ?showTimeSelect

? ? ? ? ?timeFormat="HH:mm"

? ? ? ? ?dateFormat="dd/MM/yyyy HH:mm "

? ? ? ? />

? ? ? </div>

? ? ?)

? ? ?: null

? ?}

</div>

? )

}

上面提到的代碼應該可以解決您的問題。這個想法是進行條件檢查以呈現 DatePicker 組件。

反對回復 2023-04-20

1 回答
0 關注
153 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何僅在選擇選項時顯示日期選擇器？

如何僅在選擇選項時顯示日期選擇器？

1 回答

添加回答

如何僅在選擇選項時顯示日期選擇器？