Build a React.js Clock Time Picker UI Form Input Field Using react-time-picker in Browser Using JSX

npm i react-time-picker

App.jsx`

import React, { useState } from 'react';
import TimePicker from 'react-time-picker';
import 'react-time-picker/dist/TimePicker.css';
import 'react-clock/dist/Clock.css';

const MyApp = () => {
  const [value, onChange] = useState('14:30'); // 2:30 PM

  return (
    <div style={{ padding: '20px' }}>
      <h3>Select Time (24-hour format)</h3>
      <TimePicker
        onChange={onChange}
        value={value}
        format="HH:mm"        // <-- This enforces 24-hour format
        disableClock={false}  // Optional: show or hide the clock
        clearIcon={null}      // Optional: hide clear button
      />
      <p>Selected Time: {value}</p>
    </div>
  );
};

export default MyApp;

import React, { useState } from 'react';

import TimePicker from 'react-time-picker';

import 'react-time-picker/dist/TimePicker.css';

import 'react-clock/dist/Clock.css';

const MyApp = () => {

const [value, onChange] = useState('14:30'); // 2:30 PM

return (

<h3>Select Time (24-hour format)</h3>

<TimePicker

onChange={onChange}

value={value}

format="HH:mm" // <-- This enforces 24-hour format

disableClock={false} // Optional: show or hide the clock

clearIcon={null} // Optional: hide clear button

<p>Selected Time: {value}</p>

</div>

);

};

export default MyApp;

Build a React.js Clock Time Picker UI Form Input Field Using react-time-picker in Browser Using JSX

Comments

Leave a Reply Cancel reply

Archives