Added border radius and fixed disableYearSelection.

Dolmio · Aug 14, 2015 · 79d3ec1 · 79d3ec1
1 parent 7b5dcc1
commit 79d3ec1
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx
@@ -148,16 +148,19 @@ class DatePickerPage extends React.Component {
         componentInfo={componentInfo}>
 
         <DatePicker
-          hintText="Portrait Dialog" />
+          hintText="Portrait Dialog"
+          disableYearSelection={this.state.disableYearSelection} />
 
         <DatePicker
           hintText="Landscape Dialog"
-          mode="landscape" />
+          mode="landscape"
+          disableYearSelection={this.state.disableYearSelection} />
 
         <DatePicker
           hintText="Controlled Date Input"
           value={this.state.controlledDate}
-          onChange={this._handleChange.bind(this)} />
+          onChange={this._handleChange.bind(this)}
+          disableYearSelection={this.state.disableYearSelection} />
 
         <DatePicker
           hintText="Ranged Date Picker"
@@ -183,6 +186,13 @@ class DatePickerPage extends React.Component {
             label="Auto Accept"
             defaultToggled={this.state.autoOk}
             onToggle={this._handleToggle.bind(this)} />
+
+          <Toggle
+            name="disableYearSelection"
+            value="disableYearSelection"
+            label="Disable Year Selection"
+            defaultToggled={this.state.disableYearSelection}
+            onToggle={this._handleToggle.bind(this)} />
         </div>
       </ComponentDoc>
     );

diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx
@@ -33,6 +33,7 @@ let Calendar = React.createClass({
 
   getDefaultProps() {
     return {
+      disableYearSelection: false,
       initialDate: new Date(),
       minDate: DateTime.addYears(new Date(), -100),
       maxDate: DateTime.addYears(new Date(), 100),
@@ -125,6 +126,7 @@ let Calendar = React.createClass({
       <ClearFix style={this.mergeAndPrefix(styles.root)}>
 
         <DateDisplay
+          disableYearSelection={this.props.disableYearSelection}
           style={styles.dateDisplay}
           selectedDate={this.state.selectedDate}
           handleMonthDayClick={this._handleMonthDayClick}

diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx
@@ -61,9 +61,11 @@ let DateDisplay = React.createClass({
     const styles = {
       root: {
         backgroundColor: theme.selectColor,
+        borderTopLeftRadius: 2,
+        borderTopRightRadius: 2,
         color: theme.textColor,
-        padding: 20,
         height: 60,
+        padding: 20,
       },
 
       month: {
@@ -102,7 +104,7 @@ let DateDisplay = React.createClass({
         },
 
         title: {
-          cursor: (this.state.selectedYear && !this.props.disableYearSelection) ? 'default' : 'pointer',
+          cursor: (this.state.selectedYear && !this.props.disableYearSelection) ? 'pointer' : 'default',
         },
       },
     };
@@ -158,7 +160,9 @@ let DateDisplay = React.createClass({
       this.props.handleYearClick();
     }
 
-    this.setState({selectedYear: true});
+    if (!this.props.disableYearSelection) {
+      this.setState({selectedYear: true});
+    }
   },
 
 });

diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx
@@ -50,8 +50,8 @@ let DatePickerDialog = React.createClass({
 
     let styles = {
       root: {
-        fontSize: 14,
         color: this.context.muiTheme.component.datePicker.calendarTextColor,
+        fontSize: 14,
       },
 
       dialogContent: {