README.md

DatePicker

English | 简体中文

Customized DatePicker component

Screenshot

Install

npm i @infinilabs/datepicker

# or
cnpm i @infinilabs/datepicker

# or
yarn add @infinilabs/datepicker

# or
pnpm add @infinilabs/datepicker

Usage

import DatePicker from "@infinilabs/datepicker";

<DatePicker
  onRangeChange={({ start, end }) => {
    setRange({ start, end });
  }}
  onRefreshChange={setRefresh}
  onTimeSettingChange={(newTimeSetting) => {
    setTimeSetting({ ...timeSetting, ...newTimeSetting });
  }}
  autoFitLoading={autoFitLoading}
  onAutoFit={onAutoFit}
  timeZone={timeZone}
  onTimeZoneChange={setTimeZone}
  recentlyUsedRangesKey={"demo-recently-used-ranges"}
/>

Props

Property	Description	Type	Default	Version
className	Class name for the root element of the component	string	-	1.0.0
popoverClassName	Class name for the popover element	string	-	1.0.0
popoverPlacement	Popover position options: top, left, right, bottom, topLeft, topRight, bottomLeft, bottomRight, leftTop, leftBottom, rightTop, rightBottom	string	'bottom'	1.0.0
locale	Language setting	string	'en-US'	1.0.0
dateFormat	Date format	string	'YYYY-MM-DD HH:mm:ss'	1.0.0
Start	Start date	string	'now-15m'	1.0.0
End	End date	string	'now'	1.0.0
onRangeChange	Callback for when the date range changes	({start: string, end: string, isAbsolute?: boolean}) => void	-	1.0.0
isRefreshPaused	Whether auto-refresh is paused	boolean	true	1.0.0
refreshInterval	Auto-refresh interval (in milliseconds)	number	10000	1.0.0
onRefreshChange	Callback for when auto-refresh settings change	({isRefreshPaused: boolean, refreshInterval: number}) => void	-	1.0.0
onRefresh	Callback when auto-refresh triggers	({start: string, end: string, refreshInterval: number}) => void	-	1.0.0
showTimeSetting	Whether to display time configuration options	boolean	false	1.0.0
shouldTimeField	Whether a time field must be configured when displaying time settings	boolean	true	1.0.0
showTimeField	Whether to display the time field	boolean	false	1.0.0
timeField	Time field for the selected date range	string	-	1.0.0
timeFields	List of available time fields	string[]	[]	1.0.0
showTimeInterval	Whether to display time interval options	boolean	false	1.0.0
timeInterval	Selected time interval	string	-	1.0.0
onTimeSettingChange	Callback for when time settings change	({timeField: string, timeInterval: string}) => void	-	1.0.0
autoFitLoading	Loading state for auto time adjustment	boolean	false	1.0.0
onAutoFit	Callback for auto time adjustment	() => void	-	1.0.0
timeZone	Time zone setting	string	'Asia/Shanghai'	1.0.0
onTimeZoneChange	Callback for when the time zone changes	(timeZone: string) => void	-	1.0.0
commonlyUsedRanges	Quick select list for commonly used date ranges	{start: string, end: string, label: string}[]	[]	1.0.0
recentlyUsedRangesKey	Key for storing recently used date ranges	string	-	1.0.0