jQuery 日期选择器 UI 动画不工作

Question

我深入搜索了 jQuery Datepicker Widget UI 以了解它的操作和它的构建并最终在我的项目中实现目前正在工作 on.But 我还有一些问题需要详细解释。

我项目中的所有内容都经过详细定制，拒绝观察和应用 standard/default 选项以及它们各自的行为，例如 div 元素中的自定义文本区域字段。因此，我制作了另一个自定义对象，一个自定义 jQuery Datepicker UI 应用于 div （！不在输入上）。我对完成与这个自定义日期选择器的完整交互的关注如下：

日期选择器应该可以小心的放下，不用warping/destroying其他元素定位。也就是说，一旦触发显示，它需要位于所有其他元素之上。

日期选择器应该可以接受它的属性showAnim，以便在弹出和vice-verse时给人一种良好的视觉感觉。例如。 showAnim: 'drop';

.

<head>
    <style>

        .calendar {
            background-image: url('http://s15.postimg.org/6rhzg16if/icon_datepicker_128x128.png');
            background-size: contain;
            height: 40px;
            width: 40px;
            float: left;
            margin-top: -6px;
            margin-right: 6px;
            opacity: 0.5;
        }
        .calendar:hover {
            opacity:1;
        }
        .datepicker {
            float: right;
            margin-right: 50px;
            position: relative;
        }
        .ui-corner-all {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .ui-datepicker {
            width: 216px;
            margin: 5px auto 0;
            font: 9pt Arial, sans-serif;
            -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
            -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
        }
        .ui-datepicker a {
            text-decoration: none;
        }
        .ui-datepicker table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }
        .ui-datepicker-header {
            background-color: #333333;
            color: #33CCFF;
            font-size: 18px;
            font-family: calibri;
            font-style: italic;
            -webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2);
            -moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
            box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
            text-shadow: #2E8DEF 0px 0px 5px;
            filter: dropshadow(color=#000, offx=1, offy=-1);
            line-height: 30px;
            border-radius: 5px 5px 0 0;
        }
        .ui-datepicker-title {
            text-align: center;
        }
        .ui-datepicker-prev, .ui-datepicker-next {
            /*background-color: #efefef;*/
            display: inline-block;
            margin-top: 8px;
            width: 30px;
            height: 30px;
            text-align: center;
            cursor: pointer;
            line-height: 600%;
            overflow: hidden;
            opacity: 0.5;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .ui-datepicker-prev:hover, .ui-datepicker-next:hover {
            opacity: 1;
            -webkit-filter: drop-shadow(0 0 1px #2E8DEF);
            -moz-filter: drop-shadow(0 0 1px #2E8DEF);
            -o: drop-shadow(0 0 1px #2E8DEF);
            filter: drop-shadow(0 0 1px #2E8DEF);
        }
        .ui-datepicker-prev {
            float: left;
            background-position: center -30px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 7.5px 13.0px 7.5px 0;
            border-color: transparent #33ccff transparent transparent;
            line-height: 0px;
            _border-color: #000000 #33ccff #000000 #000000;
            _filter: progid: DXImageTransform.Microsoft.Chroma(color='#000000');
            margin-left: 5px;
        }
        .ui-datepicker-next {
            float: right;
            background-position: center 0px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 7.5px 0 7.5px 13.0px;
            border-color: transparent transparent transparent #33ccff;
            line-height: 0px;
            _border-color: #000000 #000000 #000000 #33ccff;
            _filter: progid: DXImageTransform.Microsoft.Chroma(color='#000000');
            margin-right: 5px;
        }
        .ui-datepicker thead {
            background-color: #f7f7f7;
            background-image: -moz-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
            background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%, #f7f7f7), color-stop(100%, #f1f1f1));
            background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
            background-image: -o-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
            background-image: -ms-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
            background-image: linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#f1f1f1', GradientType=0);
            /*border-bottom: 1px solid #bbb;*/
        }
        .ui-datepicker th {
            text-transform: uppercase;
            font-size: 6pt;
            padding: 5px 0;
            color: #666666;
            text-shadow: 1px 0px 0px #fff;
            filter: dropshadow(color=#fff, offx=1, offy=0);
        }
        .ui-datepicker tbody td {
            padding: 0;
            border-right: 1px solid #bbb;
        }
        .ui-datepicker tbody td:last-child {
            border-right: 0px;
        }
        .ui-datepicker tbody tr {
            border-bottom: 1px solid #bbb;
        }
        .ui-datepicker tbody tr:last-child {
            border-bottom: 0px;
        }
        .ui-datepicker td span, .ui-datepicker td a {
            display: inline-block;
            font-weight: bold;
            text-align: center;
            width: 30px;
            height: 30px;
            line-height: 30px;
            color: #666666;
            text-shadow: 1px 1px 0px #fff;
            filter: dropshadow(color=#fff, offx=1, offy=1);
        }
        .ui-datepicker-calendar .ui-state-default {
            background: #ededed;
            background: -moz-linear-gradient(top, #ededed 0%, #dedede 100%);
            background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%, #ededed), color-stop(100%, #dedede));
            background: -webkit-linear-gradient(top, #ededed 0%, #dedede 100%);
            background: -o-linear-gradient(top, #ededed 0%, #dedede 100%);
            background: -ms-linear-gradient(top, #ededed 0%, #dedede 100%);
            background: linear-gradient(top, #ededed 0%, #dedede 100%);
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dedede', GradientType=0);
            -webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
            -moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
            box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
        }
        .ui-datepicker-unselectable .ui-state-default {
            background: #f4f4f4;
            color: #b4b3b3;
        }
        .ui-datepicker-calendar .ui-state-hover {
            background: #f7f7f7;
        }
        .ui-datepicker-calendar .ui-state-active {
            background: #6eafbf;
            -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
            -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
            box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
            color: #e0e0e0;
            text-shadow: 0px 1px 0px #4d7a85;
            filter: dropshadow(color=#4d7a85, offx=0, offy=1);
            border: 1px solid #55838f;
            position: relative;
            margin: -1px;
        }
        .ui-datepicker-calendar td:first-child .ui-state-active {
            width: 29px;
            margin-left: 0;
        }
        .ui-datepicker-calendar td:last-child .ui-state-active {
            width: 29px;
            margin-right: 0;
        }
        .ui-datepicker-calendar tr:last-child .ui-state-active {
            height: 29px;
            margin-bottom: 0;
        }

    </style>

</head>


<body>

    <div id='LPdate1' class='calendar'></div>
    <div id='datepicker1' class='datepicker'></div>
    <div id='LPdate2' class='calendar'></div>
    <div id='datepicker2' class='datepicker'></div>

    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script type='text/javascript'>

        $('#datepicker1, #datepicker2').hide();
        $('#datepicker1, #datepicker2').datepicker({
            showAnim: 'drop',
            showOtherMonths: true,
            dateFormat: 'dd MM yy',
            dayNamesMin: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            minDate: 0,
            maxDate: '+1y',
            onSelect: function (dateText) {
                selectedDate = dateText;
                console.log(selectedDate);
            }
        });
        $('#LPdate1').click(function () {
            $('#datepicker1').toggle();
        });
        $('#LPdate2').click(function () {
            $('#datepicker2').toggle();
        });

    <script>
</body>

JS Fiddle 这里： http://jsfiddle.net/q800owcj/5/

Answer 1

不确定为什么日期选择器 showAnim 设置不起作用，但如果您使用：

...
$('#datepicker1').toggle("drop");
...

有效。

已更新：

jQuery 日期选择器实际上是为与关联的输入字段一起使用而设计的，因此它具有默认行为，即当字段获得焦点时显示日期选择器，并在字段失去焦点时隐藏。

让它与其他对象一起工作，比如 DIV，总是需要使用像 show()、hide() 和 toggle() 这样的方法，因此需要内置的外观相关选项，比如showAnim 不会有任何效果，因为它们只在默认情况下有效。

如果您只有一个日期选择器要显示，您可以使用零宽度输入字段，并使用点击处理程序来触发 .triggerHandler('focus') / .trigger('blur') 事件，但老实说，我认为这是一个可怕的 hack，不会反正到头来还是那么好。
所以坚持你的解决方案 - 它有效。虽然您不再需要 showAnim 选项，但您仍然可以将其保留在那里并使用它来驱动您的 toggles:

var showAnim = $( "#datepicker1" ).datepicker("option", "showAnim");
...
$('#datepicker1').toggle(showAnim);

希望对您有所帮助。

Answer 2

结合 Raad 部分给出的答案（感谢他），我找到了一个完美的解决方案。

从 :

更改外部 datepickercss.css 中的几行

.datepicker {
    float: right;
    margin-right: 50px;
    position: relative;
}

至：

.datepicker {
    left:0;
    margin-left: 50px;
    position: absolute;
    z-index:999;
}
#datepicker1 {
    top: 66px;
}
#datepicker2 {
    top: 135px;
}

和如下标签：

.tab { position: relative;}

这里是 jsFiddle 中完整的全功能 DEMO。

jQuery 日期选择器 UI 动画不工作

jQuery Datepicker UI animation not working

html

javascript

css

jquery-ui

datepicker

已更新：