| commit | author | age | ||
| de3fe1 | 1 | import React, { Component } from 'react'; |
| SE | 2 | import DateTime from 'react-datetime'; |
| 6daddb | 3 | |
| JL | 4 | export default class CustomizableExample extends Component { |
| 5 | state = { | |
| 6 | viewMode: 'days', | |
| 7 | dateFormat: 'MM/DD/YYYY', | |
| 8 | timeFormat: 'HH:mm A', | |
| 9 | input: true, | |
| 10 | utc: false, | |
| 11 | closeOnSelect: false, | |
| de3fe1 | 12 | closeOnTab: true |
| SE | 13 | }; |
| 6daddb | 14 | |
| JL | 15 | render() { |
| de3fe1 | 16 | const Select = ({ name, children }) => ( |
| 6daddb | 17 | <div className="form-group"> |
| de3fe1 | 18 | <label className="control-label col-xs-6">{name}</label> |
| 6daddb | 19 | |
| JL | 20 | <div className="col-xs-6"> |
| 21 | <select | |
| 22 | className="form-control" | |
| 23 | value={this.state[name]} | |
| de3fe1 | 24 | onChange={(e) => this.setState({ [name]: e.target.value })} |
| 6daddb | 25 | > |
| JL | 26 | {children} |
| 27 | </select> | |
| 28 | </div> | |
| 29 | </div> | |
| de3fe1 | 30 | ); |
| 6daddb | 31 | |
| de3fe1 | 32 | const Checkbox = ({ name }) => ( |
| 6daddb | 33 | <div className="form-group"> |
| de3fe1 | 34 | <label className="control-label col-xs-6">{name}</label> |
| 6daddb | 35 | |
| JL | 36 | <div className="col-xs-6"> |
| 37 | <input | |
| 38 | type="checkbox" | |
| 39 | checked={this.state[name]} | |
| de3fe1 | 40 | onChange={(e) => this.setState({ [name]: e.target.checked })} |
| 6daddb | 41 | /> |
| JL | 42 | </div> |
| 43 | </div> | |
| de3fe1 | 44 | ); |
| 6daddb | 45 | |
| JL | 46 | return ( |
| 47 | <div className="form-horizontal"> | |
| 48 | <h2>Customization props</h2> | |
| 49 | <p> | |
| de3fe1 | 50 | Try out various configuration options and see how they affect the |
| SE | 51 | component. |
| 6daddb | 52 | </p> |
| JL | 53 | |
| 54 | <DateTime | |
| 55 | defaultValue={new Date()} | |
| 56 | onChange={console.log} | |
| 57 | {...this.state} | |
| 58 | /> | |
| 59 | ||
| 60 | <hr /> | |
| 61 | ||
| 62 | <Select name="dateFormat"> | |
| 63 | <option value="">false</option> | |
| 64 | <option>YYYY-MM-DD</option> | |
| 65 | <option>MM/DD/YYYY</option> | |
| 66 | <option>DD.MM.YYYY</option> | |
| 67 | <option>MM-DD</option> | |
| 68 | <option>MMMM</option> | |
| 69 | <option>YYYY/MM</option> | |
| 70 | <option>YYYY</option> | |
| 71 | <option>L</option> | |
| 72 | <option>LL</option> | |
| 73 | </Select> | |
| 74 | ||
| 75 | <Select name="timeFormat"> | |
| 76 | <option value="">false</option> | |
| 77 | <option>HH:mm A</option> | |
| 78 | <option>HH:mm:ss</option> | |
| 79 | <option>HH:mm:SSS</option> | |
| 80 | <option>hmm</option> | |
| 81 | <option>HH:mm Z</option> | |
| 82 | <option>LT</option> | |
| 83 | <option>LTS</option> | |
| 84 | </Select> | |
| 85 | ||
| 86 | <Select name="viewMode"> | |
| 87 | <option>years</option> | |
| 88 | <option>months</option> | |
| 89 | <option>days</option> | |
| 90 | <option>time</option> | |
| 91 | </Select> | |
| 92 | ||
| 93 | <Checkbox name="utc" /> | |
| 94 | ||
| 95 | <Checkbox name="closeOnSelect" /> | |
| 96 | ||
| 97 | <Checkbox name="closeOnTab" /> | |
| 98 | </div> | |
| de3fe1 | 99 | ); |
| 6daddb | 100 | } |
| JL | 101 | } |
