custom-date-ghislain-jambert-p14

//**//Custom Date Picker A reusable and customizable date picker component for React applications.

//Installation You can install the package via npm:

npm install custom-date-ghislain-jambert-p14

//Usage Here's how you can use the CustomDate component in your React project:

import React, { useState } from 'react'; import CustomDate from 'custom-date-ghislain-jambert-p14'; import 'custom-date-ghislain-jambert-p14/dist/CustomDate.css'; // Optional: Include default styles

const App = () => { const [selectedDate, setSelectedDate] = useState(null);

return (

Select a Date

Selected Date: {selectedDate ? selectedDate.toLocaleDateString() : 'None'}

); };

export default App;

//Props The CustomDate component accepts the following props:

selectedDate: The currently selected date. It should be a JavaScript Date object. onDateChange: A callback function triggered when the user selects or inputs a new date. It receives the updated Date object as a parameter. id: The id attribute for the input field (optional). This is useful for accessibility and to reference the input in forms. Features Customizable date input with placeholder YYYY/MM/DD. Supports both manual input and calendar-based selection. Limits selection to dates up to today’s date. Automatically formats dates with slashes (/). Easy navigation between years and months. Accessible for screen readers using aria-label and proper id attributes.

//Example

import React, { useState } from 'react'; import CustomDate from 'custom-date-ghislain-jambert-p14';

const EmployeeForm = () => { const [birthDate, setBirthDate] = useState(null);

return (

Date of Birth Save ); };

//Styling The CustomDate component comes with basic styles. You can import the CSS file in your project, as shown in the usage example above. If you prefer to customize the styles, you can either override the included CSS or apply your own styles to the input and calendar elements.

Here are the main CSS classes used in the component:

.custom-date-picker: Main wrapper for the date picker component. .calendar: Container for the calendar popup. .calendar-header: Contains the buttons to switch between years and months. .calendar-body: Contains the day, month, and year grids. .selected: Highlights the selected day in the calendar.

//Example CSS Override

.custom-date-picker input { border: 1px solid #ccc; padding: 8px; border-radius: 4px; }

.calendar { background-color: white; border: 1px solid #ddd; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); }

//Development Local Setup Clone the repository:

git clone https://github.com/your-repo/custom-date-ghislain-jambert-p14.git cd custom-date-ghislain-jambert-p14

//Install dependencies:

npm install

//Run the development build:

npm start

//Build for Production To build the project for production, run:

npm run build

This command transpiles the source code from the src directory to the dist directory using Babel.

//License This project is licensed under the MIT License - see the LICENSE file for details.

//Author Ghislain Jambert