All Projects → TeamWertarbyte → Material Ui Time Picker

TeamWertarbyte / Material Ui Time Picker

Licence: mit
A time picker for Material-UI.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Material Ui Time Picker

Togglebuttons
Android toggle buttons that adhere to the Material Design documentation.
Stars: ✭ 88 (-30.16%)
Mutual labels:  material-design, material-ui, ui-components
Smart Webcomponents
Web Components & Custom Elements for Professional Web Applications
Stars: ✭ 110 (-12.7%)
Mutual labels:  material-design, material-ui, ui-components
Datingapp
Dating UI kit is used for online meet up with girls and boys . The screen contains more than 30 icons and most of all required elements required to design an application like this. The XML and JAVA files contains comments at each and every point for easy understanding. Everything was made with a detail oriented style and followed by today's web trends. Clean coded & Layers are well-organized, carefully named, and grouped.
Stars: ✭ 97 (-23.02%)
Mutual labels:  material-design, material-ui, ui-components
Pentagonfloatingactionbutton
Android property animation - The Value Animator
Stars: ✭ 106 (-15.87%)
Mutual labels:  material-design, material-ui
Svelte Material Ui
Svelte Material UI Components
Stars: ✭ 2,081 (+1551.59%)
Mutual labels:  material-design, material-ui
Mediapicker
Easy customizable picker for all your needs in Android application
Stars: ✭ 105 (-16.67%)
Mutual labels:  material-design, material-ui
Android Art
🎄 Android™ 设计相关的在线工具: 图标制作、配色方案、尺寸修改、截图加壳等,持续更新...
Stars: ✭ 95 (-24.6%)
Mutual labels:  material-design, ui-components
Fancyshowcaseview
An easy-to-use customisable show case view with circular reveal animation.
Stars: ✭ 1,662 (+1219.05%)
Mutual labels:  material-design, material-ui
Mui Treasury
A collection of ready-to-use components based on Material-UI
Stars: ✭ 1,821 (+1345.24%)
Mutual labels:  material-design, material-ui
Ct Material Kit Pro
Premium Bootstrap 4 UI Kit based on Google's Material Design
Stars: ✭ 123 (-2.38%)
Mutual labels:  material-design, ui-components
React Multi Select
A Multi Select component built with and for React
Stars: ✭ 111 (-11.9%)
Mutual labels:  material-ui, ui-components
Android Issue Reporter
A powerful and simple library to open issues on GitHub directly from your app.
Stars: ✭ 115 (-8.73%)
Mutual labels:  material-design, material-ui
Smooth Ui
Modern React UI library 💅👩‍🎤🍭
Stars: ✭ 1,583 (+1156.35%)
Mutual labels:  material-ui, ui-components
Cardview
Material Design Cards ? How cool is that !
Stars: ✭ 101 (-19.84%)
Mutual labels:  material-design, material-ui
Materialanim
基于Android 系统的动画总结
Stars: ✭ 123 (-2.38%)
Mutual labels:  material-design, material-ui
Material Dashboard
Material Dashboard - Open Source Bootstrap 5 Material Design Admin
Stars: ✭ 9,987 (+7826.19%)
Mutual labels:  material-design, material-ui
Camerabutton
Instagram-like button for taking photos or recording videos
Stars: ✭ 121 (-3.97%)
Mutual labels:  material-design, material-ui
Cyanea
A theme engine for Android
Stars: ✭ 1,319 (+946.83%)
Mutual labels:  material-design, material-ui
Materialspinner
Implementation of a Material Spinner for Android with TextInputLayout functionalities
Stars: ✭ 107 (-15.08%)
Mutual labels:  material-design, material-ui
Materialabout
It's a material-design about screen to use on your Android apps. A developer profile and application information easy to integrate. 🔖
Stars: ✭ 1,511 (+1099.21%)
Mutual labels:  material-design, material-ui

material-ui-time-picker

npm Package Build Status Coverage Status

This project provides a time picker for Material-UI.

Demo

Installation

npm i --save material-ui-time-picker

Usage

There are multiple ways to use this component to allow greater flexibility. This is the most basic usage that behaves similar to the Material-UI 0.x time picker:

import TimeInput from 'material-ui-time-picker'

// uncontrolled input
<TimeInput
  mode='12h'
  onChange={(time) => this.handleChange(time)}
/>

// controlled input
<TimeInput
  mode='12h'
  value={this.state.time}
  onChange={(time) => this.handleChange(time)}
/>

For detailed documentation, take a look into the styleguide. The source code, especially the tests, might also be helpful.

TimeInput Properties

Name Type Default Description
autoOk bool false If true, automatically accept and close the picker on set minutes.
cancelLabel string 'Cancel' Override the label of the cancel button.
ClockProps object Properties to pass down to the Clock component.
defaultValue Date This default value overrides initialTime and placeholder.
initialTime Date The default value for the time picker.
inputComponent elementType Input The component used for the input. Either a string to use a DOM element or a component.
placeholder string The placeholder value for the time picker before a time has been selected.
mode enum: '12h' '24h' '12h' Sets the clock mode, 12-hour or 24-hour clocks are supported.
okLabel string 'Ok' Override the label of the ok button.
onChange func Callback that is called with the new date (as Date instance) when the value is changed.
openOnMount bool If true, automatically opens the dialog when the component is mounted.
TimePickerProps object Properties to pass down to the TimePicker component.
value Date The value of the time picker, for use in controlled mode.

Note: TimeInput behaves like Material-UI's Input component and can be used inside FormControls.

License

The files included in this repository are licensed under the MIT license.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].