Question

我正在处理一个日期选择器，所以当用户在日期上方显示它在输入栏顶部显示日期时

这是jfiddle即时工作http://jsfiddle.net/JGM85/1/

<div class="demo">
<h1></h1>
<p>Date: <input type="text" id="datepicker"></p>

但是我试图在datepicker的一边显示内容，而不是在顶部。

像这样的东西

Imgur Link

Answer 1

您可以将<p>和<h1>变为：display: inline

<p style="display: inline">
   Date: <input type="text" id="datepicker">
</p>

<h1 style="display: inline"></h1>

Answer 2

您可以使用 beforeshow 作为datepicker并调用您自己的函数。

<强> https://jsfiddle.net/JGM85/272/

请用小提琴检查此代码：

    $(function() {
    $("#datepicker").datepicker({
        //The calendar is recreated OnSelect for inline calendar
        onSelect: function (date, dp) {
            updateDatePickerCells();
        },
        onChangeMonthYear: function(month, year, dp) {
            updateDatePickerCells();
        },
        beforeShow: function(elem, dp) { //This is for non-inline datepicker
            updateDatePickerCells();
        }

    });
   updateDatePickerCells();
function updateDatePickerCells(dp) {
    /* Wait until current callstack is finished so the datepicker
       is fully rendered before attempting to modify contents */
    setTimeout(function () {

            $('.ui-datepicker-calendar').after('<p>Fajr&nbsp; Sunrise&nbsp; Zuhr&nbsp; Asr&nbsp; Magrib&nbsp; Isha</p><div class="className"></div>');

    }, 0);
}

    $(".ui-state-default").live("mouseenter", function() {

        $('.className').html($(this).text()+"."+$(".ui-datepicker-month",$(this).parents()).text()+"."+$(".ui-datepicker-year",$(this).parents()).text());
    });
});

根据hoover添加除datepicker之外的内容

2 个答案: