Arabic Date Input Component

Introduction

This document provides comprehensive information about the Arabic Date Input component, which allows users to input dates in Arabic format.

Overview

The Arabic Date Input component is designed to enhance user experience by providing a user-friendly interface for date input in Arabic. It utilizes React and is styled for easy integration into your projects.

Features

• Arabic Language Support: The component is specifically designed to handle date input in Arabic.
• Customizable Styles: Users can customize the appearance of the input field to match their application's design.
• Icon Support: The component allows for the inclusion of icons to enhance user interaction.
• Autocompletion and Suggestions: The component provides autocompletion features and suggestions for date input.
• Date Picker Integration: Users can select dates from a calendar interface for easier input.

Demo of the Arabic Date Input Component

Here’s a quick demo showing how the Arabic Date Input component works:

Demo of the Arabic Date Input Component

How to Use

1. Installation:

   • Ensure that the required libraries are installed. Use the following command to install the Arabic Date Input library:

     npm install arabic-date-input-app

2. Setup:

   • Import the component into your React application:

     import { ArabicDateInput } from "arabic-date-input-app";
     import { FaAddressBook } from "react-icons/fa";
     import { useState } from "react";
     import "react-datepicker/dist/react-datepicker.css";
     import "arabic-date-input-app/dist/index.css";

3. Usage:

   • Here’s an example of how to use the Arabic Date Input component in your application:

     function App() {
       const [value, setValue] = useState("2024-01-01");
       return (
         <>
           <div>
             <div>{value}</div>
     
             <div
               style={{
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
                 height: "10vh",
               }}
             >
               <ArabicDateInput
                 containerStyle={{
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center",
                 }}
                 placeholder="Year - Month - Day"
                 inputStyle={{
                   paddingRight: "50px",
                   paddingTop: "10px",
                   paddingBottom: "10px",
                   width: "150px",
                   border: "3px solid #000",
                   borderRadius: "30px",
                   fontWeight: "bold",
                   fontSize: "16px",
                 }}
                 icon={<FaAddressBook size={20} />}
                 field={{
                   value: value,
                   onChange: (value) => {
                     setValue(value);
                   },
                 }}
                 form={{}}
                 enableSuggestions={true} // Enable autocompletion and suggestions
                 showCalendar={true} // Show date picker calendar
               />
             </div>
           </div>
         </>
       );
     }
     
     export default App;

Contribution

If you would like to contribute to improving the component, please open pull requests or report issues.

Conclusion

We hope this document helps you understand how to use the Arabic Date Input component. If you have any inquiries, feel free to reach out to us.