1

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!

1 Answer 1

1

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.

3
  • The links are correct. Please try this sample I made, the still exist here: jsfiddle.net/MyNameIsCode/eb8Dz/16 Jan 25, 2012 at 5:29
  • Thanks for the links; please read the rest of my answer above :)
    – summea
    Jan 25, 2012 at 6:05
  • 1
    +1 Wow you got it, it doesn't work in jffiddle.net but it works on my project. Thanks a lot!!! :) Jan 25, 2012 at 6:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.