CODEWITHSUNDEEP
reactjsdatepicker
Jane Fred
Jane Fred

Reputation: 1489

How to write date in a field with date format?

Selected by datepicker by writing, here is the problem

I want to write a date at the same time if we select datepicker that date may select

The date picker code is already working but when I'm trying to write it doesn't show in a date format for example if I trying to write 05/01/2019 it shows as 05012019 I want it as 05/01/2019 format.

<div>
<Field name="BirthDate" component= {datepicker} placeholder={'DAY / MONTH / YEAR'}/>
</div>

datepicker code

 const { input: { value, onChange }, disabled, showTime } = this.props;
        return (
            <div className="datepicker">
                <DatePicker
                    selected={value ? moment(value) : null}
                    onChange={onChange}
                    disabled={disabled}
                    format="dd/mm/yyyy"
                    time={showTime}
                />
                <div className="calendar-block">
                    <CalendarIcon onClick={this.datepicker}
                    />
                </div>
            </div>

Upvotes: 1

Views: 1171

Answers (2)

vd_virani
vd_virani

Reputation: 153

Jane Fred

try like below 

const datepicker = ({ input: { onChange, value }, showTime }) =>
     <div className="datepicker">
            <DatePicker
                selected={value ? new Date(moment(value)) : null}
                onChange={onChange}
                disabled={disabled}
                showTimeSelect
                showTimeSelectOnly
                dateFormat="dd/mm/yyyy"
            />
            <div className="calendar-block">
                <CalendarIcon onClick={this.datepicker}
                />
            </div>
        </div>

and use it like 

<div>
<Field name="BirthDate" component= {datepicker} placeholder={'DAY / MONTH / YEAR'}/>
</div>

thanks

So, more info

Upvotes: 3

Liz.
Liz.

Reputation: 815

You will have to first import Date-picker dependency :

  1. Import datepicker and moment:

    import DatePicker from 'react-datepicker'; import moment from 'moment';

  2. Add the html input as below:

    <DatePicker selected={this.state.selectedDate} onChange={this.handleDateChange} name="Start Date" dateFormat="dd-mm-yyyy" />

  3. HandleDateChange and selectedDate will be as follows:

    In your constructor method add :

    this.state = { selectedDate: moment() }

    this.handleDateChange = this.handleDateChange.bind(this);

    Add this method:

    handleDateChange(date){ this.setState({ selectedDate: date }); }

Upvotes: 0

Related Questions