Jquery Datepicker Getting Displayed At The Bottom Of The Page (keith-wood Datepicker)

I had an issue with jquery datepicker(Keith-Wood)(http://keith-wood.name/datepick.html). It worked fine on jquery 1.6.4 but after I migrated to jQuery 1.10.2 the widget appeared at

Solution 1:

When you updated jquery did you also update jquery.plugin.js, jquery.datepick.js, and jquery.datepick.css from http://keith-wood.name/datepick.html? I think older versions of the datepick plugin are likely not compatible with newer versions of jQuery, but if you update the datepick plugin it should work. Check it out, it works with version 5.0 of datepick plugin and version 1.10.2 of jQuery.

http://jsfiddle.net/t3kLr8d4/3/

HTML

<linkhref="http://keith-wood.name/css/jquery.datepick.css"id="theme"><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><scriptsrc="http://keith-wood.name/js/jquery.plugin.js"></script><scriptsrc="http://keith-wood.name/js/jquery.datepick.js"></script><inputtype="text"id="date" />

CSS

/* Default styling for jQuery Datepicker v5.0.0. */.datepick {
    background-color: #fff;
    color: #000;
    border: 1px solid #444;
    border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    font-family: Arial,Helvetica,Sans-serif;
    font-size: 90%;
}
.datepick-rtl {
    direction: rtl;
}
.datepick-popup {
    z-index: 1000;
}
.datepick-disable {
    position: absolute;
    z-index: 100;
    background-color: white;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.datepicka {
    color: #fff;
    text-decoration: none;
}
.datepicka.datepick-disabled {
    color: #888;
    cursor: auto;
}
.datepickbutton {
    margin: 0.25em;
    padding: 0.125em0em;
    background-color: #fcc;
    border: none;
    border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    font-weight: bold;
}
.datepick-nav, .datepick-ctrl {
    float: left;
    width: 100%;
    background-color: #000;
    color: #fff;
    font-size: 90%;
    font-weight: bold;
}
.datepick-ctrl {
    background-color: #600;
}
.datepick-cmd {
    width: 30%;
}
.datepick-cmd:hover {
    background-color: #777;
}
.datepick-ctrl.datepick-cmd:hover {
    background-color: #f08080;
}
.datepick-cmd-prevJump, .datepick-cmd-nextJump {
    width: 8%;
}
a.datepick-cmd {
    height: 1.5em;
}
button.datepick-cmd {
    text-align: center;
}
.datepick-cmd-prev, .datepick-cmd-prevJump, .datepick-cmd-clear {
    float: left;
    padding-left: 2%;
}
.datepick-cmd-current, .datepick-cmd-today {
    float: left;
    width: 35%;
    text-align: center;
}
.datepick-cmd-next, .datepick-cmd-nextJump, .datepick-cmd-close {
    float: right;
    padding-right: 2%;
    text-align: right;
}
.datepick-rtl.datepick-cmd-prev, .datepick-rtl.datepick-cmd-prevJump,
.datepick-rtl.datepick-cmd-clear {
    float: right;
    padding-left: 0%;
    padding-right: 2%;
    text-align: right;
}
.datepick-rtl.datepick-cmd-current, .datepick-rtl.datepick-cmd-today {
    float: right;
}
.datepick-rtl.datepick-cmd-next, .datepick-rtl.datepick-cmd-nextJump,
.datepick-rtl.datepick-cmd-close {
    float: left;
    padding-left: 2%;
    padding-right: 0%;
    text-align: left;
}
.datepick-month-nav {
    float: left;
    background-color: #777;
    text-align: center;
}
.datepick-month-navdiv {
    float: left;
    width: 12.5%;
    margin: 1%;
    padding: 1%;
}
.datepick-month-navspan {
    color: #888;
}
.datepick-month-row {
    clear: left;
}
.datepick-month {
    float: left;
    width: 15em;
    border: 1px solid #444;
    text-align: center;
}
.datepick-month-header, .datepick-month-header select, .datepick-month-headerinput {
    height: 1.5em;
    background-color: #444;
    color: #fff;
    font-weight: bold;
}
.datepick-month-header select, .datepick-month-headerinput {
    height: 1.4em;
    margin: 0em;
    padding: 0em;
    border: none;
    font-size: 100%;
}
.datepick-month-headerinput {
    position: absolute;
    display: none;
}
.datepick-monthtable {
    width: 100%;
    border-collapse: collapse;
}
.datepick-monththead {
    border-bottom: 1px solid #aaa;
}
.datepick-monthth, .datepick-monthtd {
    margin: 0em;
    padding: 0em;
    font-weight: normal;
    text-align: center;
}
.datepick-monthth {
    border: 1px solid #777;
}
.datepick-monthth, .datepick-monththa {
    background-color: #777;
    color: #fff;
}
.datepick-monthtd {
    background-color: #eee;
    border: 1px solid #aaa;
}
.datepick-monthtd.datepick-week {
    border: 1px solid #777;
}
.datepick-monthtd.datepick-week * {
    background-color: #777;
    color: #fff;
    border: none;
}
.datepick-montha {
    display: block;
    width: 100%;
    padding: 0.125em0em;
    background-color: #eee;
    color: #000;
    text-decoration: none;
}
.datepick-monthspan {
    display: block;
    width: 100%;
    padding: 0.125em0em;
}
.datepick-monthtdspan {
    color: #888;
}
.datepick-monthtd.datepick-other-month {
    background-color: #fff;
}
.datepick-monthtd.datepick-weekend {
    background-color: #ddd;
}
.datepick-monthtd.datepick-today {
    background-color: #f0c0c0;
}
.datepick-monthtd.datepick-highlight {
    background-color: #f08080;
}
.datepick-monthtd.datepick-selected {
    background-color: #777;
    color: #fff;
}
.datepick-monthth.datepick-week {
    background-color: #777;
    color: #fff;
}
.datepick-status {
    clear: both;
    background-color: #ddd;
    text-align: center;
}
.datepick-clear-fix {
    clear: both;
}

Javascript

$('#date').datepick({
       beforeShow: function(input, inst)
       {
          inst.dpDiv.css({marginTop: -input.offsetHeight + 'px', marginLeft: input.offsetWidth + 'px'});
       },
       dateFormat: 'mm/dd/yy',
       rangeSelect: false,
       monthsToShow: [1,2],
       monthsOffset: 0,
       monthsToStep: 1,
       //supress the inline css used by jquery for div widthonShow:function(){
        jQuery('.datepick-multi').css({'width':'426'});
        jQuery('.datepick-popup').css({'z-index':'20000'});
        },
        constrainInput:false,
        showOnFocus:false,
        showTrigger:"<button type='button' title='Pick Date' style='padding:1px;' name='StartDatePicker' id='StartDatePicker'><img src='/images/calendarpicker.gif' alt='Pick Date' width='16' height='13'></button>"
});

Solution 2:

Just in case people run into similar problem like mine here is a solution that I used,

functionopen_calendar()
{
$('.open_calendar').datepick({
    beforeShow: function(input, inst)
    {
        inst.dpDiv.css({marginTop: -input.offsetHeight + 'px', marginLeft: input.offsetWidth + 'px'});
    },
dateFormat: 'mm/dd/yy',
    rangeSelect: false,
    monthsToShow: [1,2],
    monthsOffset: 0,
    monthsToStep: 1,
    //supress the inline css used by jquery for div widthonShow:function(){
        //this will retrieve the postion of the element that triggers your calendarvar position=jQuery(this).position();
        jQuery('.datepick-multi').css({'width':'426'});
        //I added the 25px to the position to show the calendar just below the text boxjQuery('.datepick-popup').css({'z-index':'20000','top':position.top+25});
    },
    constrainInput:false,
    showOnFocus:false,
    showTrigger:"<button type='button' title='Pick Date' style='padding:1px;' name='StartDatePicker' id='StartDatePicker'><img src='/images/calendarpicker.gif' alt='Pick Date' width='16' height='13'></button>"
    });
}

The reason I added 25px is because all the textbox on my site are adjusted to that height, you can modify it as per your use.

Note: jQuery does not support getting the position coordinates of hidden elements or accounting for borders, margins, or padding set on the body element. For more info, view thisjQuery Position

Solution 3:

For someone who would get frustrated using keith wood's datepicker in higher versions of jquery. (I used jquery 3.3.1). Here is what i did.

CSS :

.calendars-popup {
    position: absolute;
    top: unset !important;
    left: unset !important;
    right: 15px;
}

The css is sufficient to cover for all browsers, except IE (11,10,9). For IE, Make below changes.

jquery.calendars.picker.js :

1) Replace andSelf with addBack

2) _showPlugin method: comment this line

inst.div.css({left: offset.left, top: offset.top});

3) _update method : comment these lines

left: target.offset().left,
top: target.offset().top + target.outerHeight()

These lines cause an inline css of top & left which makes IE positioning haywire.

This might not be the best way but it solved for me.

BTW: I also used their arabic picker along with this.