基于hoover添加datepicker之外的内容

Question

我正在开发日期选择器，所以当用户将鼠标悬停在日期上时，它会在输入栏顶部显示日期

这是我正在处理的 jfiddle http://jsfiddle.net/JGM85/1/

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

但我试图将它的内容显示在日期选择器的侧面而不是顶部。

像这样

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 作为日期选择器并调用您自己的函数。

https://jsfiddle.net/JGM85/272/

请检查此代码与您的 fiddle :

    $(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之外的内容

Add content besides datepicker based on hoover

javascript

jquery

datepicker