CODEWITHSUNDEEP
javascriptjquerycssreactjsdatepicker
Rami Chasygov
Rami Chasygov

Reputation: 2784

Change appearance input field to the button in datepicker

I have input field and i wanna change it to the button. Make it look like enter image description here instead enter image description here Just switch tagname doesn't work. How i can do this? 

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>

Upvotes: 1

Views: 530

Answers (1)

K K
K K

Reputation: 18099

Style the input like a button:

Demo::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 attribute is required so that the input can be made clickable and non-editable.

If you can change type="text" to type="button", then:

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

readonly will not be required.

Upvotes: 4

Related Questions