item laporan

src/container/MasterData/formItemLaporan/CreateItemLaporan.js

 import React, { Component } from 'react';
 import { TextField, Typography } from '@material-ui/core';
+import { DatePicker } from '@material-ui/pickers';
 
 const companies = [
     {
@@ -62,12 +63,34 @@ const companies = [
   ];
 
 export default class CreateItemLaporan extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            startDate: new Date(),
+            endDate: new Date(),
+
+        }
+    }
+
+    handleStartDate = (date) => {
+        this.setState({
+            startDate: date
+        });
+      };
+    
+      handleEndDate = (date) => {
+        this.setState({
+            endDate: date
+        });
+      };
 
     componentDidMount() {
         console.log(this.props.data);
     }
 
     render() {
+        const { startDate, endDate } = this.state;
+
         return (
             <div className="test app-popup-show">
                 <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
@@ -269,12 +292,17 @@ export default class CreateItemLaporan extends Component {
                                     }}
                                 />
                             </div>
-                            <div style={{ padding: 10, borderRadius: 5 }}>
-                                <TextField
-                                    style={{ width: '100%' }}
+                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
+                            <DatePicker
+                                    margin="normal"
                                     id="startDate"
+                                    value={startDate}
+                                    onChange={this.handleStartDate}
                                     label="Berlaku Mulai"
-                                    // value={this.props.data.business_unit_name}
+                                    format="dd MMMM yyyy"
+                                    KeyboardButtonProps={{
+                                        'aria-label': 'change date',
+                                    }}
                                     inputProps={{
                                         style: {
                                             fontSize: 11,
@@ -286,16 +314,17 @@ export default class CreateItemLaporan extends Component {
                                     InputLabelProps={{
                                         style: {
                                             fontSize: 11,
+                                            color: '#7e8085',
                                             fontWeight: 600,
                                             fontFamily: 'Nunito Sans, sans-serif',
-                                            color: '#7e8085',
                                             paddingLeft: 10
                                         }
                                     }}
-                                >
-                                </TextField>
+
+                                    style={{ padding: 0, margin: 0, width: '100%' }}
+                                />
                             </div>
-                            <div style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
+                            <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
                                 <TextField
                                     style={{ width: '100%' }}
                                     value="Aktif"
@@ -512,28 +541,36 @@ export default class CreateItemLaporan extends Component {
                                 />
                             </div>
                             <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
-                                <TextField
-                                    style={{ width: '100%' }}
-                                    id="unit"
+                                <DatePicker
+                                    margin="normal"
+                                    id="endDate"
+                                    value={endDate}
+                                    onChange={this.handleEndDate}
                                     label="Berlaku Hingga"
-                                    // defaultValue={"31 Desember 2100"}
+                                    format="dd MMMM yyyy"
+                                    KeyboardButtonProps={{
+                                        'aria-label': 'change date',
+                                    }}
                                     inputProps={{
                                         style: {
                                             fontSize: 11,
                                             fontWeight: 600,
-                                            fontFamily: 'Nunito Sans, sans-serif'
+                                            fontFamily: 'Nunito Sans, sans-serif',
+                                            paddingLeft: 10    
                                         }
                                     }}
                                     InputLabelProps={{
                                         style: {
                                             fontSize: 11,
+                                            color: '#7e8085',
                                             fontWeight: 600,
                                             fontFamily: 'Nunito Sans, sans-serif',
-                                            color: '#7e8085'
+                                            paddingLeft: 10
                                         }
                                     }}
-                                >
-                                </TextField>
+
+                                    style={{ padding: 0, margin: 0, width: '100%' }}
+                                />
                             </div>
                         </div>