import React, { useState } from 'react'; import { Card, Col, Container, Row } from 'react-bootstrap'; import BreadCrumb from '../../../Components/Common/BreadCrumb'; import Cleave from "cleave.js/react"; import "cleave.js/dist/addons/cleave-phone.in"; import { Head } from '@inertiajs/react'; import Layout from '../../../Layouts'; const Masks = () => { const [date, setDate] = useState(""); const [dateFormat, setDateFormat] = useState(""); const [time, setTime] = useState(""); const [timeFormat, setTimeFormat] = useState(""); const [creditCardNo, setCreditCardNo] = useState(""); const [delimiter, setDelimiter] = useState(""); const [delimiter2, setDelimiter2] = useState(""); const [prefix, setPrefix] = useState(""); const [phone, setPhone] = useState(""); const [number, setNumber] = useState(""); //Date function onDateChange(e : any) { setDate(e.target.rawValue); } //Date Format function onDateFormatChange(e : any) { setDateFormat(e.target.rawValue); } //Time function onTimeChange(e : any) { setTime(e.target.rawValue); } //Time Format function onTimeFormatChange(e : any) { setTimeFormat(e.target.rawValue); } //Credit card function onCreditCardChange(e : any) { setCreditCardNo(e.target.rawValue); } //Delimeter function onDelimiterChange(e : any) { setDelimiter(e.target.rawValue); } //Delimeter function onDelimiterChange2(e : any) { setDelimiter2(e.target.rawValue); } //Prefix function onPrefixChange(e : any) { setPrefix(e.target.rawValue); } //Phone function onPhoneChange(e : any) { setPhone(e.target.rawValue); } //Number function onNumberChange(e : any) { setNumber(e.target.rawValue); } return (

Examples

Date Formatting

Date onDateChange(e)} className="form-control" />

Date Formatting onDateFormatChange(e)} className="form-control" />

Time Formatting

Time onTimeChange(e)} className="form-control" />

Time Formatting onTimeFormatChange(e)} className="form-control" />

Custom Options

Credit Card onCreditCardChange(e)} className="form-control" />

Delimiter onDelimiterChange(e)} className="form-control" />

Delimiters onDelimiterChange2(e)} className="form-control" />

Prefix onPrefixChange(e)} className="form-control" />

Phone

Numeral Formatting onNumberChange(e)} className="form-control" />

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