aboutsummaryrefslogtreecommitdiffhomepage
path: root/examples/value-and-defaultValue.html
diff options
context:
space:
mode:
Diffstat (limited to 'examples/value-and-defaultValue.html')
-rw-r--r--examples/value-and-defaultValue.html323
1 files changed, 323 insertions, 0 deletions
diff --git a/examples/value-and-defaultValue.html b/examples/value-and-defaultValue.html
new file mode 100644
index 0000000..3469696
--- /dev/null
+++ b/examples/value-and-defaultValue.html
@@ -0,0 +1,323 @@
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>value-and-defaultValue.js - example - rc-time-picker@1.0.0-alpha3</title>
6 <meta name="viewport"
7 content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
8 <meta charset="utf-8"/>
9 <meta http-equiv="X-UA-Compatible" content="IE=edge">
10 <link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
11 <style>
12 .highlight pre {
13 padding: .8em 1em;
14 font: 14px/20px Consolas, Monaco, 'Andale Mono', monospace;
15 border: 1px solid #e5e8ec;
16 border-radius: 3px;
17 background-color: #21221d;
18 background-image: -webkit-linear-gradient(#21221d 50%, #272822 50%);
19 background-image: -moz-linear-gradient(#21221d 50%, #272822 50%);
20 background-image: -ms-linear-gradient(#21221d 50%, #272822 50%);
21 background-image: -o-linear-gradient(#21221d 50%, #272822 50%);
22 background-image: linear-gradient(#21221d 50%, #272822 50%);
23 background-size: 40px 40px;
24 background-origin: content-box;
25 overflow: auto;
26 -webkit-overflow-scrolling: touch;
27 }
28
29 .highlight pre > code {
30 font-family: inherit;
31 direction: ltr;
32 text-align: left;
33 white-space: pre;
34 word-spacing: normal;
35 vertical-align: 2px;
36 display: block;
37 -moz-tab-size: 2;
38 -o-tab-size: 2;
39 tab-size: 2;
40 -webkit-hyphens: none;
41 -moz-hyphens: none;
42 -ms-hyphens: none;
43 hyphens: none;
44 color: #E5E5C2;
45 }
46 </style>
47 <style>
48/*
49
50Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
51
52*/
53
54.hljs {
55 display: block;
56 overflow-x: auto;
57 padding: 0.5em;
58 background: #23241f;
59 -webkit-text-size-adjust: none;
60}
61
62.hljs,
63.hljs-tag,
64.css .hljs-rule,
65.css .hljs-value,
66.aspectj .hljs-function,
67.css .hljs-function
68.hljs-preprocessor,
69.hljs-pragma {
70 color: #f8f8f2;
71}
72
73.hljs-strongemphasis,
74.hljs-strong,
75.hljs-emphasis {
76 color: #a8a8a2;
77}
78
79.hljs-bullet,
80.hljs-blockquote,
81.hljs-horizontal_rule,
82.hljs-number,
83.hljs-regexp,
84.alias .hljs-keyword,
85.hljs-literal,
86.hljs-hexcolor {
87 color: #ae81ff;
88}
89
90.hljs-code,
91.hljs-title,
92.css .hljs-class,
93.hljs-class .hljs-title:last-child {
94 color: #a6e22e;
95 /*color: #e6db74;*/
96}
97
98.hljs-link_url {
99 font-size: 80%;
100}
101
102.hljs-strong,
103.hljs-strongemphasis {
104 font-weight: bold;
105}
106
107.hljs-emphasis,
108.hljs-strongemphasis,
109.hljs-class .hljs-title:last-child,
110.hljs-typename {
111 font-style: italic;
112}
113
114.hljs-keyword,
115.ruby .hljs-class .hljs-keyword:first-child,
116.ruby .hljs-function .hljs-keyword,
117.hljs-function,
118.hljs-change,
119.hljs-winutils,
120.hljs-flow,
121.nginx .hljs-title,
122.tex .hljs-special,
123.hljs-header,
124.hljs-symbol,
125.hljs-symbol .hljs-string,
126.hljs-tag .hljs-title,
127.hljs-value,
128.alias .hljs-keyword:first-child,
129.css .hljs-tag,
130.css .unit,
131.css .hljs-important {
132 color: #f92672;
133}
134
135.hljs-function .hljs-keyword,
136.hljs-class .hljs-keyword:first-child,
137.hljs-aspect .hljs-keyword:first-child,
138.hljs-constant,
139.hljs-typename,
140.hljs-name,
141.css .hljs-attribute {
142 color: #66d9ef;
143}
144
145.hljs-variable,
146.hljs-params,
147.hljs-class .hljs-title,
148.hljs-aspect .hljs-title {
149 color: #f8f8f2;
150}
151
152.hljs-tag .hljs-value,
153.hljs-string,
154.css .hljs-id,
155.hljs-subst,
156.hljs-type,
157.ruby .hljs-class .hljs-parent,
158.django .hljs-template_tag,
159.django .hljs-variable,
160.smalltalk .hljs-class,
161.django .hljs-filter .hljs-argument,
162.smalltalk .hljs-localvars,
163.smalltalk .hljs-array,
164.hljs-attr_selector,
165.hljs-pseudo,
166.hljs-addition,
167.hljs-stream,
168.hljs-envvar,
169.apache .hljs-tag,
170.apache .hljs-cbracket,
171.tex .hljs-command,
172.hljs-prompt,
173.hljs-link_label,
174.hljs-link_url {
175 color: #e6db74;
176}
177
178.hljs-comment,
179.hljs-annotation,
180.hljs-decorator,
181.hljs-pi,
182.hljs-doctype,
183.hljs-deletion,
184.hljs-shebang,
185.apache .hljs-sqbracket,
186.tex .hljs-formula {
187 color: #75715e;
188}
189
190.coffeescript .javascript,
191.javascript .xml,
192.tex .hljs-formula,
193.xml .javascript,
194.xml .vbscript,
195.xml .css,
196.xml .hljs-cdata,
197.xml .php,
198.php .xml {
199 opacity: 0.5;
200}
201/***********/
202.hljs-attribute{
203 color: #a6e22e;
204}
205/***** node keyword ******/
206.hljs-built_in{
207 color: #3396dc;
208 font-weight: bold;
209}
210 </style>
211 <style>
212 .container {
213 width: 86%;
214 max-width: 1000px;
215 margin-left: auto;
216 margin-right: auto;
217 }
218
219 .header p {
220 color: #666;
221 }
222
223 .example {
224 padding: 20px 0;
225 }
226 </style>
227
228 <script>
229 // Console-polyfill. MIT license.
230 // https://github.com/paulmillr/console-polyfill
231 // Make it safe to do console.log() always.
232 (function (global) {
233 'use strict';
234 global.console = global.console || {};
235 var con = global.console;
236 var prop, method;
237 var empty = {};
238 var dummy = function () {
239 };
240 var properties = 'memory'.split(',');
241 var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
242 'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
243 'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
244 while (prop = properties.pop()) con[prop] = con[prop] || empty;
245 while (method = methods.pop()) con[method] = con[method] || dummy;
246 })(typeof window === 'undefined' ? this : window);
247 // Using `this` for web workers while maintaining compatibility with browser
248 // targeted script loaders such as Browserify or Webpack where the only way to
249 // get to the global object is via `window`.
250 </script>
251 <!--[if lt IE 9]>
252 <script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
253 <![endif]-->
254 <link rel="stylesheet" href="common.css" />
255</head>
256
257<body>
258<div class="container">
259 <div class="header">
260 <h1>rc-time-picker@1.0.0-alpha3</h1>
261
262 <p>React TimePicker</p>
263 </div>
264 <div class="example" id="__react-content"></div>
265 <script src="common.js?nowrap"></script>
266 <script src="value-and-defaultValue.js?nowrap"></script>
267 <div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint no-console:0 */</span>
268
269<span class="hljs-keyword">import</span> <span class="hljs-string">'rc-time-picker/assets/index.css'</span>;
270
271<span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
272<span class="hljs-keyword">import</span> ReactDom <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;
273
274<span class="hljs-keyword">import</span> GregorianCalendar <span class="hljs-keyword">from</span> <span class="hljs-string">'gregorian-calendar'</span>;
275<span class="hljs-keyword">import</span> DateTimeFormat <span class="hljs-keyword">from</span> <span class="hljs-string">'gregorian-calendar-format'</span>;
276<span class="hljs-keyword">import</span> zhCn <span class="hljs-keyword">from</span> <span class="hljs-string">'gregorian-calendar/lib/locale/zh_CN'</span>;
277
278<span class="hljs-keyword">import</span> TimePicker <span class="hljs-keyword">from</span> <span class="hljs-string">'rc-time-picker'</span>;
279<span class="hljs-keyword">import</span> TimePickerLocale <span class="hljs-keyword">from</span> <span class="hljs-string">'rc-time-picker/lib/locale/zh_CN'</span>;
280
281<span class="hljs-keyword">const</span> formatter = <span class="hljs-keyword">new</span> DateTimeFormat(<span class="hljs-string">'HH:mm:ss'</span>);
282
283<span class="hljs-keyword">const</span> now = <span class="hljs-keyword">new</span> GregorianCalendar(zhCn);
284now.setTime(<span class="hljs-built_in">Date</span>.now());
285
286<span class="hljs-keyword">const</span> App = React.createClass({
287 getInitialState() {
288 <span class="hljs-keyword">return</span> {
289 value: now,
290 };
291 },
292 handleValueChange(value) {
293 <span class="hljs-built_in">console</span>.log(value &amp;&amp; formatter.format(value));
294 <span class="hljs-keyword">this</span>.setState({ value });
295 },
296 render() {
297 <span class="hljs-keyword">return</span> (
298 <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
299 <span class="hljs-tag">&lt;<span class="hljs-title">TimePicker</span> <span class="hljs-attribute">formatter</span>=<span class="hljs-value">{formatter}</span> <span class="hljs-attribute">locale</span>=<span class="hljs-value">{TimePickerLocale}</span>
300 <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{now}</span> /&gt;</span>
301 <span class="hljs-tag">&lt;<span class="hljs-title">TimePicker</span> <span class="hljs-attribute">formatter</span>=<span class="hljs-value">{formatter}</span> <span class="hljs-attribute">locale</span>=<span class="hljs-value">{TimePickerLocale}</span>
302 <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span>
303 <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.handleValueChange}</span>/&gt;</span>
304 <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
305 )</span>;
306 },
307});
308
309ReactDom.render(
310 <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">App</span> /&gt;</span>,
311 document.getElementById('__react-content')
312);
313</span></code></pre></div>
314</div>
315<a href="http://github.com/react-component/time-picker">
316 <img style="position: absolute; top: 0; right: 0; border: 0;"
317 src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
318 alt="Fork me on GitHub"
319 data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
320</a>
321</body>
322
323</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-24 12:20:52 +0000