rc-calendar - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

examples/CalendarInput.js

@@ -8,3 +8,3 @@ /** @jsx React.DOM */
 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');
@@ -64,3 +64,5 @@ require('./calendar-input.css');
     if (state.showCalendar) {
-      calendar = (<Calendar className="rc-popup-calendar" orient={['left','bottom']} locale={CalendarLocale} value={state.calendarValue} focused="1" 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}/>);
     }
@@ -67,0 +69,0 @@ return (

examples/index.md

 # rc-calendar@1.x demo
 ---
 
+<link rel="stylesheet" href="../../assets/classic.css">
+
+<link rel="stylesheet" href="../../assets/bootstrap.css">
+
+
+## render
+
 ````html
-<div id='skin'></div>
+<div id='react-content-standalone'></div>
 ````
 
 ````js
-require('./skin');
+/** @jsx React.DOM */
+var Calendar = require('../');
+var CalendarInput = require('./CalendarInput');
+var GregorianCalendarFormat = require('gregorian-calendar-format');
+var React = require('react');
+var formatter = new GregorianCalendarFormat('yyyy-MM-dd HH:mm:ss');
+
+function onSelect(value) {
+  console.log('onSelect');
+  console.log(formatter.format(value))
+}
+
+React.render(
+  <div>
+    <h2>calendar (en-us, U.S.A.  California  San Francisco)</h2>
+    <Calendar showWeekNumber={true} onSelect={onSelect} showTime={true}/>
+  </div>, document.getElementById('react-content-standalone'));
 ````
 
-## render standalone
+## render another theme
 
 ````html
-<div id='react-content-standalone'></div>
+<div id='react-content-standalone2'></div>
 ````
@@ -22,8 +45,5 @@
 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');
 
@@ -37,7 +57,10 @@ function onSelect(value) {
   <div>
-    <h2>calendar (en-us)</h2>
-    <Calendar showWeekNumber="1" onSelect={onSelect}/>
-  </div>, document.getElementById('react-content-standalone'));
+    <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'));
 ````
 
+
 ## render with input
@@ -57,5 +80,5 @@
   <div>
-    <h2>input (zh-cn)</h2>
+    <h2>input (zh-cn, Beijing)</h2>
     <CalendarInput />
   </div>, document.getElementById('react-content-input'));
 ````

HISTORY.md

 # 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))
@@ -10,4 +20,4 @@
 
-## 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))

lib/Calendar.js

@@ -5,3 +5,2 @@ /** @jsx React.DOM */
  * Calendar ui component for React
- * @author [e-mail]
  */
@@ -15,2 +14,4 @@ var React = require('react');
 var MonthPanel = require('./MonthPanel');
+var util = require('./util');
+var Time = require('./Time');
 
@@ -90,2 +91,16 @@ function noop() {
 var Calendar = React.createClass({
+  propTypes: {
+    className: React.PropTypes.string,
+    orient: React.PropTypes.arrayOf(React.PropTypes.oneOf(['left', 'top', 'right', 'bottom'])),
+    locale: React.PropTypes.object,
+    showWeekNumber: React.PropTypes.bool,
+    showToday: React.PropTypes.bool,
+    showTime: React.PropTypes.bool,
+    focused: React.PropTypes.bool,
+    onSelect: React.PropTypes.func,
+    onBlur: React.PropTypes.func
+  },
+
+  prefixClsFn: util.prefixClsFn,
+
   getInitialState: function () {
@@ -99,2 +114,3 @@ var value = this.props.value;
       orient: this.props.orient,
+      prefixCls: this.props.prefixCls || 'rc-calendar',
       value: value
@@ -114,3 +130,3 @@ };
       className: '',
-      showToday: 1,
+      showToday: true,
       onSelect: noop,
@@ -177,3 +193,4 @@ onFocus: noop,
     var keyCode = e.keyCode;
-    var ctrlKey = e.ctrlKey;
+    // mac
+    var ctrlKey = e.ctrlKey || e.metaKey;
     switch (keyCode) {
@@ -250,5 +267,6 @@ case KeyCode.DOWN:
       today = value.clone(),
-      cellClass = 'rc-calendar-cell',
-      weekNumberCellClass = ('rc-calendar-week-number-cell'),
-      dateClass = ('rc-calendar-date'),
+      prefixClsFn = this.prefixClsFn,
+      cellClass = prefixClsFn('cell'),
+      weekNumberCellClass = prefixClsFn('week-number-cell'),
+      dateClass = prefixClsFn('date'),
       dateRender = props.dateRender,
@@ -258,7 +276,7 @@ disabledDate = props.disabledDate,
       dateFormatter = new DateTimeFormat(locale.dateFormat, dateLocale),
-      todayClass = ('rc-calendar-today'),
-      selectedClass = ('rc-calendar-selected-day'),
-      lastMonthDayClass = ('rc-calendar-last-month-cell'),
-      nextMonthDayClass = ('rc-calendar-next-month-btn-day'),
-      disabledClass = ('rc-calendar-disabled-cell');
+      todayClass = prefixClsFn('today'),
+      selectedClass = prefixClsFn('selected-day'),
+      lastMonthDayClass = prefixClsFn('last-month-cell'),
+      nextMonthDayClass = prefixClsFn('next-month-btn-day'),
+      disabledClass = prefixClsFn('disabled-cell');
     today.setTime(Date.now());
@@ -365,9 +383,26 @@ var month1 = value.clone();
   onFocus: function () {
-    this.props.onFocus();
+    if (this._blurTimer) {
+      clearTimeout(this._blurTimer);
+      this._blurTimer = null;
+    } else {
+      this.props.onFocus();
+    }
   },
 
   onBlur: function () {
-    this.props.onBlur();
+    if (this._blurTimer) {
+      clearTimeout(this._blurTimer);
+    }
+    var self = this;
+    this._blurTimer = setTimeout(function () {
+      self.props.onBlur();
+    }, 100);
   },
 
+  onTimeChange: function (value) {
+    this.setState({
+      value: value
+    });
+  },
+
   render: function () {
@@ -383,2 +418,4 @@ var showWeekNumberEl;
     var firstDayOfWeek = value.getFirstDayOfWeek();
+    var prefixCls = state.prefixCls;
+    var prefixClsFn = this.prefixClsFn;
 
@@ -393,4 +430,4 @@ for (var i = 0; i < DATE_COL_COUNT; i++) {
       showWeekNumberEl = (
-        <th role="columnheader" className = "rc-calendar-column-header rc-calendar-week-number-header">
-          <span className = "rc-calendar-column-header-inner">x</span>
+        <th role="columnheader" className = {prefixClsFn("column-header", "week-number-header")}>
+          <span className ={prefixClsFn("column-header-inner")}>x</span>
         </th>);
@@ -400,4 +437,4 @@ }
       return (
-        <th key={xindex} role="columnheader" title={value} className = "rc-calendar-column-header">
-          <span className = "rc-calendar-column-header-inner">
+        <th key={xindex} role="columnheader" title={value} className ={prefixClsFn("column-header")}>
+          <span className = {prefixClsFn("column-header-inner")}>
           {veryShortWeekdays[xindex]}
@@ -407,10 +444,19 @@ </span>
     });
-    var todayEl;
-    if (props.showToday) {
-      todayEl = (
-        <div className = "rc-calendar-footer">
-          <a className = "rc-calendar-today-btn"
-            role="button"
-            onClick={this.chooseToday}
-            title={this.getTodayTime()}>{locale.today}</a>
+    var footerEl;
+    if (props.showToday || props.showTime) {
+      var todayEl;
+      if (props.showToday) {
+        todayEl = (<a className = {prefixClsFn("today-btn")}
+          role="button"
+          onClick={this.chooseToday}
+          title={this.getTodayTime()}>{locale.today}</a>);
+      }
+      var timeEl;
+      if (props.showTime) {
+        timeEl = (<Time value={value} rootPrefixCls={prefixCls} prefixClsFn={prefixClsFn} locale={locale} onChange={this.onTimeChange}/>);
+      }
+      footerEl = (
+        <div className = {prefixClsFn("footer")}>
+        {timeEl}
+        {todayEl}
         </div>);
@@ -421,6 +467,6 @@ }
     if (state.showMonthPanel) {
-      monthPanel = <MonthPanel locale={locale} value={value} onSelect={this.onMonthPanelSelect}/>;
+      monthPanel = <MonthPanel locale={locale} value={value} rootPrefixCls={state.prefixCls} onSelect={this.onMonthPanelSelect}/>;
     }
 
-    var className = "rc-calendar";
+    var className = prefixCls;
     if (props.className) {
@@ -434,3 +480,3 @@ className += ' ' + props.className;
       orient.forEach(function (o) {
-        className += ' rc-calendar-orient-' + o;
+        className += ' ' + prefixClsFn('orient-' + o);
       });
@@ -441,33 +487,35 @@ }
         <div style={{outline: 'none'}}>
-          <div className = "rc-calendar-header">
-            <a className = "rc-calendar-prev-year-btn"
+          <div className = {prefixClsFn("header")}>
+            <a className ={prefixClsFn("prev-year-btn")}
               role="button"
               onClick={this.previousYear}
               title={locale.previousYear}>
-            «
+              «
             </a>
-            <a className = "rc-calendar-prev-month-btn"
+            <a className = {prefixClsFn("prev-month-btn")}
               role="button"
               onClick={this.previousMonth}
               title={locale.previousMonth}>
+              ‹
             </a>
-            <a className = "rc-calendar-month-select"
+            <a className = {prefixClsFn("month-select")}
               role="button"
               onClick={this.showMonthPanel}
               title={locale.monthSelect}>
-              <span className = "rc-calendar-month-select-content">{this.getMonthYear()}</span>
-              <span className = "rc-calendar-month-select-arrow">x</span>
+              <span className = {prefixClsFn("month-select-content")}>{this.getMonthYear()}</span>
+              <span className = {prefixClsFn("month-select-arrow")}>x</span>
             </a>
-            <a className = "rc-calendar-next-month-btn"
+            <a className = {prefixClsFn("next-month-btn")}
               onClick={this.nextMonth}
               title={locale.nextMonth}>
+              ›
             </a>
-            <a className = "rc-calendar-next-year-btn"
+            <a className = {prefixClsFn("next-year-btn")}
               onClick={this.nextYear}
               title={locale.nextYear}>
-            »
+              »
             </a>
           </div>
-          <div className = "rc-calendar-body">
-            <table className = "rc-calendar-table" cellSpacing="0" role="grid">
+          <div className = {prefixClsFn("calendar-body")}>
+            <table className = {prefixClsFn("table")} cellSpacing="0" role="grid">
               <thead>
@@ -479,3 +527,3 @@ <tr role="row">
               </thead>
-              <tbody className = "rc-calendar-tbody">
+              <tbody className = {prefixClsFn("tbody")}>
             {this.renderDates()}
@@ -485,3 +533,3 @@ </tbody>
           </div>
-        {todayEl}
+        {footerEl}
         </div>
@@ -488,0 +536,0 @@ {monthPanel}

lib/DecadePanel.js

@@ -7,2 +7,3 @@ /** @jsx React.DOM */
 var cx = require('./util').cx;
+var util = require('./util');
 
@@ -18,6 +19,9 @@ function goYear(self, direction) {
     return {
-      value: this.props.value
+      value: this.props.value,
+      prefixCls: this.props.rootPrefixCls + '-decade-panel'
     };
   },
 
+  prefixClsFn: util.prefixClsFn,
+
   getDefaultProps: function () {
@@ -56,2 +60,4 @@ return {
     var index = 0;
+    var prefixClsFn = this.prefixClsFn;
+
     for (var i = 0; i < ROW; i++) {
@@ -69,20 +75,23 @@ decades[i] = [];
     var self = this;
-    var decadesEls = decades.map(function (row,index) {
+    var decadesEls = decades.map(function (row, index) {
       var tds = row.map(function (d) {
         var startDecade = d.startDecade;
         var endDecade = d.endDecade;
+        var classNameMap = {};
+        classNameMap[prefixClsFn('cell')] = 1;
+        classNameMap[prefixClsFn('selected-cell')] = startDecade <= currentYear && currentYear <= endDecade;
+        classNameMap[prefixClsFn('last-century-cell')] = startDecade < startYear;
+        classNameMap[prefixClsFn('next-century-cell')] = endDecade > endYear;
         return (<td
           key={startDecade}
-          onClick={self.chooseDecade.bind(self,startDecade)}
+          onClick={self.chooseDecade.bind(self, startDecade)}
           role="gridcell"
-          className = {cx({
-            'rc-calendar-decade-panel-cell': 1,
-            'rc-calendar-decade-panel-selected-cell': startDecade <= currentYear && currentYear <= endDecade,
-            'rc-calendar-decade-panel-last-century-cell': startDecade < startYear,
-            'rc-calendar-decade-panel-next-century-cell': endDecade > endYear
-          })}
+          className = {cx(classNameMap)}
         >
           <a
-            className="rc-calendar-decade-panel-decade">
-             {startDecade}<br/>-<br/>{endDecade}
+            className={prefixClsFn('decade')}>
+             {startDecade}
+            <br/>
+            -
+            <br/>{endDecade}
           </a>
@@ -95,23 +104,23 @@ </td>);
     return (
-      <div className="rc-calendar-decade-panel">
-        <div className = "rc-calendar-decade-panel-header">
-          <a className = "rc-calendar-decade-panel-prev-century-btn"
+      <div className={this.state.prefixCls}>
+        <div className = {prefixClsFn('header')}>
+          <a className = {prefixClsFn('prev-century-btn')}
             role="button"
             onClick={this.previousCentury}
             title={locale.previousCentury}>
-          «
+            «
           </a>
-          <div className = "rc-calendar-decade-panel-century">
+          <div className = {prefixClsFn('century')}>
                 {startYear}-{endYear}
           </div>
-          <a className = "rc-calendar-decade-panel-next-century-btn"
+          <a className = {prefixClsFn('next-century-btn')}
             role="button"
             onClick={this.nextCentury}
             title={locale.nextCentury}>
-          »
+            »
           </a>
         </div>
-        <div className = "rc-calendar-decade-panel-body">
-          <table className = "rc-calendar-decade-panel-table" cellSpacing="0" role="grid">
-            <tbody className = "rc-calendar-decade-panel-tbody">
+        <div className =  {prefixClsFn('body')}>
+          <table className = {prefixClsFn('table')} cellSpacing="0" role="grid">
+            <tbody className = {prefixClsFn('tbody')}>
             {decadesEls}
@@ -118,0 +127,0 @@ </tbody>

lib/locale/en-us.js

@@ -6,20 +6,26 @@ /**
  */
-module.exports = ({
-    today: 'Today',
-    clear: 'Clear',
-    previousMonth: 'Previous month (PageUp)',
-    nextMonth: 'Next month (PageDown)',
-    monthSelect: 'Choose a month',
-    yearSelect: 'Choose a year',
-    decadeSelect: 'Choose a decade',
-    yearFormat: 'yyyy',
-    dateFormat: 'M/d/yyyy',
-    monthYearFormat: 'MMMM yyyy',
-    previousYear: 'Last year (Control + left)',
-    nextYear: 'Next year (Control + right)',
-    previousDecade: 'Last decade',
-    nextDecade: 'Next decade',
-    previousCentury: 'Last century',
-    nextCentury: 'Next century',
-    veryShortWeekdays: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
-});
+module.exports = {
+  today: 'Today',
+  clear: 'Clear',
+  hourPanelTitle: 'Select hour',
+  minutePanelTitle: 'Select minute',
+  secondPanelTitle: 'Select second',
+  monthSelect: 'Choose a month',
+  yearSelect: 'Choose a year',
+  decadeSelect: 'Choose a decade',
+  yearFormat: 'yyyy',
+  dateFormat: 'M/d/yyyy',
+  monthYearFormat: 'MMMM yyyy',
+  previousMonth: 'Previous month (PageUp)',
+  nextMonth: 'Next month (PageDown)',
+  hourInput: 'Last hour(Up), Next hour(Down)',
+  minuteInput: 'Last minute(Up), Next minute(Down)',
+  secondInput: 'Last second(Up), Next second(Down)',
+  previousYear: 'Last year (Control + left)',
+  nextYear: 'Next year (Control + right)',
+  previousDecade: 'Last decade',
+  nextDecade: 'Next decade',
+  previousCentury: 'Last century',
+  nextCentury: 'Next century',
+  veryShortWeekdays: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+};

lib/locale/zh-cn.js

@@ -7,20 +7,26 @@ /**
 module.exports = ({
-    today: '今天',
-    clear: '清除',
-    previousMonth: '上个月 (翻页上键)',
-    nextMonth: '下个月 (翻页下键)',
-    monthSelect: '选择月份',
-    yearSelect: '选择年份',
-    decadeSelect: '选择年代',
-    /*jshint quotmark: false*/
-    yearFormat: "yyyy'年'",
-    monthYearFormat: "yyyy'年'M'月'",
-    dateFormat: "yyyy'年'M'月'd'日'",
-    previousYear: '上一年 (Control键加左方向键)',
-    nextYear: '下一年 (Control键加右方向键)',
-    previousDecade: '上一年代',
-    nextDecade: '下一年代',
-    previousCentury: '上一世纪',
-    nextCentury: '下一世纪',
-    veryShortWeekdays: ['日', '一', '二', '三', '四', '五', '六']
-});
+  today: '今天',
+  clear: '清除',
+  previousMonth: '上个月 (翻页上键)',
+  nextMonth: '下个月 (翻页下键)',
+  monthSelect: '选择月份',
+  yearSelect: '选择年份',
+  decadeSelect: '选择年代',
+  hourInput: '上一小时(上方向键), 下一小时(下方向键)',
+  minuteInput: '上一分钟(上方向键), 下一分钟(下方向键)',
+  secondInput: '上一秒(上方向键), 下一小时(下方向键)',
+  hourPanelTitle: '选择小时',
+  minutePanelTitle: '选择分钟',
+  secondPanelTitle: '选择秒',
+  /*jshint quotmark: false*/
+  yearFormat: "yyyy'年'",
+  monthYearFormat: "yyyy'年'M'月'",
+  dateFormat: "yyyy'年'M'月'd'日'",
+  previousYear: '上一年 (Control键加左方向键)',
+  nextYear: '下一年 (Control键加右方向键)',
+  previousDecade: '上一年代',
+  nextDecade: '下一年代',
+  previousCentury: '上一世纪',
+  nextCentury: '下一世纪',
+  veryShortWeekdays: ['日', '一', '二', '三', '四', '五', '六']
+});

lib/MonthPanel.js

@@ -9,2 +9,3 @@ /** @jsx React.DOM */
 var YearPanel = require('./YearPanel');
+var util = require('./util');
 
@@ -18,5 +19,9 @@ function goYear(self, direction) {
 var MonthPanel = React.createClass({
+  prefixClsFn: util.prefixClsFn,
+
   getInitialState: function () {
     return {
-      value: this.props.value
+      value: this.props.value,
+      prefixCls: this.props.rootPrefixCls + '-month-panel'
+
     };
@@ -94,4 +99,8 @@ },
     var currentMonth = value.getMonth();
+    var prefixClsFn = this.prefixClsFn;
     var monthsEls = months.map(function (month, index) {
       var tds = month.map(function (m) {
+        var classNameMap = {};
+        classNameMap[prefixClsFn('cell')] = 1;
+        classNameMap[prefixClsFn('selected-cell')] = m.value === currentMonth;
         return (
@@ -102,8 +111,5 @@ <td role="gridcell"
             title={m.title}
-            className = {cx({
-              "rc-calendar-month-panel-cell": 1,
-              "rc-calendar-month-panel-selected-cell": m.value === currentMonth
-            })}>
+            className = {cx(classNameMap)}>
             <a
-              className = "rc-calendar-month-panel-month">
+              className = {prefixClsFn('month')}>
             {m.content}
@@ -118,34 +124,34 @@ </a>
     if (this.state.showYearPanel) {
-      yearPanel = <YearPanel locale={locale} value={value} onSelect={this.onYearPanelSelect}/>;
+      yearPanel = <YearPanel locale={locale} value={value} rootPrefixCls={props.rootPrefixCls} onSelect={this.onYearPanelSelect}/>;
     }
 
     return (
-      <div className="rc-calendar-month-panel">
+      <div className= {this.state.prefixCls}>
         <div>
-          <div className = "rc-calendar-month-panel-header">
-            <a className = "rc-calendar-month-panel-prev-year-btn"
+          <div className = {prefixClsFn('header')}>
+            <a className = {prefixClsFn('prev-year-btn')}
               role="button"
               onClick={this.previousYear}
               title={locale.previousYear}>
-            «
+              «
             </a>
 
-            <a className = "rc-calendar-month-panel-year-select"
+            <a className = {prefixClsFn('year-select')}
               role="button"
               onClick={this.showYearPanel}
               title={locale.yearSelect}>
-              <span className = "rc-calendar-month-panel-year-select-content">{year}</span>
-              <span className = "rc-calendar-month-panel-year-select-arrow">x</span>
+              <span className = {prefixClsFn('year-select-content')}>{year}</span>
+              <span className = {prefixClsFn('year-select-arrow')}>x</span>
             </a>
 
-            <a className = "rc-calendar-month-panel-next-year-btn"
+            <a className = {prefixClsFn('next-year-btn')}
               role="button"
               onClick={this.nextYear}
               title={locale.nextYear}>
-            »
+              »
             </a>
           </div>
-          <div className = "rc-calendar-month-panel-body" >
-            <table className = "rc-calendar-month-panel-table" cellSpacing="0" role="grid">
-              <tbody className = "rc-calendar-month-panel-tbody">
+          <div className = {prefixClsFn('body')}>
+            <table className = {prefixClsFn('table')} cellSpacing="0" role="grid">
+              <tbody className = {prefixClsFn('tbody')}>
               {monthsEls}
@@ -152,0 +158,0 @@ </tbody>

lib/util.js

@@ -436,3 +436,10 @@ function cx(classNames) {
   cx:cx,
+  prefixClsFn: function () {
+    var prefixCls = this.state.prefixCls;
+    var args = Array.prototype.slice.call(arguments,0);
+    return args.map(function (s) {
+      return prefixCls + '-' + s;
+    }).join(' ');
+  },
   KeyCode:KeyCode
 };

lib/YearPanel.js

@@ -9,2 +9,3 @@ /** @jsx React.DOM */
 var DecadePanel = require('./DecadePanel');
+var util = require('./util');
 
@@ -18,5 +19,8 @@ function goYear(self, direction) {
 var YearPanel = React.createClass({
+  prefixClsFn: util.prefixClsFn,
+
   getInitialState: function () {
     return {
-      value: this.props.value
+      value: this.props.value,
+      prefixCls: this.props.rootPrefixCls + '-year-panel'
     };
@@ -94,5 +98,11 @@ },
     var endYear = startYear + 9;
+    var prefixClsFn = this.prefixClsFn;
 
     var yeasEls = years.map(function (row, index) {
       var tds = row.map(function (y) {
+        var classNameMap = {};
+        classNameMap[prefixClsFn('cell')] = 1;
+        classNameMap[prefixClsFn('selected-cell')] = y.content === currentYear;
+        classNameMap[prefixClsFn('last-decade-cell')] = y.content < startYear;
+        classNameMap[prefixClsFn('next-decade-cell')] = y.content > endYear;
         return (
@@ -103,11 +113,6 @@ <td role="gridcell"
             onClick={self.chooseYear.bind(self, y.content)}
-            className = {cx({
-              'rc-calendar-year-panel-cell': 1,
-              'rc-calendar-year-panel-selected-cell': y.content === currentYear,
-              'rc-calendar-year-panel-last-decade-cell': y.content < startYear,
-              'rc-calendar-year-panel-next-decade-cell': y.content > endYear
-            })}
+            className = {cx(classNameMap)}
           >
             <a
-              className="rc-calendar-year-panel-year">
+              className={prefixClsFn('year')}>
             {y.content}
@@ -122,36 +127,36 @@ </a>
     if (this.state.showDecadePanel) {
-      decadePanel = <DecadePanel locale={locale} value={value} onSelect={this.onDecadePanelSelect}/>;
+      decadePanel = <DecadePanel locale={locale} value={value} rootPrefixCls={props.rootPrefixCls} onSelect={this.onDecadePanelSelect}/>;
     }
 
     return (
-      <div className="rc-calendar-year-panel">
+      <div className={this.state.prefixCls}>
         <div>
-          <div className = "rc-calendar-year-panel-header">
-            <a className = "rc-calendar-year-panel-prev-decade-btn"
+          <div className = {prefixClsFn('header')}>
+            <a className = {prefixClsFn('prev-decade-btn')}
               role="button"
               onClick={this.previousDecade}
               title={locale.previousDecade}>
-            «
+              «
             </a>
 
-            <a className = "rc-calendar-year-panel-decade-select"
+            <a className = {prefixClsFn('decade-select')}
               role="button"
               onClick={this.showDecadePanel}
               title={locale.decadeSelect}>
-              <span className = "rc-calendar-year-panel-decade-select-content">
+              <span className = {prefixClsFn('decade-select-content')}>
                 {startYear}-{endYear}
               </span>
-              <span className = "rc-calendar-year-panel-decade-select-arrow">x</span>
+              <span className = {prefixClsFn('decade-select-arrow')}>x</span>
             </a>
 
-            <a className = "rc-calendar-year-panel-next-decade-btn"
+            <a className = {prefixClsFn('next-decade-btn')}
               role="button"
               onClick={this.nextDecade}
               title={locale.nextDecade}>
-            »
+              »
             </a>
           </div>
-          <div className = "rc-calendar-year-panel-body">
-            <table className = "rc-calendar-year-panel-table" cellSpacing="0" role="grid">
-              <tbody className = "rc-calendar-year-panel-tbody">
+          <div className = {prefixClsFn('body')}>
+            <table className = {prefixClsFn('table')} cellSpacing="0" role="grid">
+              <tbody className = {prefixClsFn('tbody')}>
               {yeasEls}
@@ -158,0 +163,0 @@ </tbody>

package.json

 {
   "name": "rc-calendar",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "calendar ui component for react",
@@ -39,8 +39,8 @@ "keywords": [
   "devDependencies": {
-    "precommit-hook": "^1.0.7",
-    "rc-server": "^1.4.2",
-    "rc-tools": "^1.0.1",
     "async": "~0.9.0",
     "expect.js": "~0.3.1",
     "modulex": "^1.7.4",
+    "precommit-hook": "^1.0.7",
+    "rc-server": "^1.5.0",
+    "rc-tools": "^1.1.0",
     "react": "~0.12.1"
@@ -78,6 +78,2 @@ },
     },
-    "devDependencies": {
-      "async": "~0.9.0",
-      "expect.js": "~0.3.1"
-    },
     "output": [
@@ -84,0 +80,0 @@ "lib/locale/*.js"

README.md

@@ -32,6 +32,8 @@ # rc-calendar
 
-![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
@@ -45,2 +47,12 @@
 
+### 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
@@ -75,2 +87,14 @@
         <tr>
+          <td>className</td>
+          <td>String</td>
+          <td></td>
+          <td>additional css class of root dom node</td>
+        </tr>
+        <tr>
+          <td>orient</td>
+          <td>String[]</td>
+          <td></td>
+          <td>affect the position of arrow. exp: ['left','top']</td>
+        </tr>
+        <tr>
           <td>locale</td>
@@ -94,2 +118,8 @@ <td>Object</td>
         <tr>
+          <td>showTime</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>whether to support time select</td>
+        </tr>
+        <tr>
            <td>focused</td>
@@ -96,0 +126,0 @@ <td>Boolean</td>

tests/index-spec.js

@@ -20,3 +20,3 @@ /** @jsx React.DOM */
     beforeEach(function (done) {
-      React.render(<Calendar showToday={1} />, container, function () {
+      React.render(<Calendar showToday={true} />, container, function () {
         calendar = this;
@@ -23,0 +23,0 @@ done();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

110015

increased by24.53%

Number of package files

40

increased by14.29%

Lines of code

2869

increased by48.65%

Number of lines in readme file

167

increased by21.9%

No dependency changes