DateTimePicker

DateTimePicker Component for React.JS/React.TS

Install package

npm i @wyesoftware/datetimepicker

yarn add @wyesoftware/datetimepicker

Usage

import DateTimePicker from "@wyesoftware/datetimepicker";

const App = () => {
  return <DateTimePicker />;
};

TypeScript

This component has full typescript support.

Available props

Property	Description	Type	Default	Required
dir	Direction of the component	"ltr" / "rtl"	"ltr"	false
dirFromElement	Set component direction from outside element	"html" / "body" / string (for id)	-	false
inputRef	Ref for input	Ref	-	false
name	Form name	string	-	false
value	The input content value	string / Dayjs / string[] / Dayjs[] / undefined	-	false
placeholder	Custom input placeholder	string / string[]	-	false
onChange	Callback when user input	(value: Dayjs / Dayjs[] / undefined) => void	-	false
onBlur	Callback when user click outside	(e?: FocusEvent) => void	-	false
mode	DateTimeInput mode	"date" / "datetime" / "time" / "range"	"datetime"	false
isCurrentMonth	Calendar set current month and year on load (not for "range" mode)	boolean	true	false
disabledDates	Specify the date that cannot be selected	(day: Dayjs) => boolean	-	false
language	Choose language (english, hebrew, russian - available) or set custom	"en" / "he" / "ru" / custom	"en"	false
disabled	Set input disabled mode	boolean	false	false
readOnly	Set input readOnly mode	boolean	false	false
allowClear	Show clear input button	boolean	false	false
onClear	Callback when user clear input	() => void	-	false
className	Set classes for main container	string	-	false

Custom language object example

dayjs: {
  locale: langLocale;
  startWeek: "monday";
}
buttons: {
  today: "string";
  time: "string";
}
labels: {
  time: "string";
}
placeholders: {
  year: "string";
  month: "string";
}

Future updates

More features....