Geek Answers Handbook

Problem with jQuery-UI Datepicker CSS

I have this pretty simple HTML page with jQuery datepicker:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Datepicker</title>
    <link rel="stylesheet" href="../App_Themes/Default/ui.datepicker.css" type="text/css"
        media="screen" title="Smoothness" />

    <script src="../Shared/Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>

    <script src="../Shared/Scripts/jquery-ui-1.5.3.min.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
        $(document).ready(PageLoad);

        function PageLoad() {
            $('#textBox').datepicker();
        }
    </script>

</head>
<body>
    <input type="text" id="textBox" />
</body>
</html>

The datpicker itself works fine, but I can’t apply my theme. Did I miss something really stupid here?

Thanks!!!!

+4
source share
4 answers

My problem was not with CSS validity or relative paths .... I just referenced the wrong version of CSS files for my jQuery-ui version. For all of you who have had a similar problem, be sure to download the correct version of the theme for your jQuery-ui scripts.

Thanks.

+7
source

If you download jQueryUI via Google, make sure that the jQueryUI CSS theme has the same version as the jQueryUI library.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'></script>

, 1.8.5. 1.8 1.8.5 , .

+8

I have a problem that is the opposite of yours. While I forgot to insert the bottom line in my chapter section, and my datepicker takes css from my template. After turning it on in the “My chapter” section, I can view the datetime collector using googleapi css

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
+3
source

try with this ...

        function eds_admin_styles() {
          wp_enqueue_style( 'jquery-ui-datepicker-style' , '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css');
        }
        add_action('admin_print_styles', 'eds_admin_styles');
        function eds_admin_scripts() {
          wp_enqueue_script( 'jquery-ui-datepicker' );
        }
        add_action('admin_enqueue_scripts', 'eds_admin_scripts');

here js

    (function($) {
      $('#jquery-datepicker').datepicker();
    }(jQuery));
0
source

More articles:


All Articles