min property issue in jqxdatetimeinput on first click

[ganeshParticipant]

Hi there,
I am facing problem when I used min in my react code. when I used this property when user click first time its automatically close and from second time its working fine please help me regarding this issue.

Thank you,
Ganesh

[HristoParticipant]

Hello Ganesh,

I tested this example and it seems to work fine:
<JqxDateTimeInput min={new Date(2019, 10, 6)}></JqxDateTimeInput>
Could you clarify it?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[ganeshParticipant]

Hi Hristo,

Thanks for the reply, I am using following property in my code
ref={props.refAsProp}
className={dateTimeClass}
placeHolder={“mm/dd/yy”}
width={200}
height={30}
value={LatestDate}
min={new Date(2019, 10, 6)}
allowNullDate={true}
onValueChanged={(event: any) => {

setFieldValue(“LatestDate”, date);
}
}}
before calendar I have drop down list and after selected option from drop down at that time this(Calendar) field appeared .and when we try to select date first time drop down focus will close and same time calendar window also closed.

[HristoParticipant]

Hello Ganesh,

Could you provide us with one simplified example that demonstrates your case?
I tested this example and it seems to work fine:

import * as React from 'react';
import "./App.css";

import JqxDropDownList, { IDropDownListProps } from "jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist";
import JqxDateTimeInput from "jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput";

class App extends React.PureComponent<{}, IDropDownListProps> {
    private myDropDropDownList = React.createRef<JqxDropDownList>();
    private myDateTimeInput = React.createRef<JqxDateTimeInput>();

    constructor(props: {}) {
        super(props);
        this.state = {
            source: [
                {
                    label: "Affogato",
                    value: 0
                }, {
                    label: "Americano",
                    value: 1
                }, {
                    label: "Bicerin",
                    value: 2
                }, {
                    label: "Breve",
                    value: 3
                }, {
                    label: "Café Bombón",
                    value: 4
                }, {
                    label: "Café au lait",
                    value: 5
                }, {
                    label: "Caffé Corretto",
                    value: 6
                }, {
                    text: "Café Crema",
                    value: 7
                }
            ]
        }
    }
    public render() {
        let dateTimeClass = "dateTimeClass";
        let LatestDate = new Date(2019, 10, 8);
        let setFieldValue = (dateCondition: string, dateObject: Date): void => {
            console.log(dateCondition, dateObject);
        };
        let date = new Date(2019, 11, 11);

        return (
            <div style={{ fontSize: "13px", fontFamily: "Verdana", float: "left" }}>
                <JqxDropDownList ref={this.myDropDropDownList} source={this.state.source} ></JqxDropDownList>
                <br />
                <JqxDateTimeInput
                    ref={this.myDateTimeInput}
                    // className={dateTimeClass}
                    // placeHolder={"mm/dd/yy"}
                    width={200}
                    height={30}
                    value={LatestDate}
                    min={new Date(2019, 10, 6)}
                    allowNullDate={true}
                    onValueChanged={(event: any) => {
                        setFieldValue("LatestDate", date);
                    }}
                >
                </JqxDateTimeInput>
            </div>
        );
    }
}

export default App;

I would like to mention that when clicking on one widget the dialog of the previous one will be closed.
That is the default behavior for almost all widgets.
Please, provide us with more details on what you want to achieve.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts