@@ -2,6 +2,28 @@ import React, { Component } from "react";
22import DateTimeField from "react-bootstrap-datetimepicker" ;
33import moment from "moment" ;
44
5+ class ParentComponent extends Component {
6+ constructor ( props ) {
7+ super ( props ) ;
8+ this . state = {
9+ date : "1990-06-05" ,
10+ format : "YYYY-MM-DD" ,
11+ inputFormat : "DD/MM/YYYY" ,
12+ mode : "date"
13+ } ;
14+ }
15+
16+ handleChange ( newDate , event ) {
17+ console . log ( "newDate" , newDate , "event" , event ) ;
18+ return this . setState ( { date : newDate } ) ;
19+ }
20+
21+ render ( ) {
22+ const { date, format, mode, inputFormat} = this . state ;
23+ return < DateTimeField dateTime = { date } format = { format } viewMode = { mode } inputFormat = { inputFormat } /> ;
24+ }
25+ }
26+
527class Basic extends Component {
628
729render ( ) {
@@ -13,7 +35,44 @@ class Basic extends Component {
1335This project is a port of < a href = "https://github.com/Eonasdan/bootstrap-datetimepicker" > https://github.com/Eonasdan/bootstrap-datetimepicker</ a > for React.js
1436</ div >
1537</ div >
16- < div className = "row" >
38+ < div className = "row" >
39+ < div className = "col-xs-12" >
40+ Controlled Component example
41+ < ParentComponent />
42+ < pre >
43+ { `class ParentComponent extends Component {
44+ constructor(props) {
45+ super(props);
46+ this.state = {
47+ date: "1990-06-05",
48+ format: "YYYY-MM-DD",
49+ mode: "date"
50+ };
51+ }
52+
53+ handleChange(newDate, event) {
54+ console.log("newDate", newDate, "event", event);
55+ return this.setState({date: newDate})
56+ }
57+
58+ render() {
59+ const {date, format, mode} = this.state;
60+ return <DateTimeField dateTime={date} format={format} viewMode={mode} />;
61+ }
62+ }` }
63+ </ pre >
64+ </ div >
65+ </ div >
66+ < div className = "row" >
67+ < div className = "col-xs-12" >
68+ Example with default Text
69+ < DateTimeField
70+ defaultText = "Please select a date"
71+ />
72+ < pre > { '<DateTimeField defaultText="Please select a date" />' } </ pre >
73+ </ div >
74+ </ div >
75+ < div className = "row" >
1776< div className = "col-xs-12" >
1877Default Basic Example
1978< DateTimeField />
0 commit comments