0

I have a jquery datepicker and trying to customize.

I want to change the border of the elements, and I have problems with td

.ui-datepicker-calendar td{

     border-left: 1px solid #FFFFFF;
     border-bottom: 1px solid #FFFFFF;
}



.ui-datepicker-today {

      border: 1px solid #C90212 !important;
}

The internal code for datepicker:

 /*not today*/
 <td class=" " data-handler="selectDay" data-event="click" data-month="2" data-year="2016"><a class="ui-state-default" href="#">8</a></td>

 /*Today */
 <td class=" ui-datepicker-days-cell-over  ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="2" data-year="2016"><a class="ui-state-default ui-state-highlight" href="#">9</a></td>

The problem is the border top for today is not setting.

I tried with border-spacing but it doesnt work with internet explorer.

I attach an image with the result enter image description here

cucuru
  • 3,456
  • 8
  • 40
  • 74
  • Have you tried using outline instead of border? – Seanevd Mar 09 '16 at 17:30
  • It doesnt work in IE – cucuru Mar 09 '16 at 17:49
  • I'm not sure how far back in IE you want to support, but looks like at least back to IE 8 supports it. http://caniuse.com/#feat=outline – Seanevd Mar 11 '16 at 15:03
  • it is said but it is not working in IE8 either in IE11, http://stackoverflow.com/questions/1537968/how-does-internet-explorer-8-support-the-css-outline-attribute but the answer doesnt work – cucuru Mar 14 '16 at 15:41

2 Answers2

0

Just change your css to:

.ui-datepicker-today a {
  border: 1px solid #C90212 !important;
}
AlanShearer
  • 141
  • 3
0

the color of the edges must change the a in the td, and looks like this:

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
   border: 1px solid #C90212 !important;
}
Moishy
  • 3,560
  • 3
  • 23
  • 42
cgomez
  • 1
  • 1
  • how can I this fix the cell? it puts a border arround the number, but I want to border the cell – cucuru Mar 10 '16 at 10:46