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

#react #timepicker

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)