DatePicker has no formatting

Question

Please see the code below, which I took from here: https://jqueryui.com/datepicker/#min-max

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Restrict date range</title>
  <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({ minDate: -20, maxDate: "+1M +10D", dateFormat: "dd/mm/yy" });
  } );
  </script>
</head>
<body>

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


</body>
</html>

The DatePicker looks like this in all my browsers (Chrome; Firefox; IE and Edge):

I want it to look smoother; maybe like this (as in the link):

I have spent two hours Googling this and have found nothing except this: WHY my Datepicker looks so weired?. However, the solution did not work for me.

To me it appears as in the link. Have you turned off JS or something? — SuperDJ, Oct 21 '18 at 09:10
@SuperDJ, could it be something to do with the fact that I am just copying and pasting the code into a file and then double clicking on the file (.html) to run it. Do I have to run it from a web server e.g. IIS? — w0051977, Oct 21 '18 at 09:13
I doubt that is the reason. Atleast I'm still able to load files from the web that way. — SuperDJ, Oct 21 '18 at 09:17
Are you trying to open the html as a file in your browser? Then `//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css` won't work as a URL probably. Have you checked the network tab in your dev tools, if the CSS is actually loaded? — connexo, Oct 21 '18 at 09:17
try to use this cdn url for css "https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" — Gaurav Moolani, Oct 21 '18 at 09:17
@SuperDJ, it works as expected when I load the webpage from IIS. Any ideas why it does not work when I load it by double clicking on the file? — w0051977, Oct 21 '18 at 09:20
The only reason I can think of is that `//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css` is seen as a local path. Try: `https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css` — SuperDJ, Oct 21 '18 at 09:22
@SuperDJ, thanks. That was it (I have marked another answer below). Could you have a look at my follow on question here: https://stackoverflow.com/questions/52914225/using-datepicker-with-net — w0051977, Oct 21 '18 at 10:15

score 0 · Accepted Answer · answered Oct 21 '18 at 09:22

0

Replace

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />

by

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />

You are missing the protocol https: at the start of the href value. I assume resolving a protocol-less URL isn't supported if you're not serving the page from a webserver.

if you want to check the page using the file://protocol.

answered Oct 21 '18 at 09:22

connexo

53,704
14
91
128

Could you have a look at my follow on question: https://stackoverflow.com/questions/52914225/using-datepicker-with-net ? Thanks. – w0051977 Oct 21 '18 at 10:15

DatePicker has no formatting

1 Answers1