사용자 지정 시간 선택기 React 구성 요소 빌드

1661 단어 timepickerreact
이 기사에서는 react-datetime 및 react-input-mask 패키지를 결합한 사용자 지정 시간 선택기 구성 요소를 만듭니다.

1단계 — 기본 CRA 시작




npx create-react-app axon

2단계 — react-datetime 및 react-input-mask 패키지 설치



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

3단계 - 시간 선택기 구성 요소 설정






4단계 — 스타일 시간 선택기 구성 요소




<script id="gist-ltag"src="https://gist.github.com/anlisha-maharjan/3ab43016b6b7995a30addbd26f4098be.js"/>


5단계 — App.js에서 CustomTimePicker 구성 요소 가져오기




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;


그게 다야!



포스트Build a custom time picker React componentAnlisha Maharjan에 처음 등장했습니다.

좋은 웹페이지 즐겨찾기