add Isi TMT

components/Sanksi/TmtDate.js

@@ -1,55 +1,53 @@
-import { Row, Col, Input, FormGroup } from "reactstrap";
-import React, { useState } from "react";
+import React from "react";
 import { useEffect } from "react";
-import ms from "ms";
-import '@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css';
-import DatePicker from '@hassanmojab/react-modern-calendar-datepicker';
+import { useState } from "react";
+import DatePicker from "react-datepicker"
+import 'react-datepicker/dist/react-datepicker.css'
+import FormGroup from "reactstrap/lib/FormGroup";
+import ms from "ms"
 
-function TmtDate() {
 
+function TmtDate() {
+    const [isiTmt, setisiTmt] = useState(null)
     const [maxDay, setmaxDay] = useState(null);
     const [startDay, setstartDay] = useState(null);
-    const [isiTmt, setisiTmt] = useState(null);
 
     useEffect(() => {
         const setday = ms('180d');
-        const tmt_awal = moment(new Date).format("D MMMM YYYY");
+        const tmt_awal = new Date();
         setstartDay(tmt_awal)
         const tmt_akhir = new Date(+ new Date(startDay) + setday);
-        setmaxDay(moment(tmt_akhir).format("D MMMM YYYY"));
-        // const isi_tmt = (moment(setisiTmt).format("D MMMM YYYY"));
-        // setisiTmt(isi_tmt)
-    }, [startDay, maxDay])
+        setmaxDay(tmt_akhir);
+    }, [maxDay, startDay, isiTmt])
+
 
     return (
         <div>
-            <FormGroup row className="mt-1">
-                <label className="col-md-2 col-form-label">Isi TMT</label>
+            <FormGroup row className="mt-3">
+                <label className="col-md-2 col-form-label">Tsi TMT</label>
                 <div className="col-md-10">
                     <DatePicker
-                        value={isiTmt}
+                        selected={isiTmt}
                         onChange={setisiTmt}
-                        inputPlaceholder="isi tmt"
-                        shouldHighlightWeekends
-                        inputClassName="my-custom-input"
+                        dateFormat='dd/MM/yyyy'
+                        minDate={startDay}
+                        maxDate={maxDay}
+                        placeholderText="isi TMT"
+                    // maxDate={addDays(new Date(), 5)}
                     />
-                    <strong> Maximum TMT hingga {maxDay}</strong>
-                </div>
-            </FormGroup>
-            <FormGroup row className="mt-1">
-                <label className="col-md-2 col-form-label">TMT berlaku mulai </label>
-                <div className="col-md-10 mt-2">
-                    {startDay}
+                    <strong>Max pengisian TMT 6 bulan</strong>
                 </div>
             </FormGroup>
             <FormGroup row className="mt-1">
-                <label className="col-md-2 col-form-label">TMT berlaku hingga</label>
+                <label className="col-md-2 col-form-label">TMT berlaku</label>
                 <div className="col-md-10 mt-2">
-                    {(moment(isiTmt).format("D MMMM YYYY"))}
+                    <b>{moment(startDay).format("DD-MM-YYYY")}</b> hingga <b>{(moment(isiTmt).format("DD-MM-YYYY"))}</b>
                 </div>
             </FormGroup>
+
         </div>
-    );
-};
+    )
+}
+
 
-export default TmtDate;
+export default TmtDate

components/Sanksi/UploadSurat.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { Row, Col, Input, FormGroup } from "reactstrap";
 import Select from "react-select";
-// import TmtDate from "./TmtDate";
+import TmtDate from "./TmtDate";
 
 let Dropzone = null;
 class DropzoneWrapper extends Component {
@@ -151,7 +151,7 @@ export class UploadSurat extends Component {
 						{/* <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span> */}
 					</div>
 				</FormGroup>
-				{/* <TmtDate /> */}
+				<TmtDate />
 				<FormGroup row className="mt-3">
 					<label className="col-md-2 col-form-label">List sanksi	</label>
 					<div className="col-md-10">