optimize disabledDate

amirhossein693 · Jan 8, 2015 · a0d7d4e · a0d7d4e
1 parent a1027db
commit a0d7d4e
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 10 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -2,7 +2,7 @@
 root = true
 
 # Unix-style newlines with a newline ending every file
-[*.{js,css}]
+[*.{js,css,md}]
 end_of_line = lf
 insert_final_newline = true
 indent_style = space

diff --git a/assets/bootstrap/picker.less b/assets/bootstrap/picker.less
@@ -197,10 +197,15 @@
 }
 
 .rc-calendar-last-month-cell .rc-calendar-date,
-.rc-calendar-next-month-btn-day .rc-calendar-date {
+.rc-calendar-next-month-btn-day .rc-calendar-date,
+.rc-calendar-disabled-cell .rc-calendar-date {
   color: #bfbfbf;
 }
 
+.rc-calendar-disabled-cell:hover {
+  background: #ffffff;
+}
+
 .rc-calendar-disabled-cell .rc-calendar-date {
   cursor: default;
 }

diff --git a/assets/classic/Picker.less b/assets/classic/Picker.less
@@ -173,6 +173,7 @@
 }
 
 .classic-calendar-last-month-cell .classic-calendar-date,
+.classic-calendar-disabled-cell .classic-calendar-date,
 .classic-calendar-next-month-btn-day .classic-calendar-date {
   color: #bfbfbf;
 }
@@ -182,6 +183,11 @@
   border-color: #88b1ea;
 }
 
+.classic-calendar-disabled-cell .classic-calendar-date:hover {
+  background-color: #ffffff;
+  border-color: transparent;
+}
+
 .classic-calendar-disabled-cell .classic-calendar-date {
   cursor: default;
 }

diff --git a/examples/index.md b/examples/index.md
@@ -56,10 +56,47 @@ React.render(
     <h2>calendar (en-us, U.S.A.  California  San Francisco)</h2>
     <Calendar showWeekNumber={true}
     showTime={true}
-    onSelect={onSelect} prefixCls='classic-calendar'/>
+    onSelect={onSelect} prefixCls="classic-calendar"/>
   </div>, document.getElementById('react-content-standalone2'));
 ````
 
+## disable date
+
+<link rel="stylesheet" href="../assets/bootstrap.css">
+
+````html
+<div id='react-content-standalone3'></div>
+````
+
+````js
+/** @jsx React.DOM */
+var Calendar = require('../');
+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))
+}
+
+function disabledDate(current,value){
+  var date = new Date();
+  date.setHours(0);
+  date.setMinutes(0);
+  date.setSeconds(0);
+  return current.getTime() < date.getTime();  //can not select days before today
+}
+
+React.render(
+  <div>
+    <h2>calendar (en-us, U.S.A.  California  San Francisco)</h2>
+    <Calendar showWeekNumber={true}
+    disabledDate={disabledDate}
+    onSelect={onSelect}/>
+  </div>, document.getElementById('react-content-standalone3'));
+````
+
 
 ## render with input
 
@@ -78,4 +115,4 @@ React.render(
     <h2>input (zh-cn, Beijing)</h2>
     <CalendarInput />
   </div>, document.getElementById('react-content-input'));
-````
+````
diff --git a/lib/Calendar.js b/lib/Calendar.js
@@ -164,10 +164,6 @@ var Calendar = React.createClass({
 
   chooseDay: function (current) {
     var props = this.props;
-    var disabledDate = props.disabledDate;
-    if (disabledDate && disabledDate(current, this.state.value)) {
-      return;
-    }
     this.setState({
       value: current
     });
@@ -334,8 +330,9 @@ var Calendar = React.createClass({
               {current.getDayOfMonth()}
             </span>);
         }
+
         dateCells.push(
-          <td key={passed}  onClick={this.chooseDay.bind(this, current)} role="gridcell" title={dateFormatter.format(current)} className = {cls}>
+          <td key={passed}  onClick={disabled ? noop : this.chooseDay.bind(this, current)} role="gridcell" title={dateFormatter.format(current)} className = {cls}>
         {dateHtml}
           </td>);
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-calendar",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "calendar ui component for react",
   "keywords": [
     "react",