상상해보세요.

고객이 약속 날짜와 시간을 선택할 수있는 양식입니다.

이메일을주고받을 필요가 없으며 고객이 직접 선택한 약속 시간 만 있으면됩니다.

React datepicker Flatpikr를 입력하십시오 .

Flatpickr는 무엇입니까?

Flatpickr는 Angular, Vue, Ember 및 React와 호환되는 경량의 UX 기반 JavaScript 라이브러리입니다.

다른 날짜 시간 라이브러리의 일부이며 IE9, Edge, Chrome, Safari 및 Firefox 브라우저에서 지원됩니다.

기능은 다음과 같습니다.

• 날짜 / 시간 입력
• 8 가지 다채로운 테마
• 인간 친화적 인 형식
• 날짜 범위 및 시간 비활성화

1. React 앱 만들기
2. 설치 react-flatpickr
3. 앱에서 Flatpickr 가져 오기
4. Flatpickr 테마 가져 오기
5. constructor()방법 추가
6. render()방법 추가
7. 상태 변수를 Flatpickr 구성 요소에 전달
8. OnChange()이벤트 후크 추가
9. FlatPickr 형식화 반응

Windows 명령 프롬프트

C:\Users\Owner\desktop\react> npx create-react-app react-example

C:\Users\Owner\desktop\react> cd react-example

C:\Users\Owner\desktop\react\react-example> npm start

브라우저에서 React App 열기

개발 서버에서 실행중인 React 앱을 보려면 개발 서버를 실행하십시오.

React 파일 구성

react-example> src> index.js (업데이트 됨)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'))

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        
        <h1>Hello World</h1>
        
      </div>
    );
  }
       
}

export default App;

index.js 및 App.js 파일을 제외한 src 파일의 모든 항목을 삭제 하십시오. 그런 다음 기본 클래스 구성 요소를 추가합니다.

React Datepicker 설치

Flatpickr 설치

Windows 명령 프롬프트

(command + C)
Terminate batch job (Y/N)? y

C:\Users\Owner\desktop\react\react-example> npm install react-flatpickr

C:\Users\Owner\desktop\react\react-example> npm start

설치가 완료되면 서버를 다시 실행하십시오.

React Datepicker 구성

Flatpickr 가져 오기

react-example> src> App.js

import React, { Component } from 'react';
import Flatpickr from "react-flatpickr";


class App extends Component {
  render() {
    return (
      <div className="App">
        
        <h1>Hello World</h1>
        
      </div>
    );
  }
       
}

export default App;

선택한 Flatpickr CSS에로드

react-example> src> App.js

import React, { Component } from 'react';
import Flatpickr from "react-flatpickr";
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        
        <h1>Hello World</h1>
        
      </div>
    );
  }
       
}

export default App;

• material_green.css
• material_blue.css
• material_red.css
• material_orange.css
• dark.css
• airbnb.css
• confetti.css

react-example> src> App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    return (
      <div className="App">
        
        <h1>Some Text</h1>
        
      </div>
    );
  }
       
}

export default App;

무엇입니까 constructor()방법은?

constructor()방법은, 클래스 구성 요소에서 생성 된 객체를 초기화한다.

구성 요소 super()의 constructor()메서드를 호출 합니다.

무엇입니까 super()방법은?

super()부모 구성 요소에 대한 액세스를 제공하고 이제 this.

무엇입니까 this.state?

this.state 렌더링 된 값입니다 (예 : 현재 화면에있는 것).

그런 다음 date과 같은 상태 변수를 생성합니다 new Date().

무엇입니까 new Date()?

new Date(), JavaScript 생성자로 호출되면 현재 날짜 및 시간의 새 문자열 표현을 반환합니다.

const 변수 추가

react-example> src> App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <div className="App">
        
        <h1>Some Text</h1>
        
      </div>
    );
  }
       
}

export default App;

변수 란 무엇입니까 const?

const변수 값을 일정한 기준이다. 값은 상수에 대한 할당 때문에 변경할 수없는 원시 값입니다.

상태 변수를 Flatpickr에 전달

react-example> src> App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <Flatpickr
        data-enable-time
        value={date}
        onChange={date => {
          this.setState({ date });
        }}
      />
    );
  }
}

export default App;

화살표 함수를 사용 OnChange하여 매개 변수 date를 전달 하는 이벤트 후크 도 추가 합니다.

후크 는 무엇입니까 OnChange?

OnChange이벤트 트리거 후크 사용자가 날짜를 선택하거나 시간을 변경하는 경우.

무엇입니까 setState?

setState() 메소드는 컴포넌트 상태를 변경하고 React에게 업데이트 된 상태로 컴포넌트와 자식을 다시 렌더링하도록 지시합니다.

브라우저에서 React Datetime Picker보기

브라우저에서 우리의 작업을 볼 시간입니다.

페이지를 새로 고침하고 붐!

현재 날짜와 시간이 입력 된 것을 볼 수 있습니다.

이제 입력을 클릭하십시오.

날짜 및 시간 옵션이있는 달력이 나타납니다.

날짜와 시간을 변경할 수 있습니다.

추가 React Datepicker 옵션

이제 사용자 지정 옵션에 대해 살펴 보겠습니다.

Flatpickr 반응 : minDate

react-example> src> App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <Flatpickr
        data-enable-time
        value={date}
        options={{
              minDate: 'today',
            }}
        onChange={date => {
          this.setState({ date });
        }}
      />
    );
  }
}

export default App;

Flatpickr 반응 : minTime

react-example> src> App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <Flatpickr
        data-enable-time
        value={date}
        options={{
              minTime: "08:00",
            }}
        onChange={date => {
          this.setState({ date });
        }}
      />
    );
  }
}

export default App;

Flatpickr 반응 : maxTime

react-example> src> App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <Flatpickr
        data-enable-time
        value={date}
        options={{
              maxTime: "17:00",
            }}
        onChange={date => {
          this.setState({ date });
        }}
      />
    );
  }
}

export default App;

Flatpickr 반응 : altFormat

react-example> src> App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <Flatpickr
        data-enable-time
        value={date}
        options={{
              altFormat: "m/d/Y h:i K",
              altInput:true,
            }}
        onChange={date => {
          this.setState({ date });
        }}
      />
    );
  }
}

export default App;

React Flatpickr : 특정 요일 비활성화

react-example> src> App.js

import React, { Component } from 'react';
import Flatpickr from 'react-flatpickr';
import "flatpickr/dist/themes/material_green.css";

class App extends Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  
  render() {
    const { date } = this.state;
    return (
      <Flatpickr
        data-enable-time
        value={date}
        options={{
              disable: [
              function(date) {
                  // return true to disable
                  return (date.getDay() === 0 || date.getDay() === 6);}],
            }}
        onChange={date => {
          this.setState({ date });
        }}
      />
    );
  }
}

export default App;

이 기능은 선택에서 일요일과 토요일을 비활성화합니다.

그것들은 몇 가지 기본적인 예일뿐입니다. 밖으로 체크 아웃 flatpickr.js.org을 사용자 정의 옵션에 대한 자세한 내용은.

원래 https://www.ordinarycoders.com에 게시되었습니다 .