0

我正在使用 jquery datepicker，我正在尝试向它添加一些我自己的样式 - 但是 - 因为周数只是直接插入到表格单元格中，所以我只能使用它来做的事情非常有限CSS。

有什么办法可以制作当前格式：

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

看起来更像这样

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

4

3 回答 3

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足以用于自定义样式。

于 2012-10-05T14:32:58.207 回答
1

您可能应该在生成表后运行 JavaScript 函数。

我没有测试过这段代码，但这应该是方法。

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

现在这会将所有元素作为一个数组提供给您，例如 targetTag[0]、targetTag[1]、... 然后您可以为每个循环运行一个并执行以下操作：

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

注意：一些较旧的浏览器可能不支持 getElementsByClassName JavaScript 函数。

于 2012-10-05T14:33:01.203 回答
0

您可以控制您的 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>
于 2012-10-05T14:28:41.450 回答