| Name | Type | Default |
|---|
|
animationType
# |
DateTimeInputAnimationType
|
'slide'
|
DateTimeInputAnimationType: "fade" | "slide" | "none"
Sets or gets the type of the animation.
Possible Values:
'fade'
'slide'
'none'
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return (
<JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} animationType={'fade'} />
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
allowNullDate
# |
boolean
|
true
|
Determines whether Null is allowed as a value.
|
|
allowKeyboardDelete
# |
boolean
|
true
|
Determines whether Backspace and Delete keys are handled by the widget.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return (
<JqxDateTimeInput
ref={myDateTimeInput}
width={250}
height={30}
allowKeyboardDelete={false}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
clearString
# |
string
|
'Clear'
|
Sets or gets the 'Clear' string displayed when the 'showFooter' property is true.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} clearString={'Clear'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
culture
# |
string
|
default
|
Sets or gets the jqxDateTimeInput's culture. The culture settings are contained within a file with the language code appended to the name, e.g. jquery.glob.de-DE.js for German. To set the culture, you need to include the jquery.glob.de-DE.js and set the culture property to the culture's name, e.g. 'de-DE'.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} culture={'de-DE'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
closeDelay
# |
number
|
400
|
Specifies the animation duration of the popup calendar when it is going to be hidden.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} closeDelay={2000} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
closeCalendarAfterSelection
# |
boolean
|
true
|
Sets or gets whether or not the popup calendar must be closed after selection.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return (
<JqxDateTimeInput
ref={myDateTimeInput}
width={250}
height={30}
closeCalendarAfterSelection={false}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
dropDownHorizontalAlignment
# |
DateTimeInputDropDownHorizontalAlignment
|
'left'
|
DateTimeInputDropDownHorizontalAlignment: "left" | "right"
Sets the DropDown's alignment.
Possible Values:
'left'
right'
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return (
<JqxDateTimeInput
ref={myDateTimeInput}
width={250}
height={30}
dropDownHorizontalAlignment={'right'}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
dropDownVerticalAlignment
# |
DateTimeInputDropDownVerticalAlignment
|
'bottom'
|
DateTimeInputDropDownVerticalAlignment: "top" | "bottom"
Sets or gets the DropDown's alignment.
Possible Values:
'top'
'bottom'
|
|
disabled
# |
boolean
|
false
|
Determines whether the widget is disabled.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} disabled={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
enableBrowserBoundsDetection
# |
boolean
|
false
|
When this property is set to true, the popup calendar may open above the input, if there's not enough space below the DateTimeInput.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return (
<JqxDateTimeInput
ref={myDateTimeInput}
width={250}
height={30}
enableBrowserBoundsDetection={true}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
enableAbsoluteSelection
# |
boolean
|
false
|
This setting enables the user to select only one symbol at a time when typing into the text input field.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return (
<JqxDateTimeInput
ref={myDateTimeInput}
width={250}
height={30}
enableAbsoluteSelection={true}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
editMode
# |
string
|
default
|
Sets the edit mode of the component. Possible values: 'default', 'full'. In 'default' mode, value is always displayed and is validated on each key press. In 'full' mode, when the input is empty (value is null), its value can be freely edited. On blur or when Enter is pressed, the value is validated and if it is valid, editing becomes the same as in editMode: 'default'. If the value is once again set to null (by pressing Delete, Ctrl + A and Delete, or 'Clear'), full edit can again be entered. Full edit also takes into consideration the value of the 'yearCutoff' property. This means that if yearCutoff is 1926 and 01/01/20 is entered, 20 will be interpreted as 2020; if 01/01/54 is entered, 54 will be interpreted as 1954.
import { createRoot } from "react-dom/client";
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
firstDayOfWeek
# |
number
|
0
|
Sets or gets which day to display in the first day column. By default the calendar displays 'Sunday' as first day.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} firstDayOfWeek={3} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
formatString
# |
DateTimeInputFormatString
|
dd/MM/yyyy
|
DateTimeInputFormatString: "d" | "f" | "F" | "n" | "c" | "p" | "d" | "dd" | "ddd" | "dddd" | "D" | "h" | "hh" | "H" | "HH" | "m" | "mm" | "M" | "MM" | "MMM" | "MMMM" | "s" | "ss" | "t" | "tt" | "T" | "y" | "yy" | "yyy" | "yyyy" | "Y" | "dddd-MMMM-yyyy"
Sets or gets the date time input format of the date.
Possible Values:
'd'-the day of the month
'dd'-the day of the month
'ddd'-the abbreviated name of the day of the week
'dddd'-the full name of the day of the week
'h'-the hour, using a 12-hour clock from 1 to 12
'hh'-the hour, using a 12-hour clock from 01 to 12
'H'-the hour, using a 24-hour clock from 0 to 23
'HH'-the hour, using a 24-hour clock from 00 to 23
'm'-the minute, from 0 through 59
'mm'-the minutes,from 00 though59
'M'-the month, from 1 through 12;
'MM'-the month, from 01 through 12
'MMM'-the abbreviated name of the month
'MMMM'-the full name of the month
's'-the second, from 0 through 59
'ss'-the second, from 00 through 59
't'-the first character of the AM/PM designator
'tt'-the AM/PM designator
'y'-the year, from 0 to 99
'yy'-the year, from 00 to 99
'yyy'-the year, with a minimum of three digits
'yyyy'-the year as a four-digit number
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} formatString={'d'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
height
# |
string | number
|
null
|
Sets or gets the height of the jqxDateTimeInput widget.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
min
# |
Date
|
Date(1900, 1, 1)
|
Sets or gets the jqxDateTimeInput's minimum date.
import { createRoot } from 'react-dom/client';
import { useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, {
type IDateTimeInputProps
} from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
const min = useMemo<IDateTimeInputProps['min']>(() => new Date(2024, 11, 30), []);
const max = useMemo<IDateTimeInputProps['max']>(() => new Date(2025, 11, 30), []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} min={min} max={max} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
max
# |
Date
|
Date(2100, 1, 1)
|
Sets or gets the jqxDateTimeInput's maximum date.
import { createRoot } from 'react-dom/client';
import { useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, {
type IDateTimeInputProps
} from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
const min = useMemo<IDateTimeInputProps['min']>(() => new Date(2024, 11, 30), []);
const max = useMemo<IDateTimeInputProps['max']>(() => new Date(2025, 11, 30), []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} min={min} max={max} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
openDelay
# |
number
|
350
|
Specifies the animation duration of the popup calendar when it is going to be displayed.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} openDelay={2000} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
placeHolder
# |
string
|
""
|
Determines the widget's place holder displayed when the widget's value is null.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return (
<JqxDateTimeInput
ref={myDateTimeInput}
width={250}
height={30}
placeHolder={'Null Value'}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
Sets or gets the popup's z-index.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} popupZIndex={99999} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
rtl
# |
boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} rtl={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
readonly
# |
boolean
|
false
|
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} readonly={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
Sets or gets a value indicating whether the dropdown calendar's footer is displayed.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} showFooter={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
selectionMode
# |
DateTimeInputSelectionMode
|
'default'
|
DateTimeInputSelectionMode: "none" | "default" | "range"
Sets or gets the dropdown calendar's selection mode.
Possible Values:
'none'
'default'
'range'
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return (
<JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} selectionMode={'range'} />
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
showWeekNumbers
# |
boolean
|
true
|
Sets or gets a value whether the week`s numbers are displayed.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return (
<JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} showWeekNumbers={false} />
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
showTimeButton
# |
boolean
|
false
|
Determines whether the time button is visible.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} showTimeButton={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
showCalendarButton
# |
boolean
|
true
|
Determines whether the calendar button is visible.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return (
<JqxDateTimeInput
ref={myDateTimeInput}
width={250}
height={30}
showCalendarButton={false}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
showDeleteButton
# |
boolean
|
false
|
Determines whether the delete button is visible.
import { createRoot } from "react-dom/client";
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} showDeleteButton={true} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
theme
# |
string
|
''
|
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} theme={'material'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
template
# |
DateTimeInputTemplate
|
'default'
|
DateTimeInputTemplate: "default" | "primary" | "success" | "warning" | "danger" | "info"
Determines the template as an alternative of the default styles.
Possible Values:
'default' - the default template. The style depends only on the "theme" property value.
'primary' - dark blue style for extra visual weight.
'success' - green style for successful or positive action.
'warning' - orange style which indicates caution.
'danger' - red style which indicates a dangerous or negative action.
'info' - blue button, not tied to a semantic action or use.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} template={'primary'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
textAlign
# |
DateTimeInputTextAlign
|
left
|
DateTimeInputTextAlign: "left" | "right" | "center"
Sets or gets the position of the text.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} textAlign={'right'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
todayString
# |
string
|
'Today'
|
Sets or gets the 'Today' string displayed in the dropdown Calendar when the 'showFooter' property is true.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return (
<JqxDateTimeInput
ref={myDateTimeInput}
width={250}
height={30}
todayString={'Today'}
showFooter={true}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
value
# |
Date
|
Today's Date
|
Sets or gets the jqxDateTimeInput value.
import { createRoot } from 'react-dom/client';
import { useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, {
type IDateTimeInputProps
} from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
const value = useMemo<IDateTimeInputProps['value']>(() => new Date(2026, 0, 8), []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} value={value} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
width
# |
string | number
|
null
|
Sets or gets the width of the jqxDateTimeInput widget.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
yearCutoff
# |
number
|
2000
|
Works with editMode='full'. if yearCutoff is 1926 and 01/01/20 is entered, 20 will be interpreted as 2020; if 01/01/54 is entered, 54 will be interpreted as 1954.
import { createRoot } from "react-dom/client";
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
|
|
change
# |
Event
|
|
This event is triggered on blur when the value is changed .
Code examples #
Bind to the change event of jqxDateTimeInput.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
const onChange = (_e: Event): void => {
alert('do something...');
};
return <JqxDateTimeInput ref={myDateTimeInput} onChange={onChange} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
close
# |
Event
|
|
This event is triggered when the popup calendar is closed.
Code examples #
Bind to the close event of jqxDateTimeInput.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
const onClose = (_e: Event): void => {
alert('do something...');
};
return <JqxDateTimeInput ref={myDateTimeInput} onClose={onClose} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
open
# |
Event
|
|
This event is triggered when the popup calendar is opened.
Code examples #
Bind to the open event of jqxDateTimeInput.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
const onOpen = (_e: Event): void => {
alert('do something...');
};
return <JqxDateTimeInput ref={myDateTimeInput} onOpen={onOpen} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
textchanged
# |
Event
|
|
This event is triggered when the text is changed.
Code examples #
Bind to the textchanged event of jqxDateTimeInput.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
const onTextchanged = (_e: Event): void => {
alert('do something...');
};
return (
<JqxDateTimeInput
ref={myDateTimeInput}
onTextchanged={onTextchanged}
width={250}
height={30}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
valueChanged
# |
Event
|
|
This event is triggered when the value is changed.
Code examples #
Bind to the valueChanged event of jqxDateTimeInput.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
const onValueChanged = (_e: Event): void => {
alert('do something...');
};
return (
<JqxDateTimeInput
ref={myDateTimeInput}
onValueChanged={onValueChanged}
width={250}
height={30}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
|
| Name | Arguments | Return Type |
|---|
|
close
# |
None
|
|
After calling this method, the popup calendar will be hidden.
|
|
destroy
# |
None
|
|
Destroys the widget.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
useEffect(() => {
myDateTimeInput.current!.destroy();
}, []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
focus
# |
None
|
|
Focuses the widget.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
useEffect(() => {
myDateTimeInput.current!.focus();
}, []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
getRange
# |
None
|
|
Gets the selection range when the selectionMode is set to 'range'. The returned value is an object with "from" and "to" fields. Each of the fields is a JavaScript Date object.
|
|
getText
# |
None
|
|
Returns the input field's text.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
useEffect(() => {
myDateTimeInput.current!.getText();
}, []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
getDate
# |
None
|
|
When the getDate method is called, the user gets the current date. The returned value is JavaScript Date object.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
useEffect(() => {
myDateTimeInput.current!.getDate();
}, []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
getMaxDate
# |
None
|
|
When the setMaxDate method is called, the user gets the maximum navigation date. The returned value is JavaScript Date object.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
useEffect(() => {
myDateTimeInput.current!.getMaxDate();
}, []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
getMinDate
# |
None
|
|
When the getMinDate method is called, the user gets the minimum navigation date. The returned value is JavaScript Date object.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
useEffect(() => {
myDateTimeInput.current!.getMinDate();
}, []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
open
# |
None
|
|
After calling this method, the popup calendar will be displayed.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
useEffect(() => {
myDateTimeInput.current!.open();
}, []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
setRange
# |
date, date2
|
|
Sets the selection range when the selectionMode is set to 'range'. The required parameters are JavaScript Date objects.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
useEffect(() => {
myDateTimeInput.current!.setRange(new Date(2026, 9, 16), new Date(2026, 9, 18));
}, []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
setMinDate
# |
date
|
|
When the setMinDate method is called, the user sets the minimum date to which it is possible to navigate.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
useEffect(() => {
myDateTimeInput.current!.setMinDate(new Date(2026, 9, 16));
}, []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
setMaxDate
# |
date
|
|
When the setMaxDate method is called, the user sets the maximum date to which it is possible to navigate.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
useEffect(() => {
myDateTimeInput.current!.setMaxDate(new Date(2026, 9, 16));
}, []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
setDate
# |
date
|
|
When the setDate method is called, the user sets the date. The required parameter is a JavaScript Date object.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
useEffect(() => {
myDateTimeInput.current!.setDate(new Date(2026, 9, 16));
}, []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
val
# |
value, value2
|
|
Gets or sets the jqxDateTimeInput's value.
Set value:
this.$refs.myDateTimeInput.val(new Date(2011, 10, 24));
Get value:
let date = this.$refs.myDateTimeInput.val();
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
function App() {
const myDateTimeInput = useRef<JqxDateTimeInput>(null);
useEffect(() => {
myDateTimeInput.current!.val();
}, []);
return <JqxDateTimeInput ref={myDateTimeInput} width={250} height={30} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
