diff options
author | afc163 <afc163@gmail.com> | 2015-12-04 22:36:31 +0800 |
---|---|---|
committer | afc163 <afc163@gmail.com> | 2015-12-04 22:36:31 +0800 |
commit | c1e0e40b2dfc15d0f88a16a966d8e50f5de495de (patch) | |
tree | ff446b2aabddb4209aac29aa56f0eff89dc63912 /examples/pick-time.html | |
parent | dca68b5030302ed1943ee6dcd6b0968dc570e650 (diff) | |
download | time-picker-c1e0e40b2dfc15d0f88a16a966d8e50f5de495de.tar.gz time-picker-c1e0e40b2dfc15d0f88a16a966d8e50f5de495de.tar.zst time-picker-c1e0e40b2dfc15d0f88a16a966d8e50f5de495de.zip |
Updates
Diffstat (limited to 'examples/pick-time.html')
-rw-r--r-- | examples/pick-time.html | 36 |
1 files changed, 14 insertions, 22 deletions
diff --git a/examples/pick-time.html b/examples/pick-time.html index b0115d6..ae9092c 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@1.0.0-alpha1</title> | 5 | <title>pick-time.js - example - rc-time-picker@0.7.2</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,47 +257,39 @@ 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@1.0.0-alpha1</h1> | 260 | <h1>rc-time-picker@0.7.2</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="js">import <span class="hljs-string">'rc-time-picker/assets/index.css'</span>; | 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 | ||
269 | import React from <span class="hljs-string">'react'</span>; | 269 | <span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>; |
270 | import ReactDom from <span class="hljs-string">'react-dom'</span>; | 270 | <span class="hljs-keyword">import</span> ReactDom <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>; |
271 | 271 | ||
272 | import GregorianCalendar from <span class="hljs-string">'gregorian-calendar'</span>; | 272 | <span class="hljs-keyword">import</span> GregorianCalendar <span class="hljs-keyword">from</span> <span class="hljs-string">'gregorian-calendar'</span>; |
273 | import DateTimeFormat from <span class="hljs-string">'gregorian-calendar-format'</span>; | 273 | <span class="hljs-keyword">import</span> DateTimeFormat <span class="hljs-keyword">from</span> <span class="hljs-string">'gregorian-calendar-format'</span>; |
274 | import zhCn from <span class="hljs-string">'gregorian-calendar/lib/locale/zh_CN'</span>; | 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 | ||
276 | import 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>; |
277 | import TimePickerLocale from <span class="hljs-string">'rc-time-picker/lib/locale/zh_CN'</span>; | 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>; |
278 | 278 | ||
279 | <span class="hljs-keyword">var</span> showSecond = <span class="hljs-literal">true</span>; | 279 | <span class="hljs-keyword">const</span> formatter = <span class="hljs-keyword">new</span> DateTimeFormat(<span class="hljs-string">'HH:mm:ss'</span>); |
280 | <span class="hljs-keyword">var</span> str = showSecond ? <span class="hljs-string">'HH:mm:ss'</span> : <span class="hljs-string">'HH:mm'</span>; | ||
281 | |||
282 | <span class="hljs-keyword">const</span> formatter = <span class="hljs-keyword">new</span> DateTimeFormat(str); | ||
283 | 280 | ||
284 | <span class="hljs-keyword">const</span> now = <span class="hljs-keyword">new</span> GregorianCalendar(zhCn); | 281 | <span class="hljs-keyword">const</span> now = <span class="hljs-keyword">new</span> GregorianCalendar(zhCn); |
285 | now.setTime(<span class="hljs-built_in">Date</span>.now()); | 282 | now.setTime(<span class="hljs-built_in">Date</span>.now()); |
286 | 283 | ||
287 | <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onChange</span><span class="hljs-params">(value)</span> </span>{ | 284 | <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onChange</span>(<span class="hljs-params">value</span>) </span>{ |
288 | <span class="hljs-built_in">console</span>.log(value && formatter.format(value)); | 285 | <span class="hljs-built_in">console</span>.log(value && formatter.format(value)); |
289 | } | 286 | } |
290 | 287 | ||
291 | ReactDom.render( | 288 | ReactDom.render( |
292 | <span class="xml"><span class="hljs-tag"><<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> | 289 | <span class="xml"><span class="hljs-tag"><<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">defaultValue</span>=<span class="hljs-value">{now}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{onChange}</span>/></span>, |
293 | <span class="hljs-attribute">showSecond</span>=<span class="hljs-value">{showSecond}</span> | ||
294 | <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{now}</span> | ||
295 | <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{onChange}</span>/></span>, | ||
296 | document.getElementById('__react-content') | 290 | document.getElementById('__react-content') |
297 | ); | 291 | ); |
298 | 292 | </span></code></pre></div> | |
299 | |||
300 | console.log(zhCn);</span></code></pre></div> | ||
301 | </div> | 293 | </div> |
302 | <a href="http://github.com/react-component/time-picker"> | 294 | <a href="http://github.com/react-component/time-picker"> |
303 | <img style="position: absolute; top: 0; right: 0; border: 0;" | 295 | <img style="position: absolute; top: 0; right: 0; border: 0;" |