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

<link  href="http://keith-wood.name/css/jquery.datepick.css" id="theme">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://keith-wood.name/js/jquery.plugin.js"></script>
<script src="http://keith-wood.name/js/jquery.datepick.js"></script>

<input type="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);
}
.datepick a {
    color: #fff;
    text-decoration: none;
}
.datepick a.datepick-disabled {
    color: #888;
    cursor: auto;
}
.datepick button {
    margin: 0.25em;
    padding: 0.125em 0em;
    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-nav div {
    float: left;
    width: 12.5%;
    margin: 1%;
    padding: 1%;
}
.datepick-month-nav span {
    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-header input {
    height: 1.5em;
    background-color: #444;
    color: #fff;
    font-weight: bold;
}
.datepick-month-header select, .datepick-month-header input {
    height: 1.4em;
    margin: 0em;
    padding: 0em;
    border: none;
    font-size: 100%;
}
.datepick-month-header input {
    position: absolute;
    display: none;
}
.datepick-month table {
    width: 100%;
    border-collapse: collapse;
}
.datepick-month thead {
    border-bottom: 1px solid #aaa;
}
.datepick-month th, .datepick-month td {
    margin: 0em;
    padding: 0em;
    font-weight: normal;
    text-align: center;
}
.datepick-month th {
    border: 1px solid #777;
}
.datepick-month th, .datepick-month th a {
    background-color: #777;
    color: #fff;
}
.datepick-month td {
    background-color: #eee;
    border: 1px solid #aaa;
}
.datepick-month td.datepick-week {
    border: 1px solid #777;
}
.datepick-month td.datepick-week * {
    background-color: #777;
    color: #fff;
    border: none;
}
.datepick-month a {
    display: block;
    width: 100%;
    padding: 0.125em 0em;
    background-color: #eee;
    color: #000;
    text-decoration: none;
}
.datepick-month span {
    display: block;
    width: 100%;
    padding: 0.125em 0em;
}
.datepick-month td span {
    color: #888;
}
.datepick-month td .datepick-other-month {
    background-color: #fff;
}
.datepick-month td .datepick-weekend {
    background-color: #ddd;
}
.datepick-month td .datepick-today {
    background-color: #f0c0c0;
}
.datepick-month td .datepick-highlight {
    background-color: #f08080;
}
.datepick-month td .datepick-selected {
    background-color: #777;
    color: #fff;
}
.datepick-month th.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 width
onShow: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,

function open_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 width
    onShow:function(){
        //this will retrieve the postion of the element that triggers your calendar
        var 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 box
        jQuery('.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.