aboutsummaryrefslogtreecommitdiffhomepage
path: root/examples/pick-time.html
diff options
context:
space:
mode:
author崖鹰 <zhao.wuz@alipay.com>2015-11-16 14:58:35 +0800
committer崖鹰 <zhao.wuz@alipay.com>2015-11-16 14:58:35 +0800
commit80256746c1b81af8b19a4df9a93029e904d03859 (patch)
treec56268f890150bf45345359f54151b33129caa71 /examples/pick-time.html
downloadtime-picker-80256746c1b81af8b19a4df9a93029e904d03859.tar.gz
time-picker-80256746c1b81af8b19a4df9a93029e904d03859.tar.zst
time-picker-80256746c1b81af8b19a4df9a93029e904d03859.zip
Updates
Diffstat (limited to 'examples/pick-time.html')
-rw-r--r--examples/pick-time.html314
1 files changed, 314 insertions, 0 deletions
diff --git a/examples/pick-time.html b/examples/pick-time.html
new file mode 100644
index 0000000..bfeadc0
--- /dev/null
+++ b/examples/pick-time.html
@@ -0,0 +1,314 @@
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>pick-time.js - example - rc-time-picker@0.2.0</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="pick-time.css" />
255</head>
256
257<body>
258<div class="container">
259 <div class="header">
260 <h1>rc-time-picker@0.2.0</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="pick-time.js?nowrap"></script>
267 <div class="highlight"><pre><code language="undefined">import 'rc-time-picker/assets/index.css';
268
269import React from 'react';
270import ReactDom from 'react-dom';
271
272import GregorianCalendar from 'gregorian-calendar';
273import DateTimeFormat from 'gregorian-calendar-format';
274import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
275
276import TimePicker from 'rc-time-picker/lib/TimePicker';
277import TimePanel from 'rc-time-picker/lib/TimePanel';
278import TimePickerLocale from 'rc-time-picker/lib/locale/zh_CN';
279
280const formatter = new DateTimeFormat('HH:mm:ss');
281
282const now = new GregorianCalendar(zhCn);
283now.setTime(Date.now());
284
285const timePanel = (
286 &lt;TimePanel
287 defaultValue={now}
288 locale={TimePickerLocale}
289 formatter={formatter}
290 minuteOptions={[0, 30]}
291 /&gt;
292);
293
294ReactDom.render(
295 &lt;TimePicker panel={timePanel} value={now}&gt;
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')
303);
304</code></pre></div>
305</div>
306<a href="http://github.com/react-component/time-picker">
307 <img style="position: absolute; top: 0; right: 0; border: 0;"
308 src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
309 alt="Fork me on GitHub"
310 data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
311</a>
312</body>
313
314</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 07:23:21 +0000