react-bootstrap-datetimepicker/examples/basic/basic.js at e1a51df73859cb75041a3ad0ce6af754c1fe5946 · quri/react-bootstrap-datetimepicker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, { Component } from "react";
import DateTimeField from "react-bootstrap-datetimepicker";
import moment from "moment";

class Basic extends Component {
  state = {
    locale: "en"
  }

	render() {
    return (
          <div className="container">
						<div className="row">
							<div className="col-xs-12">
								<h1>React Bootstrap DateTimePicker</h1>
								This project is a port of <a href="https://github.com/Eonasdan/bootstrap-datetimepicker">https://github.com/Eonasdan/bootstrap-datetimepicker</a> for React.js
							</div>
						</div>
						<div className="row">
							<div className="col-xs-12">
								Default Basic Example
								<DateTimeField />
								<pre> {'<DateTimeField />'} </pre>
							</div>
						</div>
						<div className="row">
							<div className="col-xs-12">
								Example with default Text
								<DateTimeField
									defaultText="Please select a date"
								/>
								<pre> {'<DateTimeField defaultText="Please select a date" />'} </pre>
							</div>
						</div>
						<div className="row">
							<div className="col-xs-12">
                ViewMode set to years view with custom inputFormat
                <DateTimeField
                  inputFormat='DD-MM-YYYY'
                  viewMode='years'
                />
                <pre> {'<DateTimeField viewMode="years" inputFormat="DD-MM-YYYY" />'} </pre>
							</div>
						</div>
						<div className="row">
							<div className="col-xs-12">
                daysOfWeekDisabled
                <DateTimeField
                  daysOfWeekDisabled={[0, 1, 2]}
                />
                <pre> {'<DateTimeField daysOfWeekDisabled={[0,1,2]} />'} </pre>

              </div>
						</div>
						<div className="row">
							<div className="col-xs-12">
                minDate and maxDate
                <DateTimeField
                  maxDate={moment().add(1, "days")}
                  minDate={moment().subtract(1, "days")}
                />
                <pre> {'<DateTimeField daysOfWeekDisabled={[0,1,2]} />'} </pre>

              </div>
						</div>
            <div className="row">
              <div className="col-xs-12">
                  just time picker
                  <DateTimeField
                      mode="time"
                      />
                  <pre> {'<DateTimeField mode="time" />'} </pre>
              </div>
            </div>
            <div className="row">
              <div className="col-xs-12">
                  just date picker
                  <DateTimeField
                      mode="date"
                      />
                  <pre> {'<DateTimeField mode="date" />'} </pre>
              </div>
            </div>
            <div className="row">
              <div className="col-xs-12">
                  i18n
                  <DateTimeField
                      mode="date"
                      dateTime={this.state.value}
                      locale={this.state.locale}
                      onChange={this._handleDateTimeChange}
                      />
                  <pre> {'<DateTimeField mode="date" locale="' + this.state.locale + '"/>'} </pre>
              </div>
              <div>
                 <div className="col-xs-2">Language:</div>
                 <div className="col-xs-10">
                     <select id="locale" value={this.state.locale} onChange={this._handleLocaleChange} className="form-control">
                         <option value="en">English(en)</option>
                         <option value="fr">French(fr)</option>
                         <option value="ja">Japan(ja)</option>
                     </select>
                 </div>
              </div>
            </div>
          </div>
      );
   }

   _handleLocaleChange = (event) => {
     this.setState({locale: event.target.value});
   }

   _handleDateTimeChange = (dateTime) => {
     this.setState({value: dateTime});
   }
}


React.render(React.createFactory(Basic)(), document.getElementById("example"));