{"action":"created","issue":{"url":"https://api.github.com/repos/callemall/material-ui/issues/1529","repository_url":"https://api.github.com/repos/callemall/material-ui","labels_url":"https://api.github.com/repos/callemall/material-ui/issues/1529/labels{/name}","comments_url":"https://api.github.com/repos/callemall/material-ui/issues/1529/comments","events_url":"https://api.github.com/repos/callemall/material-ui/issues/1529/events","html_url":"https://github.com/callemall/material-ui/issues/1529","id":103629889,"number":1529,"title":"DatePicker has no way to clear it","user":{"login":"pr1ntr","id":1272089,"avatar_url":"https://avatars.githubusercontent.com/u/1272089?v=3","gravatar_id":"","url":"https://api.github.com/users/pr1ntr","html_url":"https://github.com/pr1ntr","followers_url":"https://api.github.com/users/pr1ntr/followers","following_url":"https://api.github.com/users/pr1ntr/following{/other_user}","gists_url":"https://api.github.com/users/pr1ntr/gists{/gist_id}","starred_url":"https://api.github.com/users/pr1ntr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pr1ntr/subscriptions","organizations_url":"https://api.github.com/users/pr1ntr/orgs","repos_url":"https://api.github.com/users/pr1ntr/repos","events_url":"https://api.github.com/users/pr1ntr/events{/privacy}","received_events_url":"https://api.github.com/users/pr1ntr/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":14,"created_at":"2015-08-28T01:57:57Z","updated_at":"2016-07-27T08:10:40Z","closed_at":"2016-04-12T23:41:08Z","body":"I am trying to clear the datepicker. The best I can do is:\r\n`this.refs.myDatePicker.setDate();`\r\n\r\nwhich clears the field. however\r\n`this.refs.myDatePicker.getDate();`\r\nstill gives me the date. Is there a way to remove the date from it?"},"comment":{"url":"https://api.github.com/repos/callemall/material-ui/issues/comments/235516337","html_url":"https://github.com/callemall/material-ui/issues/1529#issuecomment-235516337","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/1529","id":235516337,"user":{"login":"GuillaumeCisco","id":1155244,"avatar_url":"https://avatars.githubusercontent.com/u/1155244?v=3","gravatar_id":"","url":"https://api.github.com/users/GuillaumeCisco","html_url":"https://github.com/GuillaumeCisco","followers_url":"https://api.github.com/users/GuillaumeCisco/followers","following_url":"https://api.github.com/users/GuillaumeCisco/following{/other_user}","gists_url":"https://api.github.com/users/GuillaumeCisco/gists{/gist_id}","starred_url":"https://api.github.com/users/GuillaumeCisco/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/GuillaumeCisco/subscriptions","organizations_url":"https://api.github.com/users/GuillaumeCisco/orgs","repos_url":"https://api.github.com/users/GuillaumeCisco/repos","events_url":"https://api.github.com/users/GuillaumeCisco/events{/privacy}","received_events_url":"https://api.github.com/users/GuillaumeCisco/received_events","type":"User","site_admin":false},"created_at":"2016-07-27T08:10:40Z","updated_at":"2016-07-27T08:10:40Z","body":"I've ended up succeeding using datePicker with the new Field API and with a clearable button.\r\nI had to use null value for resetting the datePicker and not undefined. I also use Moment for dealing with UTC date (It should be the default behaviur by the way).\r\nI''d like to thank you people in this thread for the inspiration and explanation.\r\n\r\nClearable Component : \r\n```\r\nimport React, {Component} from 'react';\r\nimport Moment from 'moment';\r\nimport DatePicker from 'material-ui/DatePicker';\r\nimport IconButton from 'material-ui/IconButton';\r\nimport Clear from 'material-ui/svg-icons/content/clear';\r\n\r\nconst Clearable = ComposedComponent => class extends React.Component {\r\n\r\n    onChange(evt, date) {\r\n        if (this.props.input.onChange) {\r\n            this.props.input.onChange(date ? Moment.utc(Moment(date).format('YYYY-MM-DD[T]HH:mm:ss')).toDate() : null);\r\n        }\r\n    }\r\n\r\n    clearDate (event) {\r\n        event.preventDefault();\r\n\r\n        // We manually reach into the composed component and set it's date to null.\r\n        let newDate = null;\r\n        this.refs.datePicker.setState({\r\n            date: newDate\r\n        }, () => {\r\n            this.refs.datePicker.props.onChange(null, newDate);\r\n        });\r\n    }\r\n    render () {\r\n        return (\r\n            <div style={{position: 'relative'}}>\r\n                <ComposedComponent\r\n                    { ...this.props.input }\r\n                    autoOk={true}\r\n                    container=\"inline\"\r\n                    ref=\"datePicker\"\r\n                    value={this.props.input.value ? new Date(this.props.input.value) : null}\r\n                    onChange={this.onChange.bind(this)}/>\r\n                {this.props.input.value &&\r\n                <IconButton ref=\"button\" onClick={this.clearDate.bind(this)} style={{position: 'absolute', top: '6px',right: '4px', padding: '0', width: '24px', height: '24px'}}>\r\n                    <Clear />\r\n                </IconButton>\r\n                }\r\n            </div>\r\n        )\r\n    }\r\n};\r\n\r\nexport default Clearable(DatePicker);\r\n```\r\n\r\nAnd you can use it like that:\r\n```\r\nimport DatePickerInput from './DatePickerInput';\r\n\r\n<Field name=\"date\" component={DatePickerInput} hintText=\"Date\"/>\r\n```\r\n\r\nHope it will help folks ;)"}}
{"actor":{"display_login":"GuillaumeCisco"}}