Inline Date Picker

docs/src/app/components/pages/components/date-picker.jsx

@@ -29,6 +29,12 @@ export default class DatePickerPage extends React.Component {
       {
         name: 'Props',
         infoArray: [
+          {
+            name: 'container',
+            type: 'one of: dialog, container',
+            header: 'default: dialog',
+            desc: 'The date pickers container type',
+          },
           {
             name: 'DateTimeFormat',
             type: 'func',
@@ -204,6 +210,15 @@ export default class DatePickerPage extends React.Component {
             hintText="Landscape Dialog"
             mode="landscape" />
 
+          <DatePicker
+            hintText="Inline"
+            container="inline" />
+
+          <DatePicker
+            hintText="Inline (AutoOk)"
+            container="inline"
+            autoOk={true} />
+
           <DatePicker
             hintText="Controlled Date Input"
             value={this.state.controlledDate}

docs/src/app/components/raw-code/date-picker-code.txt

@@ -23,3 +23,12 @@
   DateTimeFormat={Intl.DateTimeFormat}
   wordings={{ok: 'OK', cancel: 'Annuler'}}
   locale="fr" />
+//Inline Picker
+<DatePicker
+  hintText="Inline"
+  container="inline" />
+//Inline Picker (AutoOk)
+<DatePicker
+  hintText="Inline (AutoOk)"
+  container="inline"
+  autoOk={true} />

src/date-picker/date-picker-dialog.jsx

@@ -7,6 +7,7 @@ const CssEvent = require('../utils/css-event');
 const KeyCode = require('../utils/key-code');
 const Calendar = require('./calendar');
 const Dialog = require('../dialog');
+const DatePickerInline = require('./date-picker-inline');
 const FlatButton = require('../flat-button');
 const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');
 const ThemeManager = require('../styles/theme-manager');
@@ -39,6 +40,7 @@ const DatePickerDialog = React.createClass({
   },
 
   propTypes: {
+    container: React.PropTypes.oneOf(['dialog', 'inline']),
     DateTimeFormat: React.PropTypes.func,
     locale: React.PropTypes.string,
     wordings: React.PropTypes.object,
@@ -68,6 +70,7 @@ const DatePickerDialog = React.createClass({
   getDefaultProps: function() {
     return {
       DateTimeFormat: DateTime.DateTimeFormat,
+      container: 'dialog',
       locale: 'en-US',
       wordings: {
         ok: 'OK',
@@ -82,6 +85,7 @@ const DatePickerDialog = React.createClass({
 
   getInitialState() {
     return {
+      open: false,
       isCalendarActive: false,
       muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
     };
@@ -102,6 +106,7 @@ const DatePickerDialog = React.createClass({
       initialDate,
       onAccept,
       style,
+      container,
       ...other,
     } = this.props;
 
@@ -148,9 +153,11 @@ const DatePickerDialog = React.createClass({
           onTouchTap={this._handleOKTouchTap} />
       );
     }
-
+    // will change later when Popover is available.
+    const Container = (container === 'inline' ? DatePickerInline : Dialog);
     return (
-      <Dialog {...other}
+      <Container 
+        {...other}
         ref="dialog"
         style={styles.root}
         contentStyle={styles.dialogContent}
@@ -159,7 +166,9 @@ const DatePickerDialog = React.createClass({
         onDismiss={this._handleDialogDismiss}
         onShow={this._handleDialogShow}
         onClickAway={this._handleDialogClickAway}
-        repositionOnUpdate={false}>
+        repositionOnUpdate={false}
+        open={this.state.open}
+      >
         <Calendar
           DateTimeFormat={DateTimeFormat}
           locale={locale}
@@ -172,15 +181,21 @@ const DatePickerDialog = React.createClass({
           shouldDisableDate={this.props.shouldDisableDate}
           showYearSelector={this.props.showYearSelector}
           mode={this.props.mode} />
-      </Dialog>
+      </Container>
     );
   },
 
   show() {
+    if (this.props.container === 'inline') {
+      return this.setState({'open': true});
+    }
     this.refs.dialog.show();
   },
 
   dismiss() {
+    if (this.props.container === 'inline') {
+      return this.setState({'open': false});
+    }
     this.refs.dialog.dismiss();
   },
 

src/date-picker/date-picker-inline.jsx

@@ -0,0 +1,62 @@
+const React = require('react');
+const Paper = require('../paper');
+
+const DatePickerInline = React.createClass({
+
+  propTypes: {
+    open: React.PropTypes.bool,
+  },
+
+  getDefaultProps: function() {
+    return {
+      open: false,
+    };
+  },
+
+  render() {
+    const {
+      actions,
+      children,
+      open,
+      style,
+      ...other,
+    } = this.props;
+
+    if (!open) {
+      return <span></span>;
+    }
+
+    const styles = {
+      actions: {
+        marginRight: 8,
+        paddingBottom: 12,
+        textAlign: 'right',
+      },
+      container: {
+        zIndex: 3,
+        width: '100%',
+        position: 'relative',
+        display: 'block',
+      },
+      subContainer: {
+        position:'absolute',
+        height: 'auto',
+      },
+    };
+    return (
+      <div style={styles.container}> 
+        <div style={styles.subContainer}>
+          <Paper {...other}>
+            {children}
+            <div style={styles.actions}>
+              {actions}
+            </div>
+          </Paper>
+        </div>
+      </div>
+    );
+  },
+
+});
+
+module.exports = DatePickerInline;

src/date-picker/date-picker.jsx

@@ -28,6 +28,7 @@ const DatePicker = React.createClass({
   },
 
   propTypes: {
+    container: React.PropTypes.oneOf(['dialog', 'inline']),
     DateTimeFormat: React.PropTypes.func,
     locale: React.PropTypes.string,
     wordings: React.PropTypes.object,
@@ -37,7 +38,7 @@ const DatePicker = React.createClass({
     hideToolbarYearChange: React.PropTypes.bool,
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
-    mode: React.PropTypes.oneOf(['portrait', 'landscape', 'inline']),
+    mode: React.PropTypes.oneOf(['portrait', 'landscape']),
     onDismiss: React.PropTypes.func,
     onChange: React.PropTypes.func,
     onFocus: React.PropTypes.func,
@@ -83,6 +84,7 @@ const DatePicker = React.createClass({
 
   render() {
     let {
+      container,
       DateTimeFormat,
       locale,
       wordings,
@@ -113,6 +115,7 @@ const DatePicker = React.createClass({
           onFocus={this._handleInputFocus}
           onTouchTap={this._handleInputTouchTap}/>
         <DatePickerDialog
+          container={container}
           ref="dialogWindow"
           DateTimeFormat={DateTimeFormat}
           locale={locale}