aboutsummaryrefslogtreecommitdiffhomepage
path: root/examples/value-and-defaultValue.html
diff options
context:
space:
mode:
authoryiminghe <yiminghe@gmail.com>2016-08-04 19:54:59 +0800
committeryiminghe <yiminghe@gmail.com>2016-08-04 19:54:59 +0800
commit40e6f165fecf11a01159ff3e1ddd9e37af3cb492 (patch)
tree7dcc572302d0f49a5e6499024f402836a8d8ae84 /examples/value-and-defaultValue.html
parent6cadbb3ade01969826b676b91182b3862f9c4d19 (diff)
downloadtime-picker-40e6f165fecf11a01159ff3e1ddd9e37af3cb492.tar.gz
time-picker-40e6f165fecf11a01159ff3e1ddd9e37af3cb492.tar.zst
time-picker-40e6f165fecf11a01159ff3e1ddd9e37af3cb492.zip
Updates
Diffstat (limited to 'examples/value-and-defaultValue.html')
-rw-r--r--examples/value-and-defaultValue.html76
1 files changed, 37 insertions, 39 deletions
diff --git a/examples/value-and-defaultValue.html b/examples/value-and-defaultValue.html
index 349c106..ea5cbed 100644
--- a/examples/value-and-defaultValue.html
+++ b/examples/value-and-defaultValue.html
@@ -2,12 +2,12 @@
2<html> 2<html>
3 3
4<head> 4<head>
5 <title>value-and-defaultValue.js - example - rc-time-picker@1.1.6</title> 5 <title>value-and-defaultValue.js - example - rc-time-picker@2.0.0</title>
6 <meta name="viewport" 6 <meta name="viewport"
7 content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 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"/> 8 <meta charset="utf-8"/>
9 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 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"/> 10 <link href="https://a.alipayobjects.com/normalize.css/3.0.1/normalize.css" rel="stylesheet"/>
11 <style> 11 <style>
12 .highlight pre { 12 .highlight pre {
13 padding: .8em 1em; 13 padding: .8em 1em;
@@ -251,44 +251,36 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
251 <!--[if lt IE 9]> 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> 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]--> 253 <![endif]-->
254
254 <link rel="stylesheet" href="common.css" /> 255 <link rel="stylesheet" href="common.css" />
255</head> 256</head>
256 257
257<body> 258<body>
258<div class="container"> 259 <div class="container">
259 <div class="header"> 260 <div class="header">
260 <h1>rc-time-picker@1.1.6</h1> 261 <h1>rc-time-picker@2.0.0</h1>
261 262
262 <p>React TimePicker</p> 263 <p>React TimePicker</p>
263 </div> 264 </div>
264 <div class="example" id="__react-content"></div> 265 <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
269import <span class="hljs-string">'rc-time-picker/assets/index.css'</span>;
270 266
271import React from <span class="hljs-string">'react'</span>; 267 <div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint no-console:0 */</span>
272import ReactDom from <span class="hljs-string">'react-dom'</span>;
273 268
274import GregorianCalendar from <span class="hljs-string">'gregorian-calendar'</span>; 269<span class="hljs-keyword">import</span> <span class="hljs-string">'rc-time-picker/assets/index.css'</span>;
275import DateTimeFormat from <span class="hljs-string">'gregorian-calendar-format'</span>;
276import TimePicker from <span class="hljs-string">'rc-time-picker'</span>;
277import TimePickerLocale from <span class="hljs-string">'rc-time-picker/lib/locale/zh_CN'</span>;
278 270
279<span class="hljs-keyword">const</span> formatter = <span class="hljs-keyword">new</span> DateTimeFormat(<span class="hljs-string">'HH:mm:ss'</span>); 271<span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
280 272<span class="hljs-keyword">import</span> ReactDom <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;
281<span class="hljs-keyword">const</span> now = <span class="hljs-keyword">new</span> GregorianCalendar(TimePickerLocale.calendar); 273<span class="hljs-keyword">import</span> moment <span class="hljs-keyword">from</span> <span class="hljs-string">'moment'</span>;
282now.setTime(<span class="hljs-built_in">Date</span>.now()); 274<span class="hljs-keyword">import</span> TimePicker <span class="hljs-keyword">from</span> <span class="hljs-string">'rc-time-picker'</span>;
283 275
284<span class="hljs-keyword">const</span> App = React.createClass({ 276<span class="hljs-keyword">const</span> App = React.createClass({
285 getInitialState() { 277 getInitialState() {
286 <span class="hljs-keyword">return</span> { 278 <span class="hljs-keyword">return</span> {
287 value: now, 279 value: moment(),
288 }; 280 };
289 }, 281 },
290 handleValueChange(value) { 282 handleValueChange(value) {
291 <span class="hljs-built_in">console</span>.log(value &amp;&amp; formatter.format(value)); 283 <span class="hljs-built_in">console</span>.log(value &amp;&amp; value.format(<span class="hljs-string">'HH:mm:ss'</span>));
292 <span class="hljs-keyword">this</span>.setState({ value }); 284 <span class="hljs-keyword">this</span>.setState({ value });
293 }, 285 },
294 clear() { 286 clear() {
@@ -299,29 +291,35 @@ now.setTime(<span class="hljs-built_in">Date</span>.now());
299 render() { 291 render() {
300 <span class="hljs-keyword">return</span> ( 292 <span class="hljs-keyword">return</span> (
301 <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span> 293 <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
302 <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> 294 <span class="hljs-tag">&lt;<span class="hljs-title">TimePicker</span>
303 <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{now}</span> /&gt;</span> 295 <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{this.state.value}</span>
304 <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> 296 <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.handleValueChange}</span>
305 <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> 297 /&gt;</span>
306 <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.handleValueChange}</span>/&gt;</span> 298 <span class="hljs-tag">&lt;<span class="hljs-title">TimePicker</span>
299 <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span>
300 <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.handleValueChange}</span>
301 /&gt;</span>
307 <span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.clear}</span>&gt;</span>clear<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span> 302 <span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.clear}</span>&gt;</span>clear<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
308 <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span> 303 <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
309 ); 304 )</span>;
310 }, 305 },
311}); 306});
312 307
313ReactDom.render( 308ReactDom.render(
314 <span class="hljs-tag">&lt;<span class="hljs-title">App</span> /&gt;</span>, 309 <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">App</span> /&gt;</span>,
315 document.getElementById('__react-content') 310 document.getElementById('__react-content')
316); 311);
317</span></code></pre></div> 312</span></code></pre></div>
318</div> 313 </div>
319<a href="http://github.com/react-component/time-picker"> 314 <a href="http://github.com/react-component/time-picker">
320 <img style="position: absolute; top: 0; right: 0; border: 0;" 315 <img style="position: absolute; top: 0; right: 0; border: 0;"
321 src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" 316 src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
322 alt="Fork me on GitHub" 317 alt="Fork me on GitHub"
323 data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"> 318 data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
324</a> 319 </a>
320
321 <script src="common.js?nowrap"></script>
322 <script src="value-and-defaultValue.js?nowrap"></script>
325</body> 323</body>
326 324
327</html> 325</html>
generated by cgit v1.2.3 (git 2.25.1) at 2025-02-16 18:11:30 +0000