import React, { useState } from 'react'; import { Card, Container, Form, Row, Col, } from 'react-bootstrap'; import BreadCrumb from '../../../Components/Common/BreadCrumb'; import ColorPicker from "@vtaits/react-color-picker"; import { SketchPicker } from "react-color"; //Import Flatepicker import Flatpickr from "react-flatpickr"; import { Head } from '@inertiajs/react'; import Layout from '../../../Layouts'; import 'flatpickr/dist/themes/material_green.css'; const FormPickers = () => { const [color, setcolor] = useState("rgba(3, 142, 220, 1)"); const [colorCust, setcolorCust] = useState("rgba(95, 208, 243, 1)"); const [colorRGBA, setcolorRGBA] = useState("rgba(247, 204, 83, 1)"); const [display_RGBA, setdisplay_RGBA] = useState(false); const [display_Cust, setdisplay_Cust] = useState(false); function handleRGBA() { setdisplay_RGBA(!display_RGBA); } function handleCust() { setdisplay_Cust(!display_Cust); } const onSwatchHover_RGBA = (color: any) => { const format = "rgba(" + color.rgb.r + "," + color.rgb.g + "," + color.rgb.b + "," + color.rgb.a + ")"; setcolorRGBA(format); }; const onSwatchHover_Cust = (color: any) => { const format1 = "rgba(" + color.rgb.r + "," + color.rgb.g + "," + color.rgb.b + "," + color.rgb.a + ")"; setcolorCust(format1); }; const [simple_color, setsimple_color] = useState(0); const onDrag = (c1: any) => { setcolor(c1); }; const today = new Date(); const maxDate = new Date(); maxDate.setDate(today.getDate() + 365); return (

Flatpickr - Datepicker

Basic

DateTime

Human-Friendly Dates

MinDate and MaxDate

Default Date

Disabling Dates

Selecting Multiple Dates

Range

Inline

Week Numbers

Flatpickr - Timepicker

Timepicker

24-hour Time Picker

Time Picker w/ Limits

Preloading Time

Inline

); }; FormPickers.layout = (page:any) => export default FormPickers;