Edtimepicker NPM

EDTimePicker

EDTimePicker is a responsive, mobile-friendly date and time picker component for React applications.

Features

Responsive design for mobile and desktop
Easy integration with React projects
Customizable options for date and time selection

Demo

Installation

You can install EDTimePicker via npm:

npm install edtimepicker

Usage

Here's a basic example of how to use the EDTimePicker component in your React application:

import React from 'react';
import EDTimePicker from 'edtimepicker';


function App() {
   const [date, setDate] = useState("03-10-2019 23:00");

   function onTimeChanged(newDate){
      // ... do something
   }
   return (
      <div className="App">
         <h1>Example Usage of EDTimePicker</h1>
         <EDTimePicker
            currentDate = {date} // set Date and Time. #default: new Date();
            options = {{
               borderColor: "#ff0000",
               daysNameFormat: "DDDD, MMM DD",
               timeFormat: "hh:mm A" // or "HH:mm" for 24 hour format
               //.... and more
            }}
            onDateChange = {onTimeChanged}
         />
      </div>
   );
}

export default App;

Options and Defaults

EDTimePicker provides several customizable options, allowing you to tailor its functionality to your needs. Below are the available options and their default values:

Detailed Options

minutesStep: Defines the step interval for minutes selection.
- Default: 15
viewItems: Number of items visible in the picker wheel.
- Default: 3
itemHeight: Height of each item in the picker wheel.
- Default: 40
daysNameWheel: Whether to show days names in a wheel format.
- Default: true
daysNameFormat: Format for displaying the day names.
- Default: "DDDD, MMM DD"
- DDDD - full day name. exp: Sunday
- DDD - short day name. exp: Sun
- DD - day of month with 0. exp: 03 or 24
- D - day of month without 0. exp: 3 or 24
- MMMM - full month name. exp: August
- MMM - short month name. exp: Aug
- MM - month number with 0. exp: 08
- M - month number without 0. exp: 8
- YYYY - Full Year. exp: 2029
- YY - las 2 digit of Year. exp: 29
- HH - Hour with 0 in 24 hour format. exp: 08 or 19
- H- Hour without 0 in 24 hour format. exp: 8 or 19
- hh - Hour with 0 in 12 hour format. exp: 08 AM or 07 PM
- h- Hour without 0 in 12 hour format. exp: 8 AM or 7 PM
- mm - minutes with 0. exp: 09 or 22
- m - minutes without 0. exp: 9 or 22
timeFormat: Format for displaying the time.
- Default: "hh:mm A"
dateWheelsFormat: Format for displaying the date wheels.
- Default: "MMMM|DD|YYYY"
showTime: Determines whether the time picker is visible.
- Default: true
showDate: Determines whether the date picker is visible.
- Default: true
borderColor: Color of the picker border.
- Default: "#2867f9"
addClass: Additional CSS class for customization.
- Default: ""
textAlign: Alignment of the text in the picker.
- Default: "left"