CODEWITHSUNDEEP
javascriptjqueryhtmlcss
fiberOptics
fiberOptics

Reputation: 7165

jQuery TimePicker theme is not working

What I have missed? My timepicker looks like this, it doesn't use the theme for timepicker.

enter image description here

Inside html file: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link type="text/css" href="css/jquery-ui-1.8.16.custom.css" />
<link type="text/css" href="css/jquery.ui.all.css" />
<style type="text/css">
    #ui-datepicker-div, .ui-datepicker{ font-size: 80%; }
    .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
    .ui-timepicker-div dl { text-align: left; }
    .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
    .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
    .ui-timepicker-div td { font-size: 90%; }
    .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
<script type="text/javascript" src="script/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="script/jquery-ui-1.8.16.custom.min.js" ></script>
<script type="text/javascript" src="script/jquery-ui-timepicker-addon.js" ></script>
<script type="text/javascript" src="script/jquery-ui-sliderAccess.js" ></script>


<script type="text/javascript">
    $(document).ready(function(){
        $("#time").timepicker({
            addSliderAccess: true,
            sliderAccessArgs: { touchonly: false }
        }); 
    });
</script>
</head>

<body>
    <input type="text" value="" id="time" />
</body>
</html>

Do I have wrong order of loading for js files?

enter image description here

Some reference link.

jsfiddle.net/MyNameIsCode/eb8Dz

Thanks in advance!

Upvotes: 1

Views: 3480

Answers (1)

summea
summea

Reputation: 7593

Does the theme that you downloaded have a theme name? Sometimes the theme CSS path might need to include that name... for example, if the theme name is "custom-theme", it would be like this:

<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" />

Unless you are sure that the paths are correct for your CSS files. It just seems like the CSS part isn't actually getting found, from your first screenshot.

EDIT:

After looking at the links below, it looks like there's a problem with the jquery-ui theme CSS file (that particular Overcast theme CSS file.) It seems to work if I change out that top CSS link to something like this:

<link type="text/css" rel="stylesheet" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.16.custom.css" />

Also note: that CSS link seemed to need the extra:

rel="stylesheet"

in there... otherwise it still wouldn't appear correctly.

The ui-lightness theme might not be what you are looking for... but, I would probably try re-downloading the Overcast theme to see if that works.

Upvotes: 1

Related Questions