React DatePicker: Panduan Lengkap – Codewithaden

Tanggal dan Waktu adalah beberapa bagian penting dari aplikasi web apa pun. Tidak peduli kerangka kerja mana yang Anda gunakan untuk membangun dan bereaksi tidak berbeda. Komponen DatePicker adalah yang paling banyak digunakan dalam aplikasi web apa pun.

Bereaksi Datepicker

Menggunakan datepicker di Reaksi , menggunakan React-Datepicker kemasan. React DatePicker adalah komponen sederhana dan dapat digunakan kembali yang dapat membantu Anda mengintegrasikan pemetik tanggal dan waktu dengan beberapa fungsionalitas khusus. Jika Anda perlu menggunakan lokal selain en-AS default, Anda juga harus mengimpornya ke proyek Anda dari tanggal-fn).

Anda juga perlu menginstal Reaksi dan Proptipe Secara terpisah karena dependensi itu tidak termasuk dalam paket.

Anda juga perlu meminta file CSS dari paket ini (atau menyediakan sendiri).

Langkah 1: Instal React.js

Ketik perintah berikut.

npx create-react-app reactdates
cd reactdates
npm start 

React

Langkah 2: Instal React Date Picker

Install React-Datepicker menggunakan perintah berikut.

npm install react-datepicker --save

# or

yarn add react-datepicker 

Kami juga perlu menginstal Momen.js Secara terpisah karena ketergantungan tidak termasuk dalam paket.

Di bawah ini adalah contoh sederhana menggunakan datePicker dalam tampilan bereaksi. Anda juga perlu memerlukan CSS file dari paket ini.

npm install moment --save

# or

yarn add moment 

Juga, instal Bootstrap menggunakan perintah berikut.

npm install bootstrap --save

# or

yarn add bootstrap 

Oke, sekarang kami telah menginstal semua perpustakaan Frontend.

Langkah selanjutnya adalah mengatur ujung depan.

Langkah 3: Tambahkan datepicker ke formulir

Dalam SRC >> app.js file, ganti kode berikut di dalam App.js mengajukan.

// App.js

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
 
import 'react-datepicker/dist/react-datepicker.css';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {

  constructor (props) {
    super(props)
    this.state = {
      startDate: moment()
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    })
  }

  handleSubmit(e) {
    e.preventDefault();
    let main = this.state.startDate
    console.log(main.format('L'));
  }

  render() {
    return (
      

React Datepicker Example

); } } export default App;

Penjelasan

Di sini, kami telah mengimpor DatePicker, momen , bootstrap Perpustakaan.

Kami telah menetapkan tanggal awal ke tanggal hari ini.

Ketika pengguna mengubah tanggal, itu akan mengatur status baru dengan nilai -nilai baru.

Saat pengguna mengirimkan tanggal, kami mendapatkan nilai kotak teks, yang merupakan objek Momen, Sehingga kita dapat menyebut fungsi momen seperti memformat pada nilai kotak teks.

Kita dapat memformat tanggal dengan cara apa pun yang kita inginkan.

Sekarang, komponen memiliki banyak opsi untuk dikonfigurasi.

Penggunaan paling mendasar dari datepicker dapat dijelaskan dengan:

 

Anda dapat menggunakan Ondent Event Handler, yang menembak setiap kali beberapa tanggal kalender telah dipilih.

 

Itu OnClickoutside Handler mungkin membantu untuk menutup datepicker Di barisan mode.

Pemilih Waktu

Anda juga dapat menyertakan pemilih waktu dengan menambahkan prop select showimes.

 

Cara memilih waktu dengan tanggal di datepicker

Tulis kode berikut di dalam App.js mengajukan. Ganti komponen.

 

Pilih Waktu Hanya di React DatePicker

Tulis kode berikut di dalam App.js mengajukan.

 

react

Langkah 4: Buat backend Node.js

Di dalam folder root reaktif , buat satu folder lagi yang disebut backend

Masuk ke dalam folder, buka terminal, dan inisialisasi package.json file menggunakan perintah berikut.

npm init -y 

Sekarang, instal dependensi berikut.

yarn add express body-parser mongoose cors

# or

npm install express body-parser mongoose --save 

Juga, instal nodemon sebagai ketergantungan pembangunan.

npm install nodemon --save-dev 

Sekarang, buat satu file yang disebut server.js dan tambahkan kode berikut.

// server.js

const app = require('express')(),
  bodyParser = require('body-parser'),
  cors = require('cors'),
  mongoose = require('mongoose');

  const PORT = process.env.PORT || 4000;

  app.listen(PORT, () => {
    console.log('Listening on port ' + PORT);
  });
 

Hal berikutnya adalah menghubungkan Mongodb database dengan kami Aplikasi Node.js

Jika Anda belum menginstal database MongoDB, instal dan mulai Mongodb server.

Ketik perintah berikut untuk memulai Mongodb server.

mongod 

Jadi, sekarang, kita perlu menghubungkan aplikasi Node.js kita ke Mongodb database.

Buat satu file yang dipanggil Db.js di dalam backend map.

// DB.js

module.exports = {
  DB: 'mongodb://localhost:27017/reactdates'
}; 

Impor ini Db.js file di dalam kami server.js file dan gunakan Perpustakaan Mongoose untuk mengatur koneksi basis data dengan Mongodb .

Kami juga dapat menggunakan Mongoose untuk menyimpan data dalam database menggunakan Mongoose ORM.

Tulis kode berikut di dalam server.js file untuk menghubungkan kami Mongodb aplikasi ke Node.js server.

// server.js

const app = require('express')(),
  bodyParser = require('body-parser'),
  cors = require('cors'),
  mongoose = require('mongoose')
  config = require('./DB');

  mongoose.Promise = global.Promise;
  mongoose.connect(config.DB, { useNewUrlParser: true }).then(
    () => {console.log('Database is connected') },
    err => { console.log('Can not connect to the database'+ err)}
  );

  const PORT = process.env.PORT || 4000;

  app.use(bodyParser.json());
  app.use(cors());

  app.listen(PORT, () => {
    console.log('Listening on port ' + PORT);
  });
 

Simpan file, buka terminal, dan mulai node.js server menggunakan perintah berikut. Pastikan Anda berada di dalam backend root folder dan bukan di reaktif root folder.

nodemon server 

MongoDB

Sekarang kita punya jumlah dari tiga server sedang berjalan.

  1. React Development Server.
  2. Server node.js.
  3. Server MongoDB.

Langkah 5: Buat model dan rute ekspres.

Kita perlu membuat dua folder di dalam backend Folder menelepon rute dan model.

Di Model ‘ folder, buat satu model yang disebut Datemodel.js.

// DateModel.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

let DateModel = new Schema({
  sDate: {
    type: Date
  },
},{
    collection: 'dates'
});

module.exports = mongoose.model('DateModel', DateModel); 

Di sini, kami hanya akan menyimpan satu bidang yang disebut sdate , dan tipe datanya Tanggal.

Dalam rute folder, buat satu file yang dipanggil tanggal route.js. Lalu, tambahkan kode berikut di dalam Date.Route.js mengajukan.

// date.route.js

const dateRoute = require('express').Router(),
      DateModel = require('../models/DateModel');

dateRoute.route('/add').post(function (req, res) {
  let datemodel = new DateModel(req.body);
  datemodel.save()
    .then(dateSaved => {
    res.status(200).json({'dateSaved': 'Date in added successfully'});
    })
    .catch(err => {
    res.status(400).send("unable to save to database");
    });
});

module.exports = dateRoute; 

Sekarang, pekerjaan backend kami selesai. Ketika POS Permintaan menyentuh rute: /tanggal/tambah, itu akan menyimpan nilai di dalam Mongodb database.

Final kami server.js File terlihat seperti ini.

// server.js
const app = require('express')(),
  bodyParser = require('body-parser'),
  cors = require('cors'),
  mongoose = require('mongoose')
  config = require('./DB'),
  dateRoute = require('./routes/date.route');

  mongoose.Promise = global.Promise;
  mongoose.connect(config.DB, { useNewUrlParser: true }).then(
    () => {console.log('Database is connected') },
    err => { console.log('Can not connect to the database'+ err)}
  );

  const PORT = process.env.PORT || 4000;

  app.use(bodyParser.json());
  app.use(cors());

  app.use('/dates', dateRoute);

  app.listen(PORT, () => {
    console.log('Listening on port ' + PORT);
  });
 

Langkah 6: Instal Axios dan kirim permintaan pos.

Ketik perintah berikut untuk menginstal Axios Perpustakaan menggunakan perintah berikut. Kita perlu menginstalnya frontend , jadi tolong buka terminal di dalam reaktif Root Proyek.

yarn add axios

# or

npm install axios --save 

Sekarang impor Axios di dalam App.js mengajukan dan mengirim data ke server Node.js. Kemudian, akhirnya, tulis kode terakhir di dalam App.js mengajukan.

// server.js

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import axios from 'axios';
 
import 'react-datepicker/dist/react-datepicker.css';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {

  constructor (props) {
    super(props)
    this.state = {
      startDate: moment()
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    })
  }

  handleSubmit(e) {
    e.preventDefault();
    let mainDate = this.state.startDate;
    const dateObj = {
      sDate: mainDate.format('L')
    }
    axios.post('http://localhost:4000/dates/add', dateObj)
        .then(res => console.log(res.data));
  }

  render() {
    return (
      

React Datepicker Example

); } } export default App;

Simpan file dan buka browser, pilih data dan kirimkan formulir dan Anda dapat melihat di konsol bahwa tanggal kami berhasil disimpan di dalam Mongodb database.

React

Saya telah mengirimkan empat tanggal. Jadi dalam database MongoDB, ada empat entri.

Mongoose

Itu untuk tutorial ini.

Kode GitHub

Posting yang disarankan

Bereaksi crud

Cara menyimpan beberapa nilai kotak centang dalam bereaksi

React Dropdown Pilih

Bereaksi material UI

Bereaksi AutoComplete

Cara membuat komponen tab bootstrap

Bereaksi aksios

React Redux Axios

React Redux Node MongoDB JWT Authentication

React Bootstrap Table2

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *