Sets or gets the type of the animation.

'fade'

'slide'

'none'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} animationType={'fade'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether Null is allowed as a value.

Determines whether Backspace and Delete keys are handled by the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} allowKeyboardDelete={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the 'Clear' string displayed when the 'showFooter' property is true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} clearString={'Clear'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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'.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} culture={'de-DE'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Specifies the animation duration of the popup calendar when it is going to be hidden.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} closeDelay={2000}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether or not the popup calendar must be closed after selection.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} closeCalendarAfterSelection={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the DropDown's alignment.

'left'

right'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} dropDownHorizontalAlignment={'right'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the DropDown's alignment.

'top'

'bottom'

Determines whether the widget is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When this property is set to true, the popup calendar may open above the input, if there's not enough space below the DateTimeInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} enableBrowserBoundsDetection={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This setting enables the user to select only one symbol at a time when typing into the text input field.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} enableAbsoluteSelection={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets which day to display in the first day column. By default the calendar displays 'Sunday' as first day.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} firstDayOfWeek={3}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the date time input format of the date.

'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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} formatString={'d'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the jqxDateTimeInput widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxDateTimeInput's minumun date.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
     
  constructor(props: {}) {
    super(props);
     
    this.state = {
        min:  new Date(2018, 0, 1),
        max:  new Date(2019, 0, 1)
    }
  }  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} min={this.state.min} max={this.state.max}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxDateTimeInput's maximum date.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
     
  constructor(props: {}) {
    super(props);
     
    this.state = {
        min:  new Date(2018, 0, 1),
        max:  new Date(2019, 0, 1)
    }
  }  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} min={this.state.min} max={this.state.max}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Specifies the animation duration of the popup calendar when it is going to be displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} openDelay={2000}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the widget's place holder displayed when the widget's value is null.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} placeHolder={'Null Value'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the popup's z-index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} popupZIndex={99999}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} readonly={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether the dropdown calendar's footer is displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} showFooter={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the dropdown calendar's selection mode.

'none'

'default'

'range'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} selectionMode={'range'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value whether the week`s numbers are displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} showWeekNumbers={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the time button is visible.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} showTimeButton={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the calendar button is visible.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} showCalendarButton={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the template as an alternative of the default styles.

'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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} template={'primary'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the position of the text.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} textAlign={'right'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the 'Today' string displayed in the dropdown Calendar when the 'showFooter' property is true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} todayString={'Today'} showFooter={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxDateTimeInput value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        value: new Date(2019, 0, 10)
    }
  }  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30} value={this.state.value}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the width of the jqxDateTimeInput widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered on blur when the value is changed .

Code examples

Bind to the change event of jqxDateTimeInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} onChange={this.onChange} 
        width={250} height={30}
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the popup calendar is closed.

Code examples

Bind to the close event of jqxDateTimeInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} onClose={this.onClose} 
        width={250} height={30}
      />
    );
  }
 
  private onClose(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the popup calendar is opened.

Code examples

Bind to the open event of jqxDateTimeInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} onOpen={this.onOpen} 
        width={250} height={30}
      />
    );
  }
 
  private onOpen(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the text is changed.

Code examples

Bind to the textchanged event of jqxDateTimeInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} onTextchanged={this.onTextchanged} 
        width={250} height={30}
      />
    );
  }
 
  private onTextchanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxDateTimeInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();  
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} onValueChanged={this.onValueChanged} 
        width={250} height={30}
      />
    );
  }
 
  private onValueChanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

After calling this method, the popup calendar will be hidden.

Destroys the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();
 
  public componentDidMount(): void {
    this.myDateTimeInput.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Focuses the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();
 
  public componentDidMount(): void {
    this.myDateTimeInput.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

Returns the input field's text.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();
 
  public componentDidMount(): void {
    this.myDateTimeInput.current!.getText();
  }
   
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the getDate method is called, the user gets the current date. The returned value is JavaScript Date object.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();
 
  public componentDidMount(): void {
    this.myDateTimeInput.current!.getDate();
  }
   
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the setMaxDate method is called, the user gets the maximum navigation date. The returned value is JavaScript Date object.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();
 
  public componentDidMount(): void {
    this.myDateTimeInput.current!.getMaxDate();
  }
   
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the getMinDate method is called, the user gets the minimum navigation date. The returned value is JavaScript Date object.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();
 
  public componentDidMount(): void {
    this.myDateTimeInput.current!.getMinDate();
  }
   
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

After calling this method, the popup calendar will be displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();
 
  public componentDidMount(): void {
    this.myDateTimeInput.current!.open();
  }
   
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the selection range when the selectionMode is set to 'range'. The required parameters are JavaScript Date objects.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();
 
  public componentDidMount(): void {
    this.myDateTimeInput.current!.setRange(new Date(2017, 9, 20),new Date(2017, 9, 22));
  }
   
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the setMinDate method is called, the user sets the minimum date to which it is possible to navigate.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();
 
  public componentDidMount(): void {
    this.myDateTimeInput.current!.setMinDate(new Date(2017, 9, 20));
  }
   
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the setMaxDate method is called, the user sets the maximum date to which it is possible to navigate.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();
 
  public componentDidMount(): void {
    this.myDateTimeInput.current!.setMaxDate(new Date(2017, 9, 20));
  }
   
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the setDate method is called, the user sets the date. The required parameter is a JavaScript Date object.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();
 
  public componentDidMount(): void {
    this.myDateTimeInput.current!.setDate(new Date(2017, 9, 20));
  }
   
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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();

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
 
class App extends React.PureComponent<{}, IDateTimeInputProps> {
  private myDateTimeInput = React.createRef<JqxDateTimeInput>();
 
  public componentDidMount(): void {
    this.myDateTimeInput.current!.val();
  }
   
  
  public render() {
    return (
      <JqxDateTimeInput ref={this.myDateTimeInput} 
        width={250} height={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);