jQuery UI Datepicker 和 var答案

【问题标题】：jQuery UI Datepicker and varjQuery UI Datepicker 和 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 吗？

标签： javascript jquery jquery-ui javascript-framework

【解决方案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

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

【讨论】：