JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<p><a href="http://bugs.jqueryui.com/ticket/8389">jQuery UI #8389</a>: To recreate make sure the input is towards the bottom of the screen and then give it focus.  The <code>slideDown</code> animation is used but the calendar is flipped to the top of the input.  The ticket suggests that <code>slideUp</code> should be used in this circumstance.</p>

<input type="text" id="datepicker">

CSS

body { padding-top: 200px; }
p { line-height: 1.4; }

JavaScript

$("#datepicker").datepicker({
    showAnim: "slideDown"
});