Jquery-Ui Datepicker CSS Problem

jQuery-UI Datepicker CSS problem

My problem wasn't about the CSS validity or relative paths .... I was just referencing the wrong version of CSS files for my jQuery-ui version. To all of you that had a similar problem make sure you download the correct theme's version for your jQuery-ui scripts.

Thanks.

JQuery UI DatePicker has no style

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

Jquery Datepicker CSS is not working inside modal

You have to add this css file to yout header.php:

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

Jquery UI Datepicker not working while everything looks fine

Add this line on top: <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> and remove the class hasDatepicker from input tag so your input tag will be <input class="from" id="date-from" type="text" />

$("#date-from").datepicker();

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /><script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><input class="from" id="date-from" type="text" />

Jquery UI Datepicker Calendar Not Working As Expected

The problem lay in testcalendar.php, which was the file containing the calendar. It included a . Although I know that an id must be unique, I didn't realise that I was breaking that rule when I inserted the file multiple times into a parent file. Especially as it was only a problem when working down the page and not when going up.

The solution was to change the div to

<div id="calendar<?php echo $room_id ?>">

and the corresponding line of jquery to

$('#calendar<?php echo $room_id ?>').datepicker({

Problems with jQuery UI datepicker in chrome

Remove float: left from these two places:

table.ui-datepicker-calendar > thead { ... }
table.ui-datepicker-calendar > thead th { ... }

Also remove the height: 40px; from:

table.ui-datepicker-calendar > tbody td { ... }

Addition:

Add verticle-align: bottom; to:

table.ui-datepicker-calendar > tbody td { ... }

---

Related Topics