Material Ui Time Picker

screenshot of Material Ui Time Picker

Material Ui Time Picker

A time picker for Material-UI.


The material-ui-time-picker is a package that provides a time picker component for Material-UI. It allows users to select a time value easily and integrates seamlessly with the Material-UI library. This package offers flexibility and customization options to enhance the user experience of time selection.


  • AutoOk: Automatically accepts and closes the picker when minutes are set.
  • Cancel Label: Allows overriding the label for the cancel button.
  • Clock Props: Properties to pass down to the Clock component.
  • Default Value: Overrides initialTime and placeholder with a default value.
  • Initial Time: Sets the default value for the time picker.
  • Input Component: Offers the option to use a custom component or DOM element for the input.
  • Placeholder: Specifies the placeholder value for the time picker before a time is selected.
  • Clock Mode: Supports both 12-hour and 24-hour clock modes.
  • Ok Label: Allows overriding the label for the ok button.
  • OnChange: Callback function called when the value is changed.
  • Open On Mount: Automatically opens the dialog when the component is mounted.
  • TimePicker Props: Properties to pass down to the TimePicker component.
  • Value: The value of the time picker, for use in controlled mode.


To install the material-ui-time-picker package, follow these steps:

  1. Open your terminal and navigate to your project directory.
  2. Run the following command to install the package:
npm install material-ui-time-picker
  1. Import the necessary components in your project:
import { TimeInput, Clock, TimePicker } from 'material-ui-time-picker';
  1. You are now ready to use the time picker component in your project.


The material-ui-time-picker package is a valuable addition to the Material-UI library. It provides a customizable and user-friendly time picker component that integrates seamlessly with Material-UI. With features like autoOk, customizable labels, and clock mode options, this package offers flexibility and convenience for time selection. Its easy installation process and comprehensive documentation make it an ideal choice for projects that require time picking functionality.


React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.

GitHub Pages

Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading

Material Design

Material Design is a design system developed by Google that provides a set of guidelines, components, and tools for creating visually appealing and functional user interfaces. Material Design is designed to be flexible and customizable, making it a great choice for a wide range of applications and use cases.


Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.