DEV Community

Cover image for Build a custom time picker React component
Anlisha Maharjan
Anlisha Maharjan

Posted on • Originally published at anlisha.com.np on

Build a custom time picker React component

In this article, we’ll create a custom time picker component combining react-datetime and react-input-mask packages.

Step1 — Start Basic CRA

npx create-react-app axon
Enter fullscreen mode Exit fullscreen mode

Step2 — Install react-datetime and react-input-mask packages

cd axon
npm i react-datetime react-input-mask moment
Enter fullscreen mode Exit fullscreen mode

Step3 — Setup time picker component

Step4 — Style time picker component

Step5 — Import CustomTimePicker component in App.js

import React from "react";
import CustomTimePicker from "./custom-time-picker";
import './custom-time-picker.scss';
function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        width: "100vw",
        height: "100vh",
      }}
    >
      <CustomTimePicker name="time" label="Time" />
    </div>
  );
}
export default App;
Enter fullscreen mode Exit fullscreen mode

And that’s it!

The post Build a custom time picker React component first appeared on Anlisha Maharjan.

Top comments (0)