aboutsummaryrefslogtreecommitdiffhomepage
path: root/examples/pick-time.html
diff options
context:
space:
mode:
Diffstat (limited to 'examples/pick-time.html')
-rw-r--r--examples/pick-time.html72
1 files changed, 35 insertions, 37 deletions
diff --git a/examples/pick-time.html b/examples/pick-time.html
index a2e6b11..594e96f 100644
--- a/examples/pick-time.html
+++ b/examples/pick-time.html
@@ -2,12 +2,12 @@
2<html> 2<html>
3 3
4<head> 4<head>
5 <title>pick-time.js - example - rc-time-picker@1.1.6</title> 5 <title>pick-time.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,61 +251,59 @@ 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
266 <script src="pick-time.js?nowrap"></script> 267 <div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint no-console:0 */</span>
267 <div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint no-console:0 */</span>
268 268
269import <span class="hljs-string">'rc-time-picker/assets/index.css'</span>; 269<span class="hljs-keyword">import</span> <span class="hljs-string">'rc-time-picker/assets/index.css'</span>;
270 270
271import React from <span class="hljs-string">'react'</span>; 271<span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
272import ReactDom from <span class="hljs-string">'react-dom'</span>; 272<span class="hljs-keyword">import</span> ReactDom <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;
273 273
274import GregorianCalendar from <span class="hljs-string">'gregorian-calendar'</span>; 274<span class="hljs-keyword">import</span> moment <span class="hljs-keyword">from</span> <span class="hljs-string">'moment'</span>;
275import DateTimeFormat from <span class="hljs-string">'gregorian-calendar-format'</span>;
276 275
277import TimePicker from <span class="hljs-string">'rc-time-picker'</span>; 276<span class="hljs-keyword">import</span> TimePicker <span class="hljs-keyword">from</span> <span class="hljs-string">'rc-time-picker'</span>;
278import TimePickerLocale from <span class="hljs-string">'rc-time-picker/lib/locale/zh_CN'</span>;
279 277
280<span class="hljs-keyword">const</span> showSecond = <span class="hljs-literal">true</span>; 278<span class="hljs-keyword">const</span> showSecond = <span class="hljs-literal">true</span>;
281<span class="hljs-keyword">const</span> str = showSecond ? <span class="hljs-string">'HH:mm:ss'</span> : <span class="hljs-string">'HH:mm'</span>; 279<span class="hljs-keyword">const</span> str = showSecond ? <span class="hljs-string">'HH:mm:ss'</span> : <span class="hljs-string">'HH:mm'</span>;
282 280
283<span class="hljs-keyword">const</span> formatter = <span class="hljs-keyword">new</span> DateTimeFormat(str);
284 281
285<span class="hljs-keyword">const</span> now = <span class="hljs-keyword">new</span> GregorianCalendar(TimePickerLocale.calendar); 282<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onChange</span>(<span class="hljs-params">value</span>) </span>{
286now.setTime(<span class="hljs-built_in">Date</span>.now()); 283 <span class="hljs-built_in">console</span>.log(value &amp;&amp; value.format(str));
287
288<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onChange</span><span class="hljs-params">(value)</span> </span>{
289 <span class="hljs-built_in">console</span>.log(value &amp;&amp; formatter.format(value));
290} 284}
291 285
292ReactDom.render( 286ReactDom.render(
293 <span class="xml"><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> 287 <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">TimePicker</span>
294 <span class="hljs-attribute">style</span>=<span class="hljs-value">{{width:</span> <span class="hljs-attribute">100</span>}} 288 <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">width:</span> <span class="hljs-attribute">100</span> }}
295 <span class="hljs-attribute">showSecond</span>=<span class="hljs-value">{showSecond}</span> 289 <span class="hljs-attribute">showSecond</span>=<span class="hljs-value">{showSecond}</span>
296 <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{now}</span> 290 <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{moment()}</span>
297 <span class="hljs-attribute">className</span>=<span class="hljs-value">"xxx"</span> 291 <span class="hljs-attribute">className</span>=<span class="hljs-value">"xxx"</span>
298 <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{onChange}</span> /&gt;</span>, 292 <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{onChange}</span>
293 /&gt;</span>,
299 document.getElementById('__react-content') 294 document.getElementById('__react-content')
300); 295);
301</span></code></pre></div> 296</span></code></pre></div>
302</div> 297 </div>
303<a href="http://github.com/react-component/time-picker"> 298 <a href="http://github.com/react-component/time-picker">
304 <img style="position: absolute; top: 0; right: 0; border: 0;" 299 <img style="position: absolute; top: 0; right: 0; border: 0;"
305 src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" 300 src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
306 alt="Fork me on GitHub" 301 alt="Fork me on GitHub"
307 data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"> 302 data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
308</a> 303 </a>
304
305 <script src="common.js?nowrap"></script>
306 <script src="pick-time.js?nowrap"></script>
309</body> 307</body>
310 308
311</html> 309</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 21:42:06 +0000