custom input of react date picker using button on input style

[rajshah2399]

Using React Date picker and also used custom input for style regarding. please see the code below and help me out with this.

1. Dateselector.jsx <DateSelectorWrapper> <DatePickerContainer label={t('assign_share_modal.date_time_selector.start_date', 'Start date')} date={startDate} setDate={setStartDate} /> </DateSelectorWrapper>

2. DatePickerContainer.jsx

import DatePicker from 'react-datepicker'; import PropTypes from 'prop-types'; import { Label, DateStyles, DateController } from './index.styled'; import DatePickerInput from '../DatePickerInput/index';

const DatePickerContainer = ({ date, setDate, label, dateFormat, ...otherProps }) => ( <DateController> {label && <Label>{label}</Label>} <DatePicker selected={date} onChange={dt => setDate(dt)} customInput={<DatePickerInput date={date} dateFormat={dateFormat} />} formatWeekDay={nameOfDay => nameOfDay.substr(0, 3).toUpperCase()} {...otherProps} /> <DateStyles /> </DateController> );

3)customInput.jsx

import { CustomInput, ArrowIconContainer } from './index.styled'; const DatePickerInput = forwardRef(({ onClick, dateFormat, date }, ref) => ( <CustomInput primary iconRight onClick={onClick}> {dayjs(date).format(dateFormat)} <ArrowIconContainer> <Icon.ArrowDownSmall size={24} color="#000" /> </ArrowIconContainer> </CustomInput> ));

and that custom input is a type of button and CSS is this

export const CustomInput = styled(Button)display: flex; justify-content: space-between;;

I'm stuck. I needed to pass a placeholder when the user navigates to the date selector and if the user changes the date then the default date is shown otherwise print only placeholder="Select start date"

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.