javascript - jquery datepicker - タグで週番号をラップする

Question

私はjquery datepickerを使用しており、独自のスタイルを少し追加しようとしていますが、週番号がテーブルセルに直接挿入されているため、それを使用してできることは非常に限られていますCSS。

現在の形式を作成する方法はありますか:

<td class="ui-datepicker-week-col">40</td>

もっとこのように見える

<td class="ui-datepicker-week-col"><p>40</p></td>

Answer 1

  $(document).ready(function() {
    $("#selector")
      .datepicker({ showWeek: true ,
                    onChangeMonthYear:function(a,b,c)
                                      {setTimeout(function(){$(c.input).trigger('update');},20);}
                  }).on('update',function(){$('.ui-datepicker-week-col',this).wrapInner('<p/>');})
                      .trigger('update');
  });

デモ: http://jsfiddle.net/doktormolle/7MqLn/

しかし、Scott Selby の意見には同意し.ui-datepicker-week-colます。カスタム スタイリングにはセレクターで十分です。

Answer 2

テーブルが生成された後、おそらく JavaScript 関数を実行する必要があります。

私はこのコードをテストしていませんが、これがアプローチになるはずです。

var targetTag = document.getElementsByClassName("ui-datepicker-week-col");

これで、targetTag[0]、targetTag[1] などのすべての要素が配列として得られます。次に、for each ループを実行して、次のようにします。

targetTag[i].innerHTML = "<p>" + targetTag[i].innerHTML + "</p>";

注: 一部の古いブラウザーは、getElementsByClassName JavaScript 関数をサポートしていない場合があります。

Answer 3

jquery-ui cssファイルを制御できます。そこにあるものをオーバーライドして、好きなようにスタイルを設定できます。日付に追加するなど、レンダリングされるHTMLを変更する方法はわかりませんが、いつ<p>でも行うことができますcssでこのようなもの

.ui-datepicker-week-col{
      display: inline !important;  // or however you want to change it
  }

またはHTMLに追加する

<style type="text/css">
     .ui-datepicker-week-col{
        ...  /*HTML styling will override css file*/
         }
</style>