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]，... 然后你可以为每个循环运行一个并执行此操作：

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>

jquery datepicker - 在标签中包装周数

3 个答案: