jQuery UI Datepicker 和 var

Posted 2023-02-22

【中文标题】jQuery UI Datepicker 和 var

【英文标题】：jQuery UI Datepicker and var

【发布时间】：2012-09-20 18:02:34

【问题描述】：

我似乎这辈子都无法让它发挥作用。基本上情况是这样的。我有一个函数可以执行并弹出一个 jQuery 对话框窗口，其中嵌入了一个 datepicker。用户选择一个日期，然后选择日期，然后将自动消息捕获到 var 中。问题是，当再次执行相同类型的代码时，sdate 会发生变化，但文本会保持不变，但会出现新的日期。我想要具有动态日期的动态文本。这很棘手，因为我知道 datepicker 是一个回调函数，这基本上超出了我对 javascript 编码的了解。

<div style="display:none" id="dd">
<div id="d1"></div>
</div>

例如。测试（'1'） 测试（'2'）

var sdate, text

//==========================================================================
    function test(x) 
        //==========================================================================
        if (x == '1') 

            $('#dd')
                .dialog(
                autoOpen: true,
                modal: true,
                overlay: 
                    opacity: 1.0,
                    background: 'black'
                ,
                title: "SELECT DATE 1...",
                height: 235,
                width: 235,
                draggable: false,
                resizable: false
            );
            $('#d1')
                .datepicker(
                onSelect: function () 

                    sdate = $(this)
                        .val();
                    $("#dd")
                        .dialog("close");

                    text = 'THE DATE YOU HAVE CHOSEN IS: ' + sdate + '.'
                    alert(text)

                 //end of onSelect: function() 
            ); //end of datepicker

         //end of (x == '1')


        else if (x == '2') 

            $('#dd')
                .dialog(
                autoOpen: true,
                modal: true,
                overlay: 
                    opacity: 1.0,
                    background: 'black'
                ,
                title: "SELECT DATE 2...",
                height: 235,
                width: 235,
                draggable: false,
                resizable: false
            );
            $('#d1')
                .datepicker(
                onSelect: function () 

                    sdate = $(this)
                        .val();
                    $("#dd")
                        .dialog("close");

                    text = 'THE 2ND DATE YOU HAVE CHOSEN IS: ' + sdate + '.'
                    alert(text)

                 //end of onSelect: function() 
            ); //end of datepicker

         //end of (x == '2')

     //end of function

发疯了，需要这个论坛专家的帮助。

非常感谢您的帮助和支持

【问题讨论】：

这个带有动​​态日期的动态文本是什么意思

它可能只是一个复制/粘贴遗物，但您的代码中似乎缺少很多分号。此外，您真的需要将模式对话框与日期选择器结合起来吗？ jqueryui datepicker 已经具有可配置的弹出窗口小部件行为。你能在你实际调用test(1)和test(2)的地方显示代码吗？

你现在能描述一下什么是不正确的here 吗？

【参考方案1】：

我对你运行它的顺序有一点问题，所以我改变了一些东西。我在jsFiddle 中运行了这个：

我使用了这个 html：

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" rel="stylesheet" />

<div style="display:none" id="dd">
    <div id="d1"></div>
</div>

<button data="1">1</button>
<button data="2">2</button>

按钮只是用来触发代码

我使用了以下脚本：

jQuery(document).ready(function()
    jQuery("button").click(function()
        test(jQuery(this).attr("data"));        
    );
);

var sdate, text

function test(x) 
    if (x == '1') 
        $('#d1').datepicker(
            onSelect: function() 
                sdate = $(this).val();
                $("#dd").dialog("close");
                text = 'THE DATE YOU HAVE CHOSEN IS: '+ sdate +'.';
                alert(text);
                //jQuery(this).datepicker("destroy");
             //end of onSelect: function() 
        );//end of datepicker

        $('#dd').dialog( 
            autoOpen: true, 
            modal: true, 
            overlay:  
                opacity: 1.0, 
                background: 'black' 
            , 
            title: "SELECT DATE 1...", 
            height: 400, 
            width: 400, 
            draggable: false, 
            resizable: false);

     else if (x == '2') 
        $('#d1').datepicker(
            onSelect: function() 
                sdate = $(this).val();
                $("#dd").dialog("close");
                text = 'THE 2ND DATE YOU HAVE CHOSEN IS: '+ sdate +'.';
                alert(text);
            //jQuery(this).datepicker("destroy");

             //end of onSelect: function() 
        );//end of datepicker

        $('#dd').dialog( 
            autoOpen: true, 
            modal: true, 
            overlay:  
                opacity: 1.0, 
                background: 'black' 
            , 
            title: "SELECT DATE 2...", 
            height: 400, 
            width: 400, 
            draggable: false, 
            resizable: false);

    //end of (x == '2')

//end of function

我让它工作的唯一问题是操作顺序。所以我在创建对话框之前创建了日期选择器。