ui jquery datepicker won't display downwards

Question

My date picker won't pop out below, it is always opening upwards, and I don't know why because on the ui jquery demo, the datepicker opens downwards.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {
    orientation: "top auto"
$(".datepicker").datepicker();
});
</script>
<div id="div4">
<p>What date do you wanna get outta here?</p>
<input class = "datepicker" name = "outboundDate" /><br>
</div>

that code is just fine, test it here: https://plnkr.co/edit/TDc8m45q4Wna1byMeoN7?p=preview — deblocker, Apr 02 '17 at 17:13
thank you, yes when i try the code on another file, it works, but for some reason, it opens upwards on the file I'm working on, and I can't figure out why — Victoria Dujardin, Apr 03 '17 at 10:10
you should check which libraries you are referencing, maybe `orientation: "top auto"` is from another library, like bootstrap datepicker, not jQuery-UI datepicker. BTW, be aware that the datepicker can adapt itself to open upward, when there isn't enough place to open below the parent element. — deblocker, Apr 04 '17 at 06:30
@Twisty: yes you are right, i haven't pointed out that (apologize). But, because this doesn't influences the result, so i guess the question here is somewhat more tangled as it appears at first glance. — deblocker, Apr 04 '17 at 06:44
I removed "top auto", doesn't change anything. Actually there is plenty of space below on my page. I guess it will remain a mystery ¯\_(ツ)_/¯ — Victoria Dujardin, Apr 04 '17 at 11:06
what is in your CSS class `.datepicker`? did you checked the other libraries in your project? here is a reference to a "top auto" orientation: http://stackoverflow.com/questions/20262633/bootstrap-datepicker-orientation-placement — deblocker, Apr 04 '17 at 14:23

score 0 · Answer 1 · answered Apr 03 '17 at 17:07

Welcome to Stack Overflow.

Your syntax does not look correct. I believe you should use:

$(document).ready(function() {
  $(".datepicker").datepicker({
    orientation: "top auto"
  });
});

Check your JS Console for any other alerts or errors reported too.

ui jquery datepicker won't display downwards

1 Answers1