Build a custom time picker React component

custom-time-picker

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

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

cd axon 
npm i react-datetime react-input-mask moment

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;

And that’s it!

--

--