jQuery UI Widgets Forums React min property issue in jqxdatetimeinput on first click

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 10 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • ganesh
    Participant

    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


    Hristo
    Participant

    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


    ganesh
    Participant

    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.


    Hristo
    Participant

    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

    • This reply was modified 10 months, 2 weeks ago by  Hristo.
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.