aboutsummaryrefslogtreecommitdiffhomepage
path: root/examples/disabled.html
diff options
context:
space:
mode:
Diffstat (limited to 'examples/disabled.html')
-rw-r--r--examples/disabled.html343
1 files changed, 343 insertions, 0 deletions
diff --git a/examples/disabled.html b/examples/disabled.html
new file mode 100644
index 0000000..98a1627
--- /dev/null
+++ b/examples/disabled.html
@@ -0,0 +1,343 @@
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>disabled.js - example - rc-time-picker@1.0.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="common.css" />
255</head>
256
257<body>
258<div class="container">
259 <div class="header">
260 <h1>rc-time-picker@1.0.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="disabled.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
271import React from <span class="hljs-string">'react'</span>;
272import ReactDom from <span class="hljs-string">'react-dom'</span>;
273
274import GregorianCalendar from <span class="hljs-string">'gregorian-calendar'</span>;
275import DateTimeFormat from <span class="hljs-string">'gregorian-calendar-format'</span>;
276import zhCn from <span class="hljs-string">'gregorian-calendar/lib/locale/zh_CN'</span>;
277
278import TimePicker from <span class="hljs-string">'rc-time-picker'</span>;
279import TimePickerLocale from <span class="hljs-string">'rc-time-picker/lib/locale/zh_CN'</span>;
280
281<span class="hljs-keyword">const</span> showSecond = <span class="hljs-literal">true</span>;
282<span class="hljs-keyword">const</span> str = showSecond ? <span class="hljs-string">'HH:mm:ss'</span> : <span class="hljs-string">'HH:mm'</span>;
283
284<span class="hljs-keyword">const</span> formatter = <span class="hljs-keyword">new</span> DateTimeFormat(str);
285
286<span class="hljs-keyword">const</span> now = <span class="hljs-keyword">new</span> GregorianCalendar(zhCn);
287now.setTime(<span class="hljs-built_in">Date</span>.now());
288
289<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">generateOptions</span><span class="hljs-params">(length, excludedOptions)</span> </span>{
290 <span class="hljs-keyword">const</span> arr = [];
291 <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> value = <span class="hljs-number">0</span>; value &lt; length; value++) {
292 <span class="hljs-keyword">if</span> (excludedOptions.indexOf(value) &lt; <span class="hljs-number">0</span>) {
293 arr.push(value);
294 }
295 }
296 <span class="hljs-keyword">return</span> arr;
297}
298
299<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onChange</span><span class="hljs-params">(value)</span> </span>{
300 <span class="hljs-built_in">console</span>.log(value &amp;&amp; formatter.format(value));
301}
302
303<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">disabledHours</span><span class="hljs-params">()</span> </span>{
304 <span class="hljs-keyword">return</span> [<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-number">6</span>, <span class="hljs-number">7</span>, <span class="hljs-number">8</span>, <span class="hljs-number">22</span>, <span class="hljs-number">23</span>];
305}
306
307<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">disabledMinutes</span><span class="hljs-params">(h)</span> </span>{
308 <span class="hljs-keyword">switch</span> (h) {
309 <span class="hljs-keyword">case</span> <span class="hljs-number">9</span>:
310 <span class="hljs-keyword">return</span> generateOptions(<span class="hljs-number">60</span>, [<span class="hljs-number">30</span>]);
311 <span class="hljs-keyword">case</span> <span class="hljs-number">21</span>:
312 <span class="hljs-keyword">return</span> generateOptions(<span class="hljs-number">60</span>, [<span class="hljs-number">0</span>]);
313 <span class="hljs-keyword">default</span>:
314 <span class="hljs-keyword">return</span> generateOptions(<span class="hljs-number">60</span>, [<span class="hljs-number">0</span>, <span class="hljs-number">30</span>]);
315 }
316}
317
318<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">disabledSeconds</span><span class="hljs-params">(h, m)</span> </span>{
319 <span class="hljs-keyword">return</span> [h + m % <span class="hljs-number">60</span>];
320}
321
322ReactDom.render(
323 <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>
324 <span class="hljs-attribute">showSecond</span>=<span class="hljs-value">{showSecond}</span>
325 <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{now}</span>
326 <span class="hljs-attribute">className</span>=<span class="hljs-value">"xxx"</span>
327 <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{onChange}</span>
328 <span class="hljs-attribute">disabledHours</span>=<span class="hljs-value">{disabledHours}</span>
329 <span class="hljs-attribute">disabledMinutes</span>=<span class="hljs-value">{disabledMinutes}</span>
330 <span class="hljs-attribute">disabledSeconds</span>=<span class="hljs-value">{disabledSeconds}</span> /&gt;</span>,
331 document.getElementById('__react-content')
332);
333</span></code></pre></div>
334</div>
335<a href="http://github.com/react-component/time-picker">
336 <img style="position: absolute; top: 0; right: 0; border: 0;"
337 src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
338 alt="Fork me on GitHub"
339 data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
340</a>
341</body>
342
343</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-25 03:10:47 +0000