diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx
index c190c4c1754433..e6d4cb8e833a23 100644
--- a/docs/src/app/components/pages/components/date-picker.jsx
+++ b/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',
@@ -215,6 +221,15 @@ export default class DatePickerPage extends React.Component {
hintText="Landscape Dialog"
mode="landscape" />
+
+
+
+
+//Inline Picker
+
+//Inline Picker (AutoOk)
+
diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx
index 8d6cd1d026d191..9ad9ac3311c5e1 100644
--- a/src/date-picker/date-picker-dialog.jsx
+++ b/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,
@@ -69,6 +71,7 @@ const DatePickerDialog = React.createClass({
getDefaultProps: function() {
return {
DateTimeFormat: DateTime.DateTimeFormat,
+ container: 'dialog',
locale: 'en-US',
wordings: {
ok: 'OK',
@@ -104,6 +107,7 @@ const DatePickerDialog = React.createClass({
initialDate,
onAccept,
style,
+ container,
...other,
} = this.props;
@@ -150,9 +154,11 @@ const DatePickerDialog = React.createClass({
onTouchTap={this._handleOKTouchTap} />
);
}
-
+ // will change later when Popover is available.
+ const Container = (container === 'inline' ? DatePickerInline : Dialog);
return (
-
-
+
);
},
diff --git a/src/date-picker/date-picker-inline.jsx b/src/date-picker/date-picker-inline.jsx
new file mode 100644
index 00000000000000..122864f261462e
--- /dev/null
+++ b/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() {
+ return {
+ open: false,
+ };
+ },
+
+ render() {
+ const {
+ actions,
+ children,
+ open,
+ style,
+ ...other,
+ } = this.props;
+
+ if (!open) {
+ return ;
+ }
+
+ const styles = {
+ actions: {
+ marginRight: 8,
+ paddingBottom: 12,
+ textAlign: 'right',
+ },
+ container: {
+ zIndex: 3,
+ width: '100%',
+ position: 'relative',
+ display: 'block',
+ },
+ subContainer: {
+ position: 'absolute',
+ height: 'auto',
+ },
+ };
+ return (
+
+
+
+ {children}
+
+ {actions}
+
+
+
+
+ );
+ },
+
+});
+
+module.exports = DatePickerInline;
diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx
index 211a0f25bd77d2..7c1153f2d9c20a 100644
--- a/src/date-picker/date-picker.jsx
+++ b/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}/>