jquery - 子元素不显示属于父元素

Question

网址:http://dl.dropbox.com/u/143355/datepicker/datepicker.html 关注日期范围，您将看到一个日期选择器小部件。 生成它的代码如下:

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 或 chromium 中检查此小部件，则附加到日历的元素:shortDayNames 和 this.$days 它们不会在日历区域中突出显示。

我想扩展这个小部件以添加时间支持，但是这个问题阻碍了我。 当我向 this.$picker 添加一个 div 时，所有这些日历元素都会显示在这个新的元素中 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

您是否尝试过搜索现有的插件，将时间选择器附加到 jQuery .ui 日期选择器插件？

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

希望这对您有帮助。