Implementation React Dates in React JS - STK Blogs

Implementation React Dates in React JS

Hallo semua kali ini saya ingin berbagi artikel tentang Implementation React Dates di React JS, React dates ini sering kali dipakai untuk membuat date picker untuk library react, Dan library ini sangat mudah dipahami dan dipelajari, 

Untuk proses implementasinya disini saya sudah membagi beberapa langkah atau proses dalam penggunaan react dates pada react js, Untuk langkah-langkahnya kalian bisa melihatnya dibawah ini.

Installasi Library React Dates & Moment

Untuk langkah pertama yang harus kita lakukan adalah menginstall library react dates & moment pada project react anda dengan cara memasukkan perintah dibawah ini pada terminal project anda:

$ npm install react-dates moment

Import Component React Dates & Moment

Untuk proses kedua silahkan panggil atau import library react date range picker kedalam project kalian, Untuk cara memanggil atau mengimport kalian bisa melihat contoh yang saya berikan dibawah ini.

import { DateRangePicker } from "react-dates";

import moment from "moment";

Setelah kalian import componant react dates silahkan kalian import juga initialize dan webpack css loader dari react dates, Import initialize dan webpack css loader dibawah kalian import componet react dates.

import "react-dates/initialize";

import "react-dates/lib/css/_datepicker.css";

Untuk keseluruhan import bisa kalian lihat dibawah ini

import { DateRangePicker } from "react-dates";

import moment from "moment";

import "react-dates/initialize";

import "react-dates/lib/css/_datepicker.css";

Implementasi React Dates di React JS

Untuk langkah ketiga ini kita akan mengimplementasikan react dates pada react js, Untuk mengimplementasikan react dates ini mudah dan simple, Dibawah ini saya sudah memberi contoh cara mengimplementasikan react dates diproject react js, Silahkan kalian bisa mencobanya.

Source Code :

import React, { useState, Component } from "react";
import { SingleDatePicker, DateRangePicker } from "react-dates";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import moment from "moment";

moment.locale("id");
 
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
        focusedInput: false,
        date_from: "",
        date_to: "",
    };
  } 

  render() {
    return (
        <DateRangePicker
            startDate={this.state.startDate}
            startDateId="your_unique_start_date_id"
            endDate={this.state.endDate}
            endDateId="your_unique_end_date_id"
            onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })}
            focusedInput={this.state.focusedInput}
            onFocusChange={focusedInput => this.setState({ focusedInput })}
        />
    );
  }
}
export default App;

Untuk hasilnya kurang lebih seperti dibawah ini:

Nah itulah beberapa langkah implementasi react dates pada react js, Semoga bisa bermanfaat untuk anda.

Untuk lebih luasnya kalian bisa membaca documentasinya yang saya taruh dibawah ini:

Sumber Informasi : React Dates (https://www.npmjs.com/package/react-dates)