javascript - 将外观输入字段更改为日期选择器中的按钮

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 将不是必需的。