Как поместить 'fontawesome' в реагирующий на ввод даты? - PullRequest
Новая
       19

Как поместить 'fontawesome' в реагирующий на ввод даты?

2 голосов
/ 06 июня 2019

Как поместить 'fontawesome' в реагирующий на ввод даты?Библиотека: реагирует на дату.Является ли это возможным?Я пытался использовать: после того, как на классе реагировать-datepicker__input_container 

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    showTimeSelect
    timeFormat="HH:mm"
    timeIntervals={15}
    dateFormat="yyyy-MM-dd || HH:mm"
    timeCaption="time"
  /> 

.react-datepicker__input_container:after {
    color: red;
    content: 'X';
    display: inline-block;
    padding: 0 5px;
    width: 40px;
    height: 100%;
    position: absolute;
    text-align: center;
    top: 20%;
    right: 0;
}

.react-datepicker__input_container input {
    padding-right: 2.5rem;
    text-align: center;
    color: blue !important;
    font-weight: 600 !important;
}

1 Ответ

1 голос
/ 09 июня 2019

Вы можете передать пользовательский ввод DatePicker в качестве реквизита. создайте пользовательский компонент ввода со значком FA и передайте его как пропеллер. 

class CustomInput extends React.Component {
  render() {
    return (
      <div className="wrapper">
        <i onClick={this.props.onClick} aria-hidden="true" className="fa fa-calendar"></i>
        <input onClick={this.props.onClick} className="dateInput" value={this.props.value} type="text" />
      </div>
    )
  }
}

CSS 

.wrapper { position: relative; }
i.fa-calendar { position: absolute; top: 1px; left: 5px; }

.dateInput {
  padding-left: 20px;
}

Демо

Пример 

.wrapper { position: relative; }
i.fa-calendar { position: absolute; top: 1px; left: 5px; }

.dateInput {
    padding-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="root"></div>

<script type="text/babel">

class CustomInput extends React.Component {
  render() {
    return (
      <div className="wrapper">
        <i onClick={this.props.onClick} aria-hidden="true" className="fa fa-calendar"></i>
        <input onClick={this.props.onClick} className="dateInput" value={this.props.value} type="text" />
      </div>
    )
  }
}

ReactDOM.render(
    <CustomInput value='19-12-16, 02:00' />,
    document.getElementById('root')
);
</script>
...