javascript - jQuery Datepicker UI 动画不工作

我深入搜索了有关 jQuery Datepicker Widget UI 的信息，以了解它的操作、构建并最终在我目前正在处理的元素中实现。但我仍然有一些问题要解决我要详细解释。

我元素中的所有内容都是在细节上定制的，拒绝遵守和应用标准/默认选项以及它们各自的行为，例如从 div 元素中定制的文本区域字段。因此，我制作了另一个自定义对象，一个应用于 div(!不是 input)的自定义 jQuery Datepicker UI。我对完成与这个自定义日期选择器的完整交互的关注如下:

日期选择器应该能够小心地放下，而不会扭曲/破坏其他元素的定位。也就是说，一旦触发显示，它需要位于所有其他元素之上。

日期选择器应该能够接受它的属性showAnim，以便在弹出时和反之时提供良好的视觉感受。例如。 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/

最佳答案

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

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

有效。

更新:

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

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

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

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

希望对您有所帮助。

关于javascript - jQuery Datepicker UI 动画不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27801813/

javascript - jQuery Datepicker UI 动画不工作

更新:

上一篇：css - 网页在移动设备上没有响应

下一篇：html - 在多行中悬停时更改 div 的大小搞乱了设计(移到一边)