react-time-picker-input v2.2.4

React-Time-Picker-Input

Simple and light time picker for React app. No moment.js needed

Installation

npm install react-time-picker-input yarn add react-time-picker-input

Import Component

import TimePicker from 'react-time-picker-input'

Import Styles

import "react-time-picker-input/dist/components/TimeInput.css"

Demo

See Demo

Usage

Here's an example of basic usage:

import React, { useState } from 'react';
import TimePicker from 'react-time-picker-input';

function TimePickerTest() {
const [value, setValue] = useState('10:00');

    return (
        <div>
            <TimePicker
                onChange={(newValue)=>setValue(value)}
                value={value}
            />
        </div>
    );

}

Props

Custom styling

If Default styles not applied :

Download and import on desired location :

Default Styles File

Edit Style for Desktop:

Input wrapper

.react-time-input-picker {
  // css code here
}

Hour input :

.react-time-input-picker #react-time-input-picker__hourInput {
  // css code here
}

Minute input :

.react-time-input-picker input#react-time-input-picker__minuteInput {
  // css code here
}

AmPm input :

.react-time-input-picker input#react-time-input-picker__amPm {
  // css code here
}

Focus style:

.react-time-input-picker input:focus {
  // css code here
}
or 
.react-time-input-picker input(//inputSelector):focus
{
  // css code here
}

Edit Styles on Mobile :

Input wrapper

.input-time-mobile {
  // css here
}

Made By Eagle Zone