3

URL：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またはクロムで検査すると、カレンダーに追加された要素：shortDayNamesthis.$daysが表示され、カレンダーの領域で強調表示されません。

ここに画像の説明を入力してください

このウィジェットを拡張して時間サポートを追加したいのですが、この問題が私の邪魔になります。 this。$pickerにもう1つdivを追加すると、これらすべてのカレンダー要素がcalenderの代わりにこの新しい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()ますか？

4

2 に答える 2

1

jQuery .ui Date Pickerプラグインにtimepickerを追加する既存のプラグインを検索しようとしましたか？

jQueryDatePickerプラグインへのTimepickerの追加にアクセスしてください。

これがお役に立てば幸いです。

于 2012-08-02T06:41:56.520 に答える
0

これはcssの問題でした。次のプロパティを.calendarクラスに追加し、問題を解決しました。

overflow: hidden;

そしてここに結果の画像があります：正しい場所の境界線を参照してください

ここに画像の説明を入力してください

于 2012-08-06T13:15:53.767 に答える