support time select.Fixes #12.

HISTORY.md

@@ -1,12 +1,22 @@
 # History
 ----
 
-## 1.3.0 (2014-12-30)
+generated by https://github.com/yiminghe/gh-history
+
+## 1.4.0 / 2015-01-05
+
+`new` [#12](https://github.com/react-component/calendar/issues/12) support time select   ([@yiminghe](https://github.com/yiminghe))
+
+`new` [#11](https://github.com/react-component/calendar/issues/11) support prefixCls   ([@yiminghe](https://github.com/yiminghe))
+
+`new` [#10](https://github.com/react-component/calendar/issues/10) support nextMonth previousMonth in calendar panel   ([@yiminghe](https://github.com/yiminghe))
+
+## 1.3.0 / 2014-12-30
 
 `new` [#9](https://github.com/react-component/calendar/issues/9) support className prop   ([@yiminghe](https://github.com/yiminghe))
 
 `new` [#8](https://github.com/react-component/calendar/issues/8) support orient prop   ([@yiminghe](https://github.com/yiminghe))
 
-## 1.2.4 (2014-12-26)
+## 1.2.4 / 2014-12-26
 
 `new` [#7](https://github.com/react-component/calendar/issues/7) release 1.2.4   ([@yiminghe](https://github.com/yiminghe))

README.md

@@ -29,9 +29,11 @@ calendar ui component for react, port from https://github.com/kissyteam/date-pic
 
 ## Screenshots
 
-![rc-calendar](http://gtms01.alicdn.com/tps/i1/TB1cC0cHXXXXXbOXpXX06lmNXXX-684-684.png)
+<img src="http://gtms02.alicdn.com/tps/i2/TB1luFKHXXXXXb3XXXXl4OqLpXX-574-596.png" width="288"/>
 
-![rc-calendar-input](http://gtms03.alicdn.com/tps/i3/TB1lmz_GFXXXXbEXVXXbMpwQXXX-692-732.png)
+<img src="http://gtms04.alicdn.com/tps/i4/TB1yVNEHXXXXXc5XFXXbyv.ZFXX-528-586.png" width="288"/>
+
+<img src="http://gtms03.alicdn.com/tps/i3/TB1lmz_GFXXXXbEXVXXbMpwQXXX-692-732.png" width="288"/>
 
 ## Feature
 
@@ -41,6 +43,16 @@ calendar ui component for react, port from https://github.com/kissyteam/date-pic
 * support en-us and zh-cn locale (ui and timeOffset)
 * support aria and keyboard accessibility
 
+### Keyboard
+
+* Previous month (PageUp)
+* Next month (PageDown)
+* tab into hour input: Last hour(Up), Next hour(Down)
+* tab into hour input: Last minute(Up), Next minute(Down)
+* tab into hour input: Last second(Up), Next second(Down)
+* Last year (Control + left)
+* Next year (Control + right)
+
 ## install
 
 [![rc-calendar](https://nodei.co/npm/rc-calendar.png)](https://npmjs.org/package/rc-calendar)
@@ -99,6 +111,12 @@ For details to see: [https://github.com/yiminghe/learning-react/tree/master/exam
           <td>true</td>
           <td>whether to show today button</td>
         </tr>
+        <tr>
+          <td>showTime</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>whether to support time select</td>
+        </tr>
         <tr>
            <td>focused</td>
            <td>Boolean</td>

assets/bootstrap.less

@@ -1,4 +1,6 @@
-@import "./bootstrap/picker";
-@import "./bootstrap/decade-panel";
-@import "./bootstrap/month-panel";
-@import "./bootstrap/year-panel";
+@import "./bootstrap/Picker";
+@import "./bootstrap/Time";
+@import "./bootstrap/TimePanel";
+@import "./bootstrap/DecadePanel";
+@import "./bootstrap/MonthPanel";
+@import "./bootstrap/YearPanel";

assets/bootstrap/Time.less

@@ -0,0 +1,19 @@
+.rc-calendar-time-input {
+  cursor: pointer;
+  display: inline-block;
+  width:40px;
+  height: 25px;
+  line-height: 20px;
+  padding: 4px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  vertical-align: middle;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+
+.rc-calendar-time-input:focus {
+  border-color: #66afe9;
+  outline: 0;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+}

assets/bootstrap/TimePanel.less

@@ -0,0 +1,61 @@
+.rc-calendar-time-panel {
+  left: 4px;
+  top: 4px;
+  bottom: 4px;
+  right: 4px;
+  background: #ffffff;
+  z-index: 10;
+  position: absolute;
+  outline: none;
+}
+
+.rc-calendar-time-panel-header {
+  height: 30px;
+  line-height: 30px;
+  position: relative;
+  text-align: center;
+}
+
+
+.rc-calendar-time-panel-title {
+  width: 180px;
+  font-weight: bold;
+  box-sizing: border-box;
+  display: inline-block;
+  padding: 4px 5px;
+  text-align: center;
+  height: 30px;
+  line-height: 22px;
+  border-radius: 4px;
+}
+
+
+.rc-calendar-time-panel-table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: separate;
+}
+
+.rc-calendar-time-panel-cell {
+  text-align: center;
+  height: 42px;
+  vertical-align: middle;
+}
+
+.rc-calendar-time-panel-time {
+  line-height: 26px;
+  text-decoration: none;
+  display: block;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+
+.rc-calendar-time-panel-time:hover {
+  background: #eeeeee;
+}
+
+.rc-calendar-time-panel-selected-cell .rc-calendar-time-panel-time {
+  color: #ffffff;
+  background-color: #3276b1;
+  border-color: #285e8e;
+}

assets/bootstrap/picker.less

@@ -232,10 +232,11 @@
   display: inline-block;
   padding: 4px 5px;
   text-align: center;
-  width: 100px;
+  width: 60px;
   height: 30px;
   line-height: 22px;
   border-radius: 4px;
+  margin-left: 5px;
 }
 
 .rc-calendar-today-btn:hover {

assets/classic.less

@@ -0,0 +1,6 @@
+@import "./classic/Picker";
+@import "./classic/Time";
+@import "./classic/TimePanel";
+@import "./classic/DecadePanel";
+@import "./classic/MonthPanel";
+@import "./classic/YearPanel";

assets/dpl/picker.less → assets/classic/Picker.less

@@ -220,6 +220,7 @@
   color: #ffffff;
   border-color: #3375cf;
   display: inline-block;
+  margin-left: 5px;
 }
 
 .classic-calendar .classic-calendar-today-btn:hover {

assets/classic/Time.less

@@ -0,0 +1,20 @@
+.classic-calendar-time-input {
+  font-size: 10px;
+  cursor: pointer;
+  display: inline-block;
+  width:14px;
+  height: 10px;
+  line-height: 10px;
+  padding: 4px 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  vertical-align: middle;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+
+.classic-calendar-time-input:focus {
+  border-color: #66afe9;
+  outline: 0;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+}

assets/classic/TimePanel.less

@@ -0,0 +1,68 @@
+.classic-calendar-time-panel {
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  background: #ffffff;
+  position: absolute;
+  outline: none;
+  border-bottom: 1px solid #9bc0e0;
+}
+
+.classic-calendar-time-panel-title {
+  color:#ffffff;
+  width: 180px;
+  font-weight: bold;
+  box-sizing: border-box;
+  display: inline-block;
+  padding: 4px 5px;
+  text-align: center;
+  height: 26px;
+  line-height: 22px;
+  border-radius: 4px;
+}
+
+.classic-calendar-time-panel-header {
+  user-select: none;
+  background: url('//gtms04.alicdn.com/tps/i4/TB1.L9bFVXXXXbAXpXXDM4qIXXX-19-300.png');
+}
+
+.classic-calendar-time-panel-header {
+  background-repeat: repeat-x;
+  background-position: 0 -240px;
+  height: 26px;
+  position: relative;
+  text-align: center;
+}
+
+.classic-calendar-time-panel-table {
+  margin-top: 5px;
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: separate;
+}
+
+.classic-calendar-time-panel-cell {
+  text-align: center;
+}
+
+.classic-calendar-time-panel-time {
+  color: #004499;
+  line-height: 31px;
+  text-decoration: none;
+  display: block;
+  border-radius: 2px;
+  border: 1px solid transparent;
+}
+
+.classic-calendar-time-panel-time:hover {
+  background-color: #f3f9ff;
+  border-color: #88b1ea;
+}
+
+.classic-calendar-time-panel-selected-cell .classic-calendar-time-panel-time {
+  color: #fff;
+  background-color: #4187e7;
+  border-color: #4187e7;
+}

examples/CalendarInput.js

@@ -5,7 +5,7 @@ var Calendar = require('../');
 var zhCn = require('gregorian-calendar/lib/locale/zh-cn');
 var DateTimeFormat = require('gregorian-calendar-format');
 var GregorianCalendar = require('gregorian-calendar');
-var formatter = new DateTimeFormat('yyyy-MM-dd', zhCn);
+var formatter = new DateTimeFormat('yyyy-MM-dd HH:mm:ss', zhCn);
 var CalendarLocale = require('../lib/locale/zh-cn');
 require('./calendar-input.css');
 
@@ -60,7 +60,9 @@ var CalendarInput = React.createClass({
     var state = this.state;
     var calendar;
     if (state.showCalendar) {
-      calendar = (<Calendar className="rc-popup-calendar" orient={['left','bottom']} locale={CalendarLocale} value={state.calendarValue} focused={true} onBlur={this.onCalendarBlur} onSelect={this.onCalendarSelect}/>);
+      calendar = (<Calendar className="rc-popup-calendar" orient={['left','bottom']}
+        showTime={true}
+        locale={CalendarLocale} value={state.calendarValue} focused={true} onBlur={this.onCalendarBlur} onSelect={this.onCalendarSelect}/>);
     }
     return (
       <span className='rc-calendar-input'>

examples/index.md

@@ -1,14 +1,12 @@
 # rc-calendar@1.x demo
 ---
 
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
-
 <link rel="stylesheet" href="../../assets/classic.css">
 
 <link rel="stylesheet" href="../../assets/bootstrap.css">
 
 
-## render standalone
+## render
 
 ````html
 <div id='react-content-standalone'></div>
@@ -18,12 +16,9 @@
 /** @jsx React.DOM */
 var Calendar = require('../');
 var CalendarInput = require('./CalendarInput');
-var GregorianCalendar = require('gregorian-calendar');
 var GregorianCalendarFormat = require('gregorian-calendar-format');
 var React = require('react');
-var formatter = new GregorianCalendarFormat('yyyy-MM-dd');
-var value = new GregorianCalendar();
-value.setTime(Date.now());
+var formatter = new GregorianCalendarFormat('yyyy-MM-dd HH:mm:ss');
 
 function onSelect(value) {
   console.log('onSelect');
@@ -32,8 +27,8 @@ function onSelect(value) {
 
 React.render(
   <div>
-    <h2>calendar (en-us)</h2>
-    <Calendar showWeekNumber={true} onSelect={onSelect}/>
+    <h2>calendar (en-us, U.S.A.  California  San Francisco)</h2>
+    <Calendar showWeekNumber={true} onSelect={onSelect} showTime={true}/>
   </div>, document.getElementById('react-content-standalone'));
 ````
 
@@ -47,12 +42,9 @@ React.render(
 /** @jsx React.DOM */
 var Calendar = require('../');
 var CalendarInput = require('./CalendarInput');
-var GregorianCalendar = require('gregorian-calendar');
 var GregorianCalendarFormat = require('gregorian-calendar-format');
 var React = require('react');
-var formatter = new GregorianCalendarFormat('yyyy-MM-dd');
-var value = new GregorianCalendar();
-value.setTime(Date.now());
+var formatter = new GregorianCalendarFormat('yyyy-MM-dd HH:mm:ss');
 
 function onSelect(value) {
   console.log('onSelect');
@@ -61,8 +53,10 @@ function onSelect(value) {
 
 React.render(
   <div>
-    <h2>calendar (en-us)</h2>
-    <Calendar showWeekNumber={true} onSelect={onSelect} prefixCls='classic-calendar'/>
+    <h2>calendar (en-us, U.S.A.  California  San Francisco)</h2>
+    <Calendar showWeekNumber={true}
+    showTime={true}
+    onSelect={onSelect} prefixCls='classic-calendar'/>
   </div>, document.getElementById('react-content-standalone2'));
 ````
 
@@ -81,7 +75,7 @@ var React = require('react');
 var CalendarInput = require('./CalendarInput');
 React.render(
   <div>
-    <h2>input (zh-cn)</h2>
+    <h2>input (zh-cn, Beijing)</h2>
     <CalendarInput />
   </div>, document.getElementById('react-content-input'));
 ````