diff --git a/.editorconfig b/.editorconfig index 604c94ef..9cf7d4f5 100644 --- 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 index d6ac90dc..df8c56a1 100644 --- 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 index f20b06e7..80185405 100644 --- 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 index d9d67018..df51587a 100644 --- a/examples/index.md +++ b/examples/index.md @@ -56,10 +56,47 @@ React.render(

calendar (en-us, U.S.A. California San Francisco)

+ onSelect={onSelect} prefixCls="classic-calendar"/> , document.getElementById('react-content-standalone2')); ```` +## disable date + + + +````html +
+```` + +````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( +
+

calendar (en-us, U.S.A. California San Francisco)

+ +
, document.getElementById('react-content-standalone3')); +```` + ## render with input @@ -78,4 +115,4 @@ React.render(

input (zh-cn, Beijing)

, document.getElementById('react-content-input')); -```` \ No newline at end of file +```` diff --git a/lib/Calendar.js b/lib/Calendar.js index 58bd8b5a..656290b7 100644 --- 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()} ); } + dateCells.push( - + {dateHtml} ); diff --git a/package.json b/package.json index cde19777..74f1fb1e 100644 --- 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",