{"id":21658932,"url":"https://github.com/dmtrKovalenko/material-ui-datetimepicker","last_synced_at":"2025-07-17T21:32:04.055Z","repository":{"id":57292118,"uuid":"98874227","full_name":"dmtrKovalenko/material-ui-datetimepicker","owner":"dmtrKovalenko","description":"[UNMAINTAINED] Wrapper for Material UI  Date and Time picker components","archived":false,"fork":false,"pushed_at":"2018-07-12T15:13:41.000Z","size":3828,"stargazers_count":31,"open_issues_count":9,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-29T21:06:42.831Z","etag":null,"topics":["date-time","datetime","datetimepicker","material-ui","picker-component"],"latest_commit_sha":null,"homepage":"https://dmtrkovalenko.github.io/material-ui-datetimepicker/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmtrKovalenko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-31T09:53:35.000Z","updated_at":"2023-04-17T08:03:06.000Z","dependencies_parsed_at":"2022-08-27T16:50:46.172Z","dependency_job_id":null,"html_url":"https://github.com/dmtrKovalenko/material-ui-datetimepicker","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrKovalenko%2Fmaterial-ui-datetimepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrKovalenko%2Fmaterial-ui-datetimepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrKovalenko%2Fmaterial-ui-datetimepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmtrKovalenko%2Fmaterial-ui-datetimepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmtrKovalenko","download_url":"https://codeload.github.com/dmtrKovalenko/material-ui-datetimepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226178967,"owners_count":17586097,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["date-time","datetime","datetimepicker","material-ui","picker-component"],"created_at":"2024-11-25T09:30:03.692Z","updated_at":"2024-11-25T09:30:25.411Z","avatar_url":"https://github.com/dmtrKovalenko.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Deprecated \nWe suggest migrate to [material-ui v1](https://material-ui-next.com/guides/migration-v0.x) and use [material-ui-pickers](https://github.com/dmtrKovalenko/material-ui-pickers) for date/time pickers.\nThis project will not be longer supported.\n\n# Material UI Date \u0026 Time picker\n\n\u003e Wrapper for [Material UI](http://material-ui.com) Time and Date picker component\n\n# [Demo](https://dmtrkovalenko.github.io/material-ui-datetimepicker/)\nComponent, that joins Material UI`s pickers into the one component, one input and 2 dialogs, appearing one by one. \n\nWe are recommending to use your custom wrapper outside of this component to store your custom props, and not pass Dialogs each time you use this package, because it should be solved in one of next material-ui versions\n\n### Dependencies\n\n* **Material UI** (Don`t use this package without material-ui, please)\n* **React** \n\n### Getting Started\nHere is a quick example to get you started, it's all you need:\n\n```sh\nnpm install material-ui-datetimepicker\n``` \n\n### Simple usage\n\n```jsx\nimport React from 'react';\nimport DateTimePicker from 'material-ui-datetimepicker';\nimport DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog'\nimport TimePickerDialog from 'material-ui/TimePicker/TimePickerDialog';\n\nclass Demo extends React.Component {\n  state = {\n    dateTime: null\n  }\n\n  setDate = (dateTime) =\u003e this.setState({ dateTime })\n\n  render() {\n    return (\n      \u003cDateTimePicker \n        onChange={this.setDate}\n        DatePicker={DatePickerDialog}\n        TimePicker={TimePickerDialog}\n      /\u003e\n    );\n  }\n}\n```\n\n### Advanced \nNote that each of this props applied by default\n\n```jsx\nimport DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog';\nimport TimePickerDialog from 'material-ui/TimePicker/TimePickerDialog';\n\n\u003cDateTimePicker\n  value={new Date()} // picker value moment/string/number/js Date\n  format='MMM DD, YYYY hh:mm A'\n  timePickerDelay={150}\n  returnMomentDate={false} // if true will return moment object\n  className='datetime-container'\n  textFieldClassName='datetime-input'\n  name='picker' // form value name\n  datePickerMode='portrait' // or landscape\n  openToYearSelection={false} \n  disableYearSelection={false}\n  hideCalendarDate={false}\n  firstDayOfWeek={1}\n  minutesStep={1}\n  showCurrentDateByDefault={false}\n  clearIcon={\u003cClearIcon /\u003e} // set null to not render nothing\n  // available callbacks\n  onChange={() =\u003e {}}\n  onTimePickerShow={() =\u003e {}}\n  onDatePickerShow={() =\u003e {}}\n  onDateSelected={() =\u003e {}}\n  onTimeSelected={() =\u003e {}}\n  shouldDisableDate={() =\u003e {}}\n  DatePicker={DatePickerDialog}\n  TimePicker={TimePickerDialog}\n  // styles\n  clearIconStyle={{ }}\n  textFieldStyle={{ }}\n  style={{ }} // root\n  timePickerBodyStyle={{ }}\n/\u003e\n```\n### Customizing input\nYou can apply any of material ui [Text Field](http://www.material-ui.com/#/components/text-field) props to the root.\n\n```jsx\n\u003cDateTimePicker\n  floatingLabelFixed\t\n  floatingLabelText=\"Get my date\"\n  floatingLabelFocusStyle={{ marginTop: '10px' }}\n  disabled={false}\n  errorText='Required'\n  id=\"some-id\"\n  fullWidth={false}\n/\u003e\n```\n## Contributing\nFor information about how to contribute, see the [CONTRIBUTING](https://github.com/dmtrKovalenko/material-ui-datetimepicker/blob/master/CONTRIBUTE.md) file.\n\n## LICENSE\nThe project is licensed under the terms of [MIT license](https://github.com/dmtrKovalenko/material-ui-datetimepicker/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FdmtrKovalenko%2Fmaterial-ui-datetimepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FdmtrKovalenko%2Fmaterial-ui-datetimepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FdmtrKovalenko%2Fmaterial-ui-datetimepicker/lists"}