From 4e5161efa1449eb96e9018284310480dcb8052ba Mon Sep 17 00:00:00 2001 From: Zadielerick Date: Mon, 21 Dec 2015 14:42:55 -0600 Subject: [PATCH] Updated Docs for Date Picker --- .../components/DatePicker/ExampleSimple.jsx | 123 +++++++ docs/src/app/components/DatePicker/README.md | 3 + .../pages/components/date-picker.jsx | 302 +----------------- .../components/raw-code/date-picker-code.txt | 35 -- src/date-picker/date-picker.jsx | 97 ++++++ 5 files changed, 235 insertions(+), 325 deletions(-) create mode 100644 docs/src/app/components/DatePicker/ExampleSimple.jsx create mode 100644 docs/src/app/components/DatePicker/README.md delete mode 100644 docs/src/app/components/raw-code/date-picker-code.txt diff --git a/docs/src/app/components/DatePicker/ExampleSimple.jsx b/docs/src/app/components/DatePicker/ExampleSimple.jsx new file mode 100644 index 00000000000000..567787488ce320 --- /dev/null +++ b/docs/src/app/components/DatePicker/ExampleSimple.jsx @@ -0,0 +1,123 @@ +import React from 'react'; +import DatePicker from 'material-ui/lib/date-picker/date-picker'; +import TextField from 'material-ui/lib/text-field'; +import Toggle from 'material-ui/lib/toggle'; + +const optionsStyle = { + width: 300, + margin: '0 auto', +}; + +export default class DatePickerExampleSimple extends React.Component { + + constructor(props) { + super(props); + + let minDate = new Date(); + let maxDate = new Date(); + minDate.setFullYear(minDate.getFullYear() - 1); + minDate.setHours(0, 0, 0, 0); + maxDate.setFullYear(maxDate.getFullYear() + 1); + maxDate.setHours(0, 0, 0, 0); + + this.state = { + minDate: minDate, + maxDate: maxDate, + autoOk: false, + controlledDate: new Date('2015/07/15'), + }; + } + + render() { + return ( +
+ + + + + + + + + + + + + + +
+ + + + + + + +
+
+ ); + } + + _updateMinDate = (e) => { + this.setState({ + minDate: new Date(e.target.value), + }); + } + + _updateMaxDate = (e) => { + this.setState({ + maxDate: new Date(e.target.value), + }); + } + + _handleToggle = (e, toggled) => { + let state = {}; + state[e.target.name] = toggled; + this.setState(state); + } + + _handleChange = (nill, date) => { + this.setState({controlledDate: date}); + } + +} + +export default DatePickerExampleSimple; diff --git a/docs/src/app/components/DatePicker/README.md b/docs/src/app/components/DatePicker/README.md new file mode 100644 index 00000000000000..8325f43f090a26 --- /dev/null +++ b/docs/src/app/components/DatePicker/README.md @@ -0,0 +1,3 @@ +## Date Picker +[Date Pickers](https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers) are used to select a single date for an input. +### Examples diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx index 0db3d955881f8b..8007028d5cb017 100644 --- a/docs/src/app/components/pages/components/date-picker.jsx +++ b/docs/src/app/components/pages/components/date-picker.jsx @@ -1,9 +1,11 @@ import React from 'react'; -import {DatePicker, TextField, Paper, Toggle} from 'material-ui'; -import ComponentDoc from '../../component-doc'; -import Code from 'date-picker-code'; +import datePickerCode from '!raw!material-ui/lib/date-picker/date-picker'; import CodeExample from '../../code-example/code-example'; -import CodeBlock from '../../code-example/code-block'; +import PropTypeDescription from '../../PropTypeDescription'; +import DatePickerExamples from '../../DatePicker/ExampleSimple'; +import datePickerExamplesCode from '!raw!../../DatePicker/ExampleSimple'; +import MarkdownElement from '../../MarkdownElement'; +import datePickerReadmeText from '../../DatePicker/README'; if (!window.Intl) { require('intl'); @@ -13,299 +15,19 @@ if (!window.Intl) { export default class DatePickerPage extends React.Component { constructor(props) { super(props); - - let minDate = new Date(); - let maxDate = new Date(); - minDate.setFullYear(minDate.getFullYear() - 1); - minDate.setHours(0, 0, 0, 0); - maxDate.setFullYear(maxDate.getFullYear() + 1); - maxDate.setHours(0, 0, 0, 0); - - this.state = { - minDate: minDate, - maxDate: maxDate, - autoOk: false, - controlledDate: new Date('2015/07/15'), - }; } render() { - let componentInfo = [ - { - name: 'Props', - infoArray: [ - { - name: 'container', - type: 'one of: dialog, inline', - header: 'default: dialog', - desc: 'Used to control how the DatePicker will be displayed when a user tries to set ' + - 'a date. `dialog` (default) displays the DatePicker as a dialog with a modal. `inline` ' + - 'displays the DatePicker below the input field (similar to auto complete)', - }, - { - name: 'DateTimeFormat', - type: 'func', - header: 'default: custom function defined inside utils/date-time.js that only supports en-US locale', - desc: 'Constructor for time formatting. Follow this specificaction: ' + - 'ECMAScript Internationalization API 1.0 (ECMA-402).', - }, - { - name: 'locale', - type: 'string', - header: 'default: en-US', - desc: 'Locale used for formatting date. If you are not using the default value, ' + - 'you have to provide a DateTimeFormat that supports it. You can use Intl.DateTimeFormat' + - ' if it\'s supported by your environment. https://github.com/andyearnshaw/Intl.js is a good polyfill.', - }, - { - name: 'wordings', - type: 'object', - header: 'default: {ok: \'OK\', cancel: \'Cancel\' }', - desc: 'Wordings used inside the button of the dialog.', - }, - { - name: 'autoOk', - type: 'bool', - header: 'default: false', - desc: 'If true, automatically accept and close the picker on select a date.', - }, - { - name: 'defaultDate', - type: 'instanceOf(Date)', - header: 'optional', - desc: 'This is the initial date value of the component. If either `value` or `valueLink` ' + - 'is provided they will override this prop with `value` taking precedence.', - }, - { - name: 'disableYearSelection', - type: 'bool', - header: 'optional', - desc: 'If true, year selection will be disabled, otherwise, year selection will be enabled.', - }, - { - name: 'floatingLabelText', - type: 'string', - header: 'optional', - desc: 'The text string to use for the floating label element.', - }, - { - name: 'formatDate', - type: 'function', - header: 'default: formats to M/D/YYYY', - desc: 'This function is called to format the date to display in ' + - 'the input box. By default, date objects are formatted to M/D/YYYY.', - }, - { - name: 'hintText', - type: 'string', - header: 'optional', - desc: 'The hint text string to display. Note, floatingLabelText will overide this.', - }, - { - name: 'maxDate', - type: 'instanceOf(Date)', - header: 'optional', - desc: 'The ending of a range of valid dates. The range includes the endDate. ' + - 'The default value is current date + 100 years.', - }, - { - name: 'minDate', - type: 'instanceOf(Date)', - header: 'optional', - desc: 'The beginning of a range of valid dates. The range includes the startDate. ' + - 'The default value is current date - 100 years.', - }, - { - name: 'mode', - type: 'oneOf ["portrait", "landscape"]', - header: 'default: portrait', - desc: 'Tells the component to display the picker in portrait or landscape mode.', - }, - { - name: 'shouldDisableDate', - type: 'function', - header: 'optional', - desc: 'Called during render time of a given day. If this method returns false ' + - 'the day is disabled otherwise it is displayed normally.', - }, - { - name: 'style', - type: 'object', - header: 'optional', - desc: 'Override the inline-styles of DatePicker\'s root element.', - }, - { - name: 'textFieldStyle', - type: 'object', - header: 'optional', - desc: 'Override the inline-styles of DatePicker\'s TextField element.', - }, - ], - }, - { - name: 'Methods', - infoArray: [ - { - name: 'getDate', - header: 'DatePicker.getDate()', - desc: 'Returns the current date value.', - }, - { - name: 'setDate', - header: 'DatePicker.setDate(d)', - desc: 'Sets the date value to d, where d is a date object.', - }, - { - name: 'openDialog', - header: 'DatePicker.openDialog()', - desc: 'Opens the date-picker dialog programmatically. Use this if you want to open the ' + - 'dialog in response to some event other than focus/tap on the input field, such as an ' + - 'external button click.', - }, - { - name: 'focus', - header: 'DatePicker.focus()', - desc: 'An alias for the `openDialog()` method to allow more generic use alongside `TextField`.', - }, - ], - }, - { - name: 'Events', - infoArray: [ - { - name: 'onChange', - header: 'function(null, date)', - desc: 'Callback function that is fired when the date value ' + - 'changes. Since there is no particular event associated with ' + - 'the change the first argument will always be null and the second ' + - 'argument will be the new Date instance.', - }, - { - name: 'onDismiss', - header: 'function()', - desc: 'Fired when the datepicker dialog is dismissed.', - }, - { - name: 'onFocus', - header: 'function(event)', - desc: 'Callback function that is fired when the datepicker field ' + - 'gains focus.', - }, - { - name: 'onShow', - header: 'function()', - desc: 'Fired when the datepicker dialog is shown.', - }, - ], - }, - ]; - - let optionsStyle = { - width: '300px', - margin: '0 auto', - }; - return ( - - - - - { - '//Import statements:\nimport DatePicker from \'material-ui/lib/date-picker/date-picker\';\n' + - 'import DatePickerDialog from \'material-ui/lib/date-picker/date-picker-dialog\';\n\n' + - '//See material-ui/lib/index.js for more\n' - } - - - - - - - - - - - - - - - - - - -
- - - - - - - -
+
+ + + - + +
); } - _updateMinDate(e) { - this.setState({ - minDate: new Date(e.target.value), - }); - } - _updateMaxDate(e) { - this.setState({ - maxDate: new Date(e.target.value), - }); - } - - _handleToggle(e, toggled) { - let state = {}; - state[e.target.name] = toggled; - this.setState(state); - } - - _handleChange(nill, date) { - this.setState({controlledDate: date}); - } } diff --git a/docs/src/app/components/raw-code/date-picker-code.txt b/docs/src/app/components/raw-code/date-picker-code.txt deleted file mode 100644 index d9360ed64ea81e..00000000000000 --- a/docs/src/app/components/raw-code/date-picker-code.txt +++ /dev/null @@ -1,35 +0,0 @@ -//Portrait Dialog - -//Landscape Dialog - -//Controlled Input - -//Ranged Date Picker - - - -//Inline Picker - -//Inline Picker (AutoOk) - diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx index 647dd7b86c508e..d4fcac7f22b534 100644 --- a/src/date-picker/date-picker.jsx +++ b/src/date-picker/date-picker.jsx @@ -30,31 +30,128 @@ const DatePicker = React.createClass({ }, propTypes: { + /** + * Constructor for time formatting. + * Follow this specificaction: ECMAScript Internationalization API 1.0 (ECMA-402). + */ DateTimeFormat: React.PropTypes.func, + + /** + * If true, automatically accept and close the picker on select a date. + */ autoOk: React.PropTypes.bool, + + /** + * Used to control how the DatePicker will be displayed when a user tries to set a date. + * `dialog` (default) displays the DatePicker as a dialog with a modal. + * `inline` displays the DatePicker below the input field (similar to auto complete) + */ container: React.PropTypes.oneOf(['dialog', 'inline']), + + /** + * This is the initial date value of the component. + * If either `value` or `valueLink` is provided they will override this + * prop with `value` taking precedence. + */ defaultDate: React.PropTypes.object, + + /** + * This function is called to format the date to display in the input box. + * By default, date objects are formatted to M/D/YYYY. + */ formatDate: React.PropTypes.func, + + /** + * + */ hideToolbarYearChange: React.PropTypes.bool, + + /** + * Locale used for formatting date. If you are not using the default value, you + * have to provide a DateTimeFormat that supports it. You can use Intl.DateTimeFormat + * if it's supported by your environment. + * https://github.com/andyearnshaw/Intl.js is a good polyfill. + */ locale: React.PropTypes.string, + + /** + * The ending of a range of valid dates. The range includes the endDate. + * The default value is current date + 100 years. + */ maxDate: React.PropTypes.object, + + /** + * The beginning of a range of valid dates. The range includes the startDate. + * The default value is current date - 100 years. + */ minDate: React.PropTypes.object, + + /** + * Tells the component to display the picker in portrait or landscape mode. + */ mode: React.PropTypes.oneOf(['portrait', 'landscape']), + + /** + * Callback function that is fired when the date value changes. Since there + * is no particular event associated with the change the first argument + * will always be null and the second argument will be the new Date instance. + */ onChange: React.PropTypes.func, + + /** + * Fired when the datepicker dialog is dismissed. + */ onDismiss: React.PropTypes.func, + + /** + * Callback function that is fired when the datepicker field gains focus. + */ onFocus: React.PropTypes.func, + + /** + * Fired when the datepicker dialog is shown. + */ onShow: React.PropTypes.func, + + /** + * + */ onTouchTap: React.PropTypes.func, + + /** + * Called during render time of a given day. If this method returns + * false the day is disabled otherwise it is displayed normally. + */ shouldDisableDate: React.PropTypes.func, + + /** + * + */ showYearSelector: React.PropTypes.bool, /** * Override the inline-styles of the root element. */ style: React.PropTypes.object, + + /** + * Override the inline-styles of DatePicker's TextField element. + */ textFieldStyle: React.PropTypes.object, + + /** + * Sets the date for the Date Picker programmatically + */ value: React.PropTypes.any, + + /** + * Creates a ValueLink with the value of date picker + */ valueLink: React.PropTypes.object, + + /** + * Wordings used inside the button of the dialog. + */ wordings: React.PropTypes.object, },