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.html46
1 files changed, 15 insertions, 31 deletions
diff --git a/examples/pick-time.html b/examples/pick-time.html
index bfeadc0..5904a3d 100644
--- a/examples/pick-time.html
+++ b/examples/pick-time.html
@@ -2,7 +2,7 @@
2<html> 2<html>
3 3
4<head> 4<head>
5 <title>pick-time.js - example - rc-time-picker@0.2.0</title> 5 <title>pick-time.js - example - rc-time-picker@0.3.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"/>
@@ -257,51 +257,35 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
257<body> 257<body>
258<div class="container"> 258<div class="container">
259 <div class="header"> 259 <div class="header">
260 <h1>rc-time-picker@0.2.0</h1> 260 <h1>rc-time-picker@0.3.0</h1>
261 261
262 <p>React TimePicker</p> 262 <p>React TimePicker</p>
263 </div> 263 </div>
264 <div class="example" id="__react-content"></div> 264 <div class="example" id="__react-content"></div>
265 <script src="common.js?nowrap"></script> 265 <script src="common.js?nowrap"></script>
266 <script src="pick-time.js?nowrap"></script> 266 <script src="pick-time.js?nowrap"></script>
267 <div class="highlight"><pre><code language="undefined">import 'rc-time-picker/assets/index.css'; 267 <div class="highlight"><pre><code language="js"><span class="hljs-keyword">import</span> <span class="hljs-string">'rc-time-picker/assets/index.css'</span>;
268 268
269import React from 'react'; 269<span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
270import ReactDom from 'react-dom'; 270<span class="hljs-keyword">import</span> ReactDom <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;
271 271
272import GregorianCalendar from 'gregorian-calendar'; 272<span class="hljs-keyword">import</span> GregorianCalendar <span class="hljs-keyword">from</span> <span class="hljs-string">'gregorian-calendar'</span>;
273import DateTimeFormat from 'gregorian-calendar-format'; 273<span class="hljs-keyword">import</span> DateTimeFormat <span class="hljs-keyword">from</span> <span class="hljs-string">'gregorian-calendar-format'</span>;
274import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; 274<span class="hljs-keyword">import</span> zhCn <span class="hljs-keyword">from</span> <span class="hljs-string">'gregorian-calendar/lib/locale/zh_CN'</span>;
275 275
276import TimePicker from 'rc-time-picker/lib/TimePicker'; 276<span class="hljs-keyword">import</span> TimePicker <span class="hljs-keyword">from</span> <span class="hljs-string">'rc-time-picker/lib/TimePicker'</span>;
277import TimePanel from 'rc-time-picker/lib/TimePanel'; 277<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>;
278import TimePickerLocale from 'rc-time-picker/lib/locale/zh_CN';
279 278
280const formatter = new DateTimeFormat('HH:mm:ss'); 279<span class="hljs-keyword">const</span> formatter = <span class="hljs-keyword">new</span> DateTimeFormat(<span class="hljs-string">'HH:mm:ss'</span>);
281 280
282const now = new GregorianCalendar(zhCn); 281<span class="hljs-keyword">const</span> now = <span class="hljs-keyword">new</span> GregorianCalendar(zhCn);
283now.setTime(Date.now()); 282now.setTime(<span class="hljs-built_in">Date</span>.now());
284
285const timePanel = (
286 &lt;TimePanel
287 defaultValue={now}
288 locale={TimePickerLocale}
289 formatter={formatter}
290 minuteOptions={[0, 30]}
291 /&gt;
292);
293 283
294ReactDom.render( 284ReactDom.render(
295 &lt;TimePicker panel={timePanel} value={now}&gt; 285 <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> <span class="hljs-attribute">value</span>=<span class="hljs-value">{now}</span> /&gt;</span>,
296 {
297 ({value}) =&gt; {
298 return &lt;input type="text" placeholder="请选择时间" readOnly value={value &amp;&amp; formatter.format(value)} /&gt;;
299 }
300 }
301 &lt;/TimePicker&gt;,
302 document.getElementById('__react-content') 286 document.getElementById('__react-content')
303); 287);
304</code></pre></div> 288</span></code></pre></div>
305</div> 289</div>
306<a href="http://github.com/react-component/time-picker"> 290<a href="http://github.com/react-component/time-picker">
307 <img style="position: absolute; top: 0; right: 0; border: 0;" 291 <img style="position: absolute; top: 0; right: 0; border: 0;"