将外观输入字段更改为datepicker

Question

我有输入字段，我想将其更改为按钮。使它看起来像而不是 只是切换标记名不起作用。我怎么能这样做？

class MyComponent extends React.Component {
  componentDidMount(){
    this.initDatepicker();
  }
  
  initDatepicker(){
    $(this.refs.datepicker).datepicker();
  }
  
  render(){
    return (
      <div>
        <h3>Choose date!</h3>
        <input type='text'  ref='datepicker' />
      </div>    
    )
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/>

<div id="app"></div>

Answer 1

像按钮一样设置输入样式：

<强>演示：：http://jsfiddle.net/GCu2D/1996/

<强> CSS：

.input {
  background: #216BA5;
  border: 1px solid #216BA5;
  cursor: pointer;
  color: #FFF;
  padding: 5px 10px;
  border-radius: 4px;
  text-align: center

}

<强> HTML

  <input readonly type="text" class="input" value="2017-07-1" />

readonly属性是必需的，以便输入可以点击和不可编辑。

如果您可以将type="text"更改为type="button"，那么：

<input type="button" class="input" value="2017-07-1" />

readonly将不再需要。