rc-picker

Date Selection

This feature allows users to select a date. The DatePicker component can be used to render a date input field, and it provides an onChange event to handle the selected value.

import React from 'react';
import DatePicker from 'rc-picker';

function App() {
  return (
    <DatePicker onChange={(value) => console.log(value)} />
  );
}

export default App;

Time Selection

This feature enables users to select a time. The TimePicker component, which is part of the rc-picker library, allows for time input with an onChange event to capture the time selected by the user.

import React from 'react';
import TimePicker from 'rc-picker/lib/TimePicker';

function App() {
  return (
    <TimePicker onChange={(value) => console.log(value)} />
  );
}

export default App;

Date Range Selection

This feature is for selecting a range of dates. The RangePicker component allows users to pick a start and end date, which is useful for defining periods like reservations or event durations.

import React from 'react';
import RangePicker from 'rc-picker/lib/RangePicker';

function App() {
  return (
    <RangePicker onChange={(values) => console.log(values)} />
  );
}

export default App;