由于存在文本输入,jQuery datepicker无法正常工作

时间:2012-07-16 11:52:45

标签: jquery jquery-ui datepicker

我使用以下代码使用2个内联日期选择器选择日期范围。有两个日期字段( div ,类 dateheader )。选择日期后,该日期选择器会向上滑动。基本上,当日期 div 点击时,首先检查相应的日期选择器是否已经可见(通过 fromclicked toclicked < / strong>变量),如果存在,则将其向上滑动,否则将其向下滑动,相应地更改相应的单击属性,在执行任何操作之前,向上滑动另一个日期选择器并设置其相应的单击属性为0.现在代码底部有一个文本输入。当它被排除时,代码正常,正如预期的那样。但是如果包含它,则代码会中断,即如果您单击一个日期 div ,然后从日期选择器中选择一个日期,它将正确向上滑动。然后,如果您点击其他日期 div ,则日期选择器会向下滑动,但选择日期不会将其向上滑动。我没办法。这个bug在哪里?完整的代码位于http://jsfiddle.net/Cupidvogel/2ppYb/(我无法包含UI-CSS文件,但即使是没有样式的版本就足够了!)。

 <!DOCTYPE html>
<html>

    <head>
        <style>
            .dateheaders {
                background: black;
                width: 120px;
                height: 28px;
                position: absolute;
                top: 0px;
                left: 33px;
                border-radius: 5px;
                cursor: pointer;
                display: inline-block;
                z-index: 55;
            }
            .toheader {
                left: 216px
            }
            .spandate {
                color: white;
            }

            div#diva1 {
                width: 190px;
                position: absolute;
                display: none;
                z-index: 10;
                outline: none;
            }
            div#diva2 {
                width: 190px;
                position: absolute;
                display: none;
                z-index: 10;
                outline: none;
            }
            #datecontainer {
                position: relative;
                width: 400px;
                height: 30px;
                background: red;
                top: 60px;
                left: 40px;
            }
        </style>
        <link type="text/css" href="ui-darkness/ui.css" rel="stylesheet"
        />
        <script src="jquery.js"></script>
        <script type="text/javascript" src="ui.minified.all.js"></script>
        <script>
            $(function () {

                fromclicked = 0;
                toclicked = 0;



                $("#diva1").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'dd/mm/yy',
                    maxDate: "+0D",
                    onSelect: function (selectedDate) {
                        fromclicked = 0;
                        $("#diva2").datepicker("option", "minDate", selectedDate);
                        $("div.fromheader").css({
                            borderRadius: '5px'
                        }).find('span').text(selectedDate)
                        });
                        $("#diva1").slideUp(300);
                    }
                });
                $("#diva2").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'dd/mm/yy',
                    maxDate: "+0D",
                    onSelect: function (selectedDate) {
                        toclicked = 0;
                        $("#diva1").datepicker("option", "maxDate", selectedDate);
                        $("div.toheader").css({
                            borderRadius: '5px'
                        }).find('span').text(selectedDate).end()
                        });
                        $("#diva2").slideUp(300);
                    }
                });
                $("body").css({
                    fontSize: '16px'
                });
                $("div.ui-datepicker-inline").css({
                    fontSize: '62.5%',
                    left: '-50px',
                    borderRadius: '0px 10px 10px 10px'
                });

                $(".dateheaders").click(function () {
                    $top = $(this).offset().top + $(this).height() - 1;
                    $left = $(this).offset().left;
                    if ($(this).hasClass('fromheader')) {
                        $("div#diva2").slideUp(300, function () {
                            toclicked = 0;
                        });
                        $(".toheader").css({
                            borderRadius: '5px'
                        })
                        });
                        if (!fromclicked) {
                            fromclicked = 1;
                            $("div#diva1").appendTo("body").css({
                                display: 'block',
                                top: $top,
                                left: $left
                            }).slideUp(0).slideDown(300, function () {
                                $(this).focus();
                            });

                            $("div.fromheader").css({
                                borderRadius: '5px 5px 0px 0px'
                            })
                            });
                        } else {
                            $("div#diva1").slideUp(300);
                            $("div.fromheader").css({
                                borderRadius: '5px'
                            })
                            });
                            fromclicked = 0;
                        }
                    } else {
                        $("div#diva1").slideUp(300, function () {
                            fromclicked = 0;
                        });
                        $(".fromheader").css({
                            borderRadius: '5px'
                        })
                        });
                        if (!toclicked) {
                            toclicked = 1;
                            $("div#diva2").appendTo("body").css({
                                display: 'block',
                                top: $top,
                                left: $left
                            }).slideUp(0).slideDown(300, function () {
                                $(this).focus();
                            });

                            $("div.toheader").css({
                                borderRadius: '5px 5px 0px 0px'
                            })
                            });
                        } else {
                            $("div#diva2").slideUp(300);
                            $("div.toheader").css({
                                borderRadius: '5px'
                            })
                            });
                            toclicked = 0;
                        }
                    }
                });


            });
        </script>
    </head>

    <body>
        <div id='datecontainer'>
            <div class='dateheaders fromheader'>
                <span class='spandate'>Select a date</span>
            </div>
            <div class='dateheaders toheader'>
                <span class='spandate'>Select a date</span>
            </div>
            <div id='diva1'></div>
            <div id='diva2'></div>
        </div>
        <input id='boombada' type="text" size="23" value="" />
    </body>

</html>

请包含核心jQuery UI文件(包括大约202 KB大小的所有内容)和UI-darkness主题文件夹以查看结果!

进一步更新,错误仅在输入文本或密码时仍然存在,如果您将输入类型更改为radio或checkbox,它可以正常工作。控制台显示错误语句 a未定义,并指向缩小的UI文件中的datepicker js部分的第一行。

0 个答案:

没有答案