DooPage - React UI Kit
Edit page
Getting Started
Theme
Components
AutoComplete
Button
Checkbox
Checkbox
Chip Input
Date Range Input
DateTime Input
Input
Radio
Select
Select Locale
Switch

DateTime Input

Base on Input

Related component

  • https://www.npmjs.com/package/react-datetime

Basic usage

Install moment

npm install moment --save
or
yarn add moment
import { DateTimeInput } from '@doopage/react-ui-kit'


const Example = () => <DateTimeInput label={'DateTime Input'}/>;


export default Example;

Playground

Normal

‹August 2021›
SuMoTuWeThFrSa
25262728293031
1234567
891011121314
15161718192021
22232425262728
2930311234

Native

Properties

Prop nameTypeDefaultRequiredDescription
onChange((value?: string | undefined) => void) | undefined—false
inputPropsInputProps | undefined—false
loadingboolean | undefined—false
hideboolean | undefined—false
helperTextstring | undefined—false
errorstring | undefined—false
labelstring | undefined—false
placeholderstring | undefined—false
nativeboolean | undefined—false
classNamestring | undefined—false
inputboolean | undefined—false
renderInput((props: any, openCalendar: Function, closeCalendar: Function) => Element) | undefined—false
onCloseEventOrValueHandler<FocusEvent<any>> | undefined—false
onOpen((event: FocusEvent<any>) => void) | undefined—false
openboolean | undefined—false
valuestring | Date | Moment | undefined—false
localestring | undefined—false
initialValuestring | Date | Moment | undefined—false
initialViewDatestring | Date | Moment | undefined—false
initialViewMode"time" | "months" | "years" | "days" | undefined—false
updateOnViewstring | undefined—false
dateFormatstring | boolean | undefined—false
timeFormatstring | boolean | undefined—false
utcboolean | undefined—false
displayTimeZonestring | undefined—false
onNavigate((viewMode: string) => void) | undefined—false
onBeforeNavigate((nextView: string, currentView: string, viewDate: Moment) => string) | undefined—false
onNavigateBack((amount: number, type: string) => void) | undefined—false
onNavigateForward((amount: number, type: string) => void) | undefined—false
isValidDate((currentDate: any, selectedDate: any) => boolean) | undefined—false
renderView((viewMode: string, renderCalendar: Function) => Element) | undefined—false
renderDay((props: any, currentDate: any, selectedDate: any) => Element) | undefined—false
renderMonth((props: any, month: number, year: number, selectedDate: any) => Element) | undefined—false
renderYear((props: any, year: number, selectedDate: any) => Element) | undefined—false
strictParsingboolean | undefined—false
closeOnSelectboolean | undefined—false
timeConstraintsTimeConstraints | undefined—false
closeOnClickOutsideboolean | undefined—false