CODEWITHSUNDEEP
javascripthtmlcssjquery-uidatepicker
Alban Nurkollari
Alban Nurkollari

Reputation: 153

jQuery Datepicker UI animation not working

I've searched in depth regarding jQuery Datepicker Widget UI to understand it's actions and it's build and finally implemented in a project I'm currently working on.But I still have few issues which I'm going to explain in details.

Everything in my project is customized in details, refusing to observe and apply standard/default options and therefore their respective behaviours, such as custom made textarea fields out of a div element. Hence I went through and made another custom object, a custom jQuery Datepicker UI applied on a div (!not onto an input). My concern to complete the full interaction with this customized datepicker is as it follows:

  1. The datepicker should be able to drop carefully, without warping/destroying other elements positioning. That said, it needs to be on top of all other elements when it is shown once triggered. How it should look

  2. The datepicker should be able to accept it's attribute showAnim in order to give a good visual feeling when it pops up and vice-verse. E.g. 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 here: http://jsfiddle.net/q800owcj/5/

Upvotes: 0

Views: 1130

Answers (2)

Raad
Raad

Reputation: 4648

Not sure why the datepicker showAnim setting isn't working, but if you use:

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

that works.

Updated:

The jQuery datepicker is really designed to be used with an associated input field, and as such it has default behaviour whereby the datepicker is shown when the field receives focus, and hidden when the field loses focus.

Getting it to work with other objects, like DIVs, will invariably require using methods like show(), hide() and toggle(), and therefore built-in appearance-related options like showAnim will not have any effect because they only work in the default scenario.

If you have only one datepicker to display, you could use a zero-width input field, and use a click handler to fire .triggerHandler('focus') / .trigger('blur') events, but I honestly think it's a horrible hack that doesn't work that well in the end anyway.
So stick to your solution - it works. Although you no longer need the showAnim option, you could still keep it there and use it to drive your toggles:

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

Hope that helps.

Upvotes: 1

Alban Nurkollari
Alban Nurkollari

Reputation: 153

In combination of the partially given answer from Raad (credits to him) I found a perfect solution.

Changing a few lines in the external datepickercss.css from :

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

to:

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

and the tabs as follows with:

.tab { position: relative;}

And here is the complete fully functional DEMO in jsFiddle.

Upvotes: 0

Related Questions