CODEWITHSUNDEEP
jqueryjquery-uidatepicker
ToyRobotic
ToyRobotic

Reputation: 597

custom theme for jquery ui datepicker

i use for my project the jquery ui datepicker and i want to add a custom theme for it.

My theme is already finish and i try to added, but it´s not working.

Code Example

.metro-skin .ui-widget {
   font-family: 'Open Sans', sans-serif;
   background: #f0f0f0; 
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);

}

I add a extra class to not changing the other jquery ui elements in my project. I try it with .. 

<input type="text" class="form-control input-sm metro-skin" name="birthdate">

and with 

$("#ui-datepicker-div").addClass("metro-skin")

But it's not really working and after "addClass" my Skin looks torn.

Upvotes: 0

Views: 2413

Answers (2)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Just remove the space between .metro-skin and .ui-widget as below:

Fiddle DEMO

$("input[name='birthdate']").datepicker();
$("#ui-datepicker-div").addClass("metro-skin")
.metro-skin.ui-widget {
   font-family: 'Open Sans', sans-serif;
   background: #f0f0f0; 
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);

}
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input type="text" class="form-control input-sm metro-skin" name="birthdate">

Upvotes: 1

spaceholder
spaceholder

Reputation: 171

http://jsfiddle.net/5mpvknqz/1/

.metro-skin {
   font-family: 'Open Sans', sans-serif;
   background: #f0f0f0; 
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);

}

Remove .ui-widget from CSS, it is working for me.

Upvotes: 0

Related Questions