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!
The post Build a custom time picker React component first appeared on Anlisha Maharjan.
Top comments (0)