ShadBalti / Data-format-picker.js

This project provides a JavaScript date formatting library and a simple date picker component to enhance your web applications by allowing you to easily format dates and select dates and times. The library and component are designed to be highly customizable and easy to integrate into your projects.

Date Formatting Library and Date Picker Component

This project provides a JavaScript date formatting library and a simple date picker component to enhance your web applications by allowing you to easily format dates and select dates and times. The library and component are designed to be highly customizable and easy to integrate into your projects.

Features

• Format dates, times, date-time combinations, and relative times.
• Localize date and time formatting according to the user's locale.
• Create a user-friendly date picker component for date selection.
• Improve the readability of charts and graphs by formatting timestamps.

Getting Started

To get started with this library and date picker component, follow these steps:

1. Include the date-format.js file in your project.
2. Customize the library as needed to match your requirements.
3. Include the date-picker.js and date-picker.css files for the date picker component.
4. Customize the component's appearance and behavior to align with your project's design.

Usage

Date Formatting

Format a Date

const date = new Date();
const formattedDate = DateFormatter.formatDate(date, 'long');
console.log(formattedDate);

Format a time

const date = new Date();
const formattedTime = DateFormatter.formatTime(date, 'short');
console.log(formattedTime);

Format Date and Time

const date = new Date();
const formattedDateTime = DateFormatter.formatDateTime(date, 'medium');
console.log(formattedDateTime);

Relative Time

const date = new Date('2023-01-01T12:00:00');
const formattedRelativeTime = DateFormatter.formatRelativeTime(date);
console.log(formattedRelativeTime);

Date Picker Component

The date picker component provides an interactive way to select dates. It can be integrated into your web application for date input.

<div class="date-picker">
  <input type="text" id="selected-date" readonly>
  <button id="show-picker">Select Date</button>
  <div id="date-picker-popup" class="hidden">
    <!-- Date picker interface goes here -->
  </div>
</div>

For more details, refer to the provided date-picker.js and date-picker.css files.

Customize and Extend

You can customize and extend this library and component to match your project's requirements. Feel free to add new features, styles, or localization support as needed.

License

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

---

Feel free to open issues or contribute to this project to make it even better! Enjoy using the Date Formatting Library and Date Picker Component.