Question

我需要在日历下获取jquery gldatepicker输入。似乎无论我做什么，它总是在日历之上呈现。有没有人有任何想法或熟悉这个？这是我的代码：

<html>
    <head>
    <link href="styles/glDatePicker.default.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="glDatePicker.js"></script>
    </head>
    <body>
    <table>
    <tr><td>
    <div gldp-el="mydate" style="width:400px; height:300px; position:absolute; top:70px; left:100px;"></div>
    </td></tr>
    <tr><td>
    <div><input type="text" id="mydate" gldp-id="mydate" style="border:1px;border-color:#000000;padding:5px;"/></div>
    </td></tr>
    </table>
    <script type="text/javascript">
    var currentTime = new Date();
    var month = currentTime.getMonth();
    var day = currentTime.getDate();
    var year = currentTime.getFullYear();
    jQuery(window).load(function(){
        jQuery('input').glDatePicker({
            showAlways: true,
            allowMonthSelect: false,
            allowYearSelect: false,
            prevArrow: '',
            nextArrow: '',
            selectableDOW : [1, 2, 3, 4, 5, 6],
            //dowOffset: 1,
            //selectedDate: new Date(2013, 8, 5),
            selectableDateRange: [
            { from: new Date(year, month, day),
                to: new Date(year+1, month, day) },
            { from: new Date(year, month, day),
                to: new Date(year+1, month, day) },
            ]
            //selectableDates: [
        //  { date: new Date(2013, 8, 24) },
        //  { date: new Date(2013, 8, 30) }
        //    ]
        });
    });
    </script>
    </body>
</html>

Answer 1

我现在找到的唯一解决方案是css和组件解决方案（有点hacky ......）。

我在{y}上将calendarOffset选项设置为325。

偏移日历在页面上的位置的像素数。 calendarOffset：{x：0，y：1}

比我用顶部和绝对位置设置你的输入。

代码如下：

<table>
    <tr>
        <td>
            <div gldp-el="mydate" style="width:400px; height:300px; position:absolute;"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <input type="text" id="mydate" gldp-id="mydate" style="border:1px;border-color:#000000;padding:5px; top: 300px; position: absolute;" />
            </div>
        </td>
    </tr>
</table>

JS：

   var currentTime = new Date();
   var month = currentTime.getMonth();
   var day = currentTime.getDate();
   var year = currentTime.getFullYear();
   jQuery(window).load(function () {
       jQuery('input').glDatePicker({
           showAlways: true,
           allowMonthSelect: false,
           allowYearSelect: false,
           prevArrow: '',
           nextArrow: '',
           calendarOffset: { x: 0, y: -325 },
           selectableDOW: [1, 2, 3, 4, 5, 6],
           //calendarOffset: { x: -58, y: -66 },
           //dowOffset: 1,
           //selectedDate: new Date(2013, 8, 5),
           selectableDateRange: [{
               from: new Date(year, month, day),
               to: new Date(year + 1, month, day)
           }, {
               from: new Date(year, month, day),
               to: new Date(year + 1, month, day)
           }]
           //selectableDates: [
           //  { date: new Date(2013, 8, 24) },
           //  { date: new Date(2013, 8, 30) }
           //    ]
       });

   });

工作小提琴：http://jsfiddle.net/IrvinDominin/3pRJn/3/

glDatepicker获取日历下方的输入

1 个答案: