<!DOCTYPE html>
<html>
<head>
<title>pick-time.js - example - rc-time-picker@1.0.0-alpha1</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<style>
.highlight pre {
padding: .8em 1em;
font: 14px/20px Consolas, Monaco, 'Andale Mono', monospace;
border: 1px solid #e5e8ec;
border-radius: 3px;
background-color: #21221d;
background-image: -webkit-linear-gradient(#21221d 50%, #272822 50%);
background-image: -moz-linear-gradient(#21221d 50%, #272822 50%);
background-image: -ms-linear-gradient(#21221d 50%, #272822 50%);
background-image: -o-linear-gradient(#21221d 50%, #272822 50%);
background-image: linear-gradient(#21221d 50%, #272822 50%);
background-size: 40px 40px;
background-origin: content-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.highlight pre > code {
font-family: inherit;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
vertical-align: 2px;
display: block;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
color: #E5E5C2;
}
</style>
<style>
/*
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f;
-webkit-text-size-adjust: none;
}
.hljs,
.hljs-tag,
.css .hljs-rule,
.css .hljs-value,
.aspectj .hljs-function,
.css .hljs-function
.hljs-preprocessor,
.hljs-pragma {
color: #f8f8f2;
}
.hljs-strongemphasis,
.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}
.hljs-bullet,
.hljs-blockquote,
.hljs-horizontal_rule,
.hljs-number,
.hljs-regexp,
.alias .hljs-keyword,
.hljs-literal,
.hljs-hexcolor {
color: #ae81ff;
}
.hljs-code,
.hljs-title,
.css .hljs-class,
.hljs-class .hljs-title:last-child {
color: #a6e22e;
/*color: #e6db74;*/
}
.hljs-link_url {
font-size: 80%;
}
.hljs-strong,
.hljs-strongemphasis {
font-weight: bold;
}
.hljs-emphasis,
.hljs-strongemphasis,
.hljs-class .hljs-title:last-child,
.hljs-typename {
font-style: italic;
}
.hljs-keyword,
.ruby .hljs-class .hljs-keyword:first-child,
.ruby .hljs-function .hljs-keyword,
.hljs-function,
.hljs-change,
.hljs-winutils,
.hljs-flow,
.nginx .hljs-title,
.tex .hljs-special,
.hljs-header,
.hljs-symbol,
.hljs-symbol .hljs-string,
.hljs-tag .hljs-title,
.hljs-value,
.alias .hljs-keyword:first-child,
.css .hljs-tag,
.css .unit,
.css .hljs-important {
color: #f92672;
}
.hljs-function .hljs-keyword,
.hljs-class .hljs-keyword:first-child,
.hljs-aspect .hljs-keyword:first-child,
.hljs-constant,
.hljs-typename,
.hljs-name,
.css .hljs-attribute {
color: #66d9ef;
}
.hljs-variable,
.hljs-params,
.hljs-class .hljs-title,
.hljs-aspect .hljs-title {
color: #f8f8f2;
}
.hljs-tag .hljs-value,
.hljs-string,
.css .hljs-id,
.hljs-subst,
.hljs-type,
.ruby .hljs-class .hljs-parent,
.django .hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.django .hljs-filter .hljs-argument,
.smalltalk .hljs-localvars,
.smalltalk .hljs-array,
.hljs-attr_selector,
.hljs-pseudo,
.hljs-addition,
.hljs-stream,
.hljs-envvar,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.hljs-prompt,
.hljs-link_label,
.hljs-link_url {
color: #e6db74;
}
.hljs-comment,
.hljs-annotation,
.hljs-decorator,
.hljs-pi,
.hljs-doctype,
.hljs-deletion,
.hljs-shebang,
.apache .hljs-sqbracket,
.tex .hljs-formula {
color: #75715e;
}
.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata,
.xml .php,
.php .xml {
opacity: 0.5;
}
/***********/
.hljs-attribute{
color: #a6e22e;
}
/***** node keyword ******/
.hljs-built_in{
color: #3396dc;
font-weight: bold;
}
</style>
<style>
.container {
width: 86%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.header p {
color: #666;
}
.example {
padding: 20px 0;
}
</style>
<script>
// Console-polyfill. MIT license.
// https://github.com/paulmillr/console-polyfill
// Make it safe to do console.log() always.
(function (global) {
'use strict';
global.console = global.console || {};
var con = global.console;
var prop, method;
var empty = {};
var dummy = function () {
};
var properties = 'memory'.split(',');
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
while (prop = properties.pop()) con[prop] = con[prop] || empty;
while (method = methods.pop()) con[method] = con[method] || dummy;
})(typeof window === 'undefined' ? this : window);
// Using `this` for web workers while maintaining compatibility with browser
// targeted script loaders such as Browserify or Webpack where the only way to
// get to the global object is via `window`.
</script>
<!--[if lt IE 9]>
<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>
<![endif]-->
<link rel="stylesheet" href="pick-time.css" />
</head>
<body>
<div class="container">
<div class="header">
<h1>rc-time-picker@1.0.0-alpha1</h1>
<p>React TimePicker</p>
</div>
<div class="example" id="__react-content"></div>
<script src="common.js?nowrap"></script>
<script src="pick-time.js?nowrap"></script>
<div class="highlight"><pre><code language="js">import <span class="hljs-string">'rc-time-picker/assets/index.css'</span>;
import React from <span class="hljs-string">'react'</span>;
import ReactDom from <span class="hljs-string">'react-dom'</span>;
import GregorianCalendar from <span class="hljs-string">'gregorian-calendar'</span>;
import DateTimeFormat from <span class="hljs-string">'gregorian-calendar-format'</span>;
import zhCn from <span class="hljs-string">'gregorian-calendar/lib/locale/zh_CN'</span>;
import TimePicker from <span class="hljs-string">'rc-time-picker'</span>;
import TimePickerLocale from <span class="hljs-string">'rc-time-picker/lib/locale/zh_CN'</span>;
<span class="hljs-keyword">var</span> showSecond = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">var</span> str = showSecond ? <span class="hljs-string">'HH:mm:ss'</span> : <span class="hljs-string">'HH:mm'</span>;
<span class="hljs-keyword">const</span> formatter = <span class="hljs-keyword">new</span> DateTimeFormat(str);
<span class="hljs-keyword">const</span> now = <span class="hljs-keyword">new</span> GregorianCalendar(zhCn);
now.setTime(<span class="hljs-built_in">Date</span>.now());
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onChange</span><span class="hljs-params">(value)</span> </span>{
<span class="hljs-built_in">console</span>.log(value && formatter.format(value));
}
ReactDom.render(
<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">showSecond</span>=<span class="hljs-value">{showSecond}</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>,
document.getElementById('__react-content')
);
console.log(zhCn);</span></code></pre></div>
</div>
<a href="http://github.com/react-component/time-picker">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
</body>
</html>
