CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-datepicker
Tom
Tom

Reputation: 12998

jquery datepicker - wrap week number in tags

I am using the jquery datepicker and I'm trying to add a little bit of my own styling to it - however - because the week number is just inserted straight into the table cell I am very limited with what I can do with it using just CSS.

Is there any way I can make the current format:

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

look more like this

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

Upvotes: 0

Views: 989

Answers (3)

Dr.Molle
Dr.Molle

Reputation: 117334

  $(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');
  });

Demo: http://jsfiddle.net/doktormolle/7MqLn/

But I would agree with Scott Selby, the selector .ui-datepicker-week-col is sufficient for a custom styling.

Upvotes: 1

Arjun Abhynav
Arjun Abhynav

Reputation: 543

You should probably run a JavaScript function after the table is generated.

I haven't tested this code, but this should be the approach.

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

Now this will give you all the elements as an array, like targetTag[0], targetTag[1], ... Then you could run a for each loop and do this:

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

Note: Some older browsers may not support the getElementsByClassName JavaScript function.

Upvotes: 1

Scott Selby
Scott Selby

Reputation: 9570

you have control of your jquery-ui css file , you can override anything in there to style the way you want, I do not know of any way to change the HTML that gets rendered, like adding <p> to the date, but you can always do something like this in css

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

or adding in HTML

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

Upvotes: 0

Related Questions