第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何僅在選擇選項(xiàng)時(shí)顯示日期選擇器?

如何僅在選擇選項(xiàng)時(shí)顯示日期選擇器?

元芳怎么了 2023-04-20 10:15:46
我正在使用 react-datepicker 并選擇了 4 個(gè)選項(xiàng),我只需要在選擇選項(xiàng)號(hào) 3 時(shí)顯示日歷。這是我到目前為止的代碼。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貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超8個(gè)贊

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>

? )

}

上面提到的代碼應(yīng)該可以解決您的問題。這個(gè)想法是進(jìn)行條件檢查以呈現(xiàn) DatePicker 組件。


查看完整回答
反對(duì) 回復(fù) 2023-04-20
  • 1 回答
  • 0 關(guān)注
  • 158 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)