React UI Components Documentation

Sets or gets the animationType property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} animationType={'fade'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the allowNullDate property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} allowNullDate={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the allowKeyboardDelete property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} allowKeyboardDelete={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the clearString property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} clearString={'Clear'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the culture property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} culture={'de-DE'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the closeDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} closeDelay={2000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the closeCalendarAfterSelection property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} closeCalendarAfterSelection={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropDownHorizontalAlignment property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} dropDownHorizontalAlignment={'right'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropDownVerticalAlignment property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} dropDownVerticalAlignment={'top'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableBrowserBoundsDetection property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} enableBrowserBoundsDetection={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableAbsoluteSelection property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} enableAbsoluteSelection={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the firstDayOfWeek property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} firstDayOfWeek={3}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the formatString property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} formatString={'d'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the min property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} min={min}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the max property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} max={max}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the openDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} openDelay={2000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the placeHolder property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} placeHolder={'Null Value'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the popupZIndex property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} popupZIndex={99999}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the readonly property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} readonly={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showFooter property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} showFooter={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the selectionMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} selectionMode={'range'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showWeekNumbers property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} showWeekNumbers={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showTimeButton property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} showTimeButton={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showCalendarButton property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} showCalendarButton={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the template property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} template={'primary'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the textAlign property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} textAlign={'right'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the todayString property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} todayString={'Today'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the value property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30} value={value}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

Code examples

Bind to the change event of jqxDateTimeInput.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDateTimeInput.on('change', (event) => {
            // Do Something...
        });
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the popup calendar is closed.

Code examples

Bind to the close event of jqxDateTimeInput.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDateTimeInput.on('close', (event) => {
            // Do Something...
        });
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the popup calendar is opened.

Code examples

Bind to the open event of jqxDateTimeInput.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDateTimeInput.on('open', (event) => {
            // Do Something...
        });
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the text is changed.

Code examples

Bind to the textchanged event of jqxDateTimeInput.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDateTimeInput.on('textchanged', (event) => {
            // Do Something...
        });
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxDateTimeInput.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDateTimeInput.on('valueChanged', (event) => {
            // Do Something...
        });
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDateTimeInput.close();
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDateTimeInput.destroy();
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDateTimeInput.focus();
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDateTimeInput.getRange();
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDateTimeInput.getText();
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDateTimeInput.getDate();
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDateTimeInput.getMaxDate();
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDateTimeInput.getMinDate();
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDateTimeInput.open();
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDateTimeInput.setRange(new Date(2017, 9, 20),new Date(2017, 9, 22));
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDateTimeInput.setMinDate(new Date(2017, 9, 20));
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDateTimeInput.setMaxDate(new Date(2017, 9, 20));
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDateTimeInput.setDate(new Date(2017, 9, 20));
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDateTimeInput from 'jqwidgets-react/react_jqxdatetimeinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDateTimeInput.val();
    }

    render() {              
        return (
            <JqxDateTimeInput ref='myDateTimeInput'
                 width={250} height={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));