Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.13.1.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
</body>
</html>
 
.placeholder { position: absolute; z-index: -1; }
.dateinput { opacity: 0; }
.dateinputfocused .dateinput { opacity: 1; }
 
var App = React.createClass({
  getInitialState: function() {
    return {
      dateInputFocused: false
    }
  },
  
  onDateInputFocus: function(e) {
    this.setState({
      dateInputFocused: true
    });
  },
  
  onDateInputBlur: function(e) {
    if (!e.target.value) {
      this.setState({
        dateInputFocused: false
      });
    }
  },
  
  render: function() {
    var className = "";
    if (this.state.dateInputFocused) {
      className="dateinputfocused";
    }
    
    return (
      <div className={className}>
        <input type="text" placeholder="Placeholder" className="placeholder" />
        <input type="date" className="dateinput" onFocus={this.onDateInputFocus} onBlur={this.onDateInputBlur} />
      </div>
    );
  }
});
​
React.render(<App />, document.body);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers