CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-datepicker
beaumondo
beaumondo

Reputation: 4930

JQuery UI DatePicker has no style

I am trying to display a JQuery UI datepicker widjet, using the example from their website. The problem is that when the datepicker is displayed there is no style, see the code below.

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" src="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" type="text/css">
        <script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
         <!-- <script language="javascript" type="text/javascript" src="jquery.flot.min.js"></script> -->
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
        
        <script type="text/javascript">
            $(function() {
               $( "#datepicker" ).datepicker();
            });
        </script>
   </head>
   <body>
       <p>Date: <input type="text" id="datepicker"></p>
   </body>
</html>

I have tested locally in the file system and tested using node simple server.

Upvotes: 1

Views: 7489

Answers (5)

Kwed
Kwed

Reputation: 297

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      $("#datepicker").datepicker();
    });
  </script>
</head>

<body>

  <p>Date: <input type="text" id="datepicker"></p>


</body>

</html>

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20636

To include CSS,

Use href : <link rel="stylesheet" href=".."

and not src : <link rel="stylesheet" src=".."

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" type="text/css">
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- <script language="javascript" type="text/javascript" src="jquery.flot.min.js"></script> -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() {
    $( "#datepicker" ).datepicker();
});

</script>
</head>
<body>
	<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Upvotes: 4

pcs
pcs

Reputation: 1854

If you load jQueryUI through Google, make sure the jQueryUI CSS theme has the same version as the jQueryUI library.

And not use src for link css, use href to link.

For example:

<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>

Worked DEMO

Upvotes: 2

Bram
Bram

Reputation: 2581

You didn't include a CSS file for the theme. You can download your themes from here: http://jqueryui.com/themeroller/

You need to include following files:

<head>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>

You can use the latest versions ofcourse.

Upvotes: 1

Pratik
Pratik

Reputation: 954

Check below code....I have changed CSS

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"><!--Replace this line-->
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- <script language="javascript" type="text/javascript" src="jquery.flot.min.js"></script> -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() {
    $( "#datepicker" ).datepicker();
  });

  </script>
</head>
<body>
	<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Upvotes: 2

Related Questions