未显示属于父元素的子元素

Question

在网址上：http://dl.dropbox.com/u/143355/datepicker/datepicker.html   专注于Date range，您将看到日期选择器小部件。   生成它的代码如下：

var $months = this.nav('months', 1); //nav some function
    var $years = this.nav('years', 12);

    var $nav = $('<div>').addClass('nav').append($months, $years);

    this.$month = $('.name', $months);
    this.$year = $('.name', $years);

    $calendar = $("<div>").addClass('calendar');

    // Populate day of week headers, realigned by startOfWeek.
    for (var i = 0; i < this.shortDayNames.length; i++) {
      $calendar.append('<div class="dow">' + this.shortDayNames[(i + this.startOfWeek) % 7] + '</div>');
    };

    this.$days = $('<div>').addClass('days');
    $calendar.append(this.$days);

    this.$picker = $('<div>')
      .click(function(e) { e.stopPropagation() })
      // Use this to prevent accidental text selection.
      .mousedown(function(e) { e.preventDefault() })
      .addClass('datepicker')
      .append($nav, $calendar)
      .insertAfter(this.$el);

因此，$nav和$calendar是$picker的孩子。

但是如果您在FF或铬中检查此小部件，则附加到日历的元素：shortDayNames和this.$days它们不会在日历的区域中突出显示。

我想扩展此小部件以添加时间支持，但此问题阻碍了我的方式。   当我再添加一个div时。$ picker所有这些日历元素都显示在这个新的中   div而不是日历。

代码如下：

var $hours = this.nav('hours', 0);
var $minutes = this.nav('minutes', 0);

var $timenav = $('<div>').addClass('nav').append($hours, $minutes);
this.$picker.append($timenav)

由于上面提到的问题，当我将border-top应用于$ timenav时，它显示在上面几天，而我希望它出现在所有日子之下   这是结果的图像：

有什么方法可以解决这个问题吗？ .append()会造成任何问题吗？

Answer 1

你有没有尝试搜索已经存在的插件，它将timepicker附加到jQuery .ui Date Picker插件？

请访问Adding a Timepicker to jQuery Date Picker plugin。

我希望这会对你有所帮助。

Answer 2

这是一个CSS问题。   将以下属性添加到.calendar类，解决了问题：

overflow: hidden;

这是结果图：看到正确位置的边框