jQuery datepicker获取显示在页面的底部（Keith-Wood datepicker） [英] jQuery datepicker getting displayed at the bottom of the page (Keith-Wood datepicker)

问题描述

我有一个与jquery datepicker（Keith-Wood）有关的问题（中的jquery.datepick.css？我认为老版本的datepick插件可能不兼容新版本的jQuery，但如果你更新datepick插件，它应该工作。查看它，它适用于版本5.0的datepick插件和版本1.10.2的jQuery。

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

HTML p>

 < link rel =stylesheethref =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 =textid =date/> 
  

CSS

  / * 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按钮{
 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表{
 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]，
 monthOffset：0，
 monthToStep：1，
 //禁止jquery使用的内联css的div宽度
 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>
}）; 
  

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 the bottom of the page on every instances in which the date picker was used.

The functionality works fine, just the position got messed up.

I need to have widget open write below the DateAdded section. If I switch back to jQuery 1.6.4 the positioning is correct. Here is the screen shot while using jQuery 1.6.4

Below is the function that I use to trigger the calendar.

function open_calendar()
{
    jQuery('.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(){
        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>"
        });
}

I need to have the position of the widget to stack right below the textbox from which it is triggered.

解决方案

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 rel="stylesheet" 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>"
});

这篇关于jQuery datepicker获取显示在页面的底部（Keith-Wood datepicker）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！