jQuery UI Widgets Forums Editors Calendar Future date selection

This topic contains 6 replies, has 2 voices, and was last updated by  Nadezhda 9 years, 10 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Future date selection #64967

    Vinay Reddy
    Participant

    Hi i am having an issue in Calendar.

    Here in the calendar all the future dates are disabled but able to do selection of future dates. I want to stop selection of future dates how can i perform this.

    Regards,
    Yennamvinay

    Future date selection #64971

    Nadezhda
    Participant

    Hello Yennamvinay,

    Here is an example which shows how to limit selection on future dates.

    <!DOCTYPE html>
    <html lang="en">
    <head>   
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    </head>
    <body class='default'>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    // create jqxcalendar.
                    $("#jqxWidget").jqxCalendar({ width: 220, height: 220 });
                    $("#jqxWidget").jqxCalendar('focus');
                    var today = $('#jqxWidget').jqxCalendar('getDate');
                    $('#jqxWidget').jqxCalendar('setMaxDate', today);
                });
            </script>
            <div id='jqxWidget'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Future date selection #64974

    Nadezhda
    Participant

    Hi Yennamvinay,

    It is better to use the following example.

    <!DOCTYPE html>
    <html lang="en">
    <head>   
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    </head>
    <body class='default'>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    // create jqxcalendar.
                    $("#jqxWidget").jqxCalendar({ width: 220, height: 220, max: new Date()});
                    $('#jqxWidget').val(new Date(2014, 11, 30));                
                });
            </script>
            <div id='jqxWidget'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Future date selection #65141

    Vinay Reddy
    Participant

    Thanks for the reply.

    But i am not able to select present day if i change once from present date to future date.

    Future date selection #65143

    Nadezhda
    Participant

    Hi Yennamvinay,

    Please, provide us with more information about present day and future date, how do you want to select/unselect them?

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

    Future date selection #65157

    Vinay Reddy
    Participant

    I am using the below code:
    $(“#jqxWidget”).jqxDateTimeInput({
    width : ‘95%’,
    value : new Date(),
    formatString : “MM/dd/yyyy”
    });

    $(“#jqxWidget”).jqxDateTimeInput(‘setMinDate’,new Date());

    By default the date is shown as Today’s time in the text field. Now if i click calendar and select future date then at the same instance i am not able to select present date it becomes disabled.

    The fix i need is even though i select future date i should able to select present date also.

    Future date selection #65211

    Nadezhda
    Participant

    Hi Yennamvinay,

    Please, find the following example which shows how to select present date in jqxDateTimeInput.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    </head>
    <body class='default'>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var date = new Date();
                    date.setHours(0);
                    date.setMinutes(0);
                    date.setSeconds(0);
                    $("#jqxDateTimeInput").jqxDateTimeInput({
                        width: '95%',
                        value: date,
                        formatString: "MM/dd/yyyy",
                    });
                    $('#jqxDateTimeInput').jqxDateTimeInput('setMinDate', date);
                });
            </script>
            <div id='jqxDateTimeInput'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.