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"

Methods

• onDateChange: Callback function triggered on date change. Return new Date();

JQUERY version

To get Jquery version please Visit our website

Contributing

We welcome contributions to improve EDTimePicker! If you'd like to contribute, please fork the repository and submit a pull request.

License

EDTimePicker is licensed under the MIT License. See the LICENSE file for more details.