3

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

在此处输入图像描述

我想扩展这个小部件来增加时间支持，但是这个问题挡住了我的路。 当我向 this.$picker 添加一个 div 时，所有这些日历元素都会显示在这个新的 div 中，而不是 calender中。

在此处输入图像描述

代码如下：

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()问题吗？

4

2 回答 2

1

Did you tried to search for already existing plugins which appends timepicker to jQuery .ui Date Picker plugin?

Please visit Adding a Timepicker to jQuery Date Picker plugin.

I hope this will help you.

于 2012-08-02T06:41:56.520 回答
0

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

overflow: hidden;

这是生成的图像：请参阅正确位置的边框

在此处输入图像描述

于 2012-08-06T13:15:53.767 回答