Skip to content

Instantly share code, notes, and snippets.

@cowboy

cowboy/esnextbin.md

Created August 25, 2016 23:48
Show Gist options
  • Save cowboy/3dd661300ce4b233090040f1c39f9fe5 to your computer and use it in GitHub Desktop.
Save cowboy/3dd661300ce4b233090040f1c39f9fe5 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.29.0/react-datepicker.css">
</head>
<body>
<div id=root></div>
</body>
</html>
Raw
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import DatePicker from 'react-datepicker';
class Thing extends React.Component {
constructor() {
super();
this.state = {
start: '1/2/2016',
end: '1/12/2016',
};
}
onChangeDatePicker(prop, date) {
console.log('onChangeDatePicker', prop);
this.setState({[prop]: date});
}
onChangeInput(prop, event) {
const {value} = event.target;
console.log('onChangeInput', prop, value);
const date = moment(Number(value));
this.setState({[prop]: date});
}
render() {
const {start, end} = this.state;
const dateFormat = 'M-D-YYYY';
const startDate = moment(start, dateFormat);
const endDate = moment(end, dateFormat);
console.log('render', String(start), String(end));
return (
<form>
<p>Plain inputs</p>
Start:
<input
type="text"
defaultValue={startDate}
onBlur={e => this.onChangeInput('start', e)}
/>
<br/>
End:
<input
type="text"
defaultValue={endDate}
onBlur={e => this.onChangeInput('end', e)}
/>
<br/>
<br/>
<p>DatePicker inputs</p>
Start:
<DatePicker
dateFormat={dateFormat}
selected={startDate}
startDate={startDate}
endDate={endDate}
onChange={d => this.onChangeDatePicker('start', d)}
/>
<br/>
End:
<DatePicker
dateFormat={dateFormat}
selected={endDate}
startDate={startDate}
endDate={endDate}
onChange={d => this.onChangeDatePicker('end', d)}
/>
</form>
);
}
}
ReactDOM.render((
<Thing/>
), document.getElementById('root'));
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "15.3.1",
"react-dom": "15.3.1",
"moment": "2.14.1",
"react-datepicker": "0.29.0",
"babel-runtime": "6.11.6"
}
}
Raw
transpiled.js
'use strict';
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _moment = require('moment');
var _moment2 = _interopRequireDefault(_moment);
var _reactDatepicker = require('react-datepicker');
var _reactDatepicker2 = _interopRequireDefault(_reactDatepicker);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Thing = function (_React$Component) {
(0, _inherits3.default)(Thing, _React$Component);
function Thing() {
(0, _classCallCheck3.default)(this, Thing);
var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(Thing).call(this));
_this.state = {
start: '1/2/2016',
end: '1/12/2016'
};
return _this;
}
(0, _createClass3.default)(Thing, [{
key: 'onChangeDatePicker',
value: function onChangeDatePicker(prop, date) {
console.log('onChangeDatePicker', prop);
this.setState((0, _defineProperty3.default)({}, prop, date));
}
}, {
key: 'onChangeInput',
value: function onChangeInput(prop, event) {
var value = event.target.value;
console.log('onChangeInput', prop, value);
var date = (0, _moment2.default)(Number(value));
this.setState((0, _defineProperty3.default)({}, prop, date));
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _state = this.state;
var start = _state.start;
var end = _state.end;
var dateFormat = 'M-D-YYYY';
var startDate = (0, _moment2.default)(start, dateFormat);
var endDate = (0, _moment2.default)(end, dateFormat);
console.log('render', String(start), String(end));
return _react2.default.createElement(
'form',
null,
_react2.default.createElement(
'p',
null,
'Plain inputs'
),
'Start:',
_react2.default.createElement('input', {
type: 'text',
defaultValue: startDate,
onBlur: function onBlur(e) {
return _this2.onChangeInput('start', e);
}
}),
_react2.default.createElement('br', null),
'End:',
_react2.default.createElement('input', {
type: 'text',
defaultValue: endDate,
onBlur: function onBlur(e) {
return _this2.onChangeInput('end', e);
}
}),
_react2.default.createElement('br', null),
_react2.default.createElement('br', null),
_react2.default.createElement(
'p',
null,
'DatePicker inputs'
),
'Start:',
_react2.default.createElement(_reactDatepicker2.default, {
dateFormat: dateFormat,
selected: startDate,
startDate: startDate,
endDate: endDate,
onChange: function onChange(d) {
return _this2.onChangeDatePicker('start', d);
}
}),
_react2.default.createElement('br', null),
'End:',
_react2.default.createElement(_reactDatepicker2.default, {
dateFormat: dateFormat,
selected: endDate,
startDate: startDate,
endDate: endDate,
onChange: function onChange(d) {
return _this2.onChangeDatePicker('end', d);
}
})
);
}
}]);
return Thing;
}(_react2.default.Component);
_reactDom2.default.render(_react2.default.createElement(Thing, null), document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment