Customise input field

[timothyarmes]

Hi,

It would be great if we could add children to the input element. That would allow us to add icons. For example, using Semantic UI I'd like to produce output like this:

<div class="ui left icon input">
  <i class="calendar icon"></i>
  <input type="text" placeholder="Enter tags">
</div>

I tried this:

<div className='ui left icon input'>
   <i className='calendar icon' />
   <DateTime
      timeFormat={false}
      isValidDate={this.validFromToday}
      inputProps={{ placeholder: T('datePlaceholder')}}
      onChange={(value) => this.handleChange('startDate', value)} />
</div>

But that doesn't work since you're wrapping the input.

[arqex]

This is a hard request. I can't open the markup of the component to be editable completely. But maybe you can update your css to place the icon in the right position. Replacing the input clas by a datepicker one:

<div className='ui left icon datepicker'>
   <i className='calendar icon' />
   <DateTime
      timeFormat={false}
      isValidDate={this.validFromToday}
      inputProps={{ placeholder: T('datePlaceholder')}}
      onChange={(value) => this.handleChange('startDate', value)} />
</div>

Maybe you can position the i element absolutely over the datepicker input.

[timothyarmes]

That would be really awkward.

How about if you could however accept a 'prefix' and 'postfix' property that would insert components either side of the input....

[aseem2625]

Is there anyway I can pass a prop which acts placeholder for the input?

[timothyarmes]

inputProps={{ placeholder: 'blah')}}

[aseem2625]

@timothyarmes Thanks :) Worked.

[hiepndd]

Hi @arqex!
In react-datetime. How can I allow user only input number and slash symbol when they can manual input date instead of select from calendar.
Sorry for any inconvenience.
Thanks in advance.

[ron766]

inputProps={{ placeholder: 'blah')}}

this is not working for me