jQuery UI DatePicker: without any styling, no picking dates

I'm struggling to configure a jQuery UI DatePicker. I moved the development-bundle folder contents to the directory res/jqueryui and initialized two datepickers as shown below:

<script src="res/jquery-2.1.0.min.js"></script>
<script src="res/jqueryui/ui/minified/jquery-ui.custom.min.js"></script>
<script src="res/jqueryui/ui/minified/jquery.ui.datepicker.min.js"></script>
<link rel="stylesheet" href="res/jqueryui/themes/blitzer/minified/jquery.ui.datepicker.min.css">
<script>
    $(document).ready(function() {
        $( "#from" ).datepicker();
        $( "#to" ).datepicker();
        $( "#from" ).datepicker( "option", "dateFormat", $( this ).val() );
        $( "#to" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
</script>

When I click on a datepicker field, the datepicker pops up but without any styles. However, if I link the stylesheet to 

http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
, the styles work fine. Why is that?

Additionally, when I select a date in the datepicker, the field value does not update. There are no JavaScript errors reported. What could be causing this issue?

It's worth noting that I'm not utilizing the bundled jQuery file (jquery-1.10.2.js), yet switching to it doesn't resolve these problems.

jquerycssjquery-uidatepickerjquery-ui-datepicker

Answer №1

To resolve the issue with CSS, I tackled it by downloading a tailored jQuery UI package and only uploading the main .js file and .css file (inclusive of images). These files were then referenced in the HTML source code as seen below:

<script src="res/jquery-2.1.0.min.js"></script>
<script src="res/jquery-ui-1.10.4.custom.min.js"></script>
<link rel="stylesheet" href="res/jqueryui-css-blitzer/jquery-ui-1.10.4.custom.min.css">

Moreover, to fix the date selection problem, I made sure to specify the correct date format instead of relying on $( this ).val(), which was originally from the date formats example. Here is the corrected code snippet for reference:

$( "#from" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
$( "#to" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When adding my Angular web app to the home screen on iOS Safari, the icon appears as a screenshot instead of the specified apple-touch-icon

Despite adding an apple-touch-icon link to my index.html with a 150x150 PNG image, when I try to add my Angular web app as a shortcut to my iOS home screen from Safari, it only appears as a screenshot of the app page. Below is my HTML code: <!doctype ...

htmlcssiosangular

Tips for enabling both vertical and horizontal scrolling using the mousewheel on a webpage

Our website features a unique scrolling functionality where it starts off vertically and then switches to horizontal once the user reaches the bottom. This allows for a seamless transition between scrolling directions. In addition, users can easily naviga ...

javascripthtmlcssscrollmousewheel

If viewed on a mobile device, separate the array (indexed list) into two rows

Currently, I am working on my Ionic project where I am trying to implement an indexed list horizontally instead of vertically. While the list looks good as it is now, I want to make sure it supports smaller screen devices too by splitting the list into two ...

javascripthtmlcssangularjsionic-framework

"Injecting the value of a jQuery variable into a PHP variable

<script type="text/javascript"> $(document).ready(function(){ $("#t_select").change(function(){ var table_name = $("#t_select").val(); $.ajax({ type: 'POST', ...

javascriptphpjqueryajax

Ever since implementing a new section class, the CSS first-of-type selector has ceased to function

After referencing a previous response, I utilized first-of-type to specifically target the initial menuSection with this code snippet... .menuSection:first-of-type { background: red; } <div id="container"> <section class="menuSection"> ...

csscss-selectorsfirst-of-type

Revolutionizing Interaction: Unveiling the Power of Bootstrap 3

Would you be able to assist me in customizing buttons to resemble a typical dropdown link? <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown <span class="caret"&g ...

csstwitter-bootstraptwitter-bootstrap-3

Unable to transfer information from controller to view using ajax

Having trouble with ajax in my asp.net mvc project. I am trying to pass data from the controller to the view but encountering an error: "Failed to load resource: the server responded with a status of 500 (Internal Server Error)" I can save to the server ...

jqueryasp.netajaxmodel-view-controller

Expand the width of the div element to fill the entire space once the div is concealed

I have 3 different sections. By clicking on "HIDE" in the first section (divChaptersHide), it will be hidden to reveal another smaller section (divChaptersExpand). Then, by clicking on "EXPAND" in divChaptersExpand, it will hide that section and show divCh ...

jqueryjquery-ui

When using addClass("test"), it throws an error message: TypeError: undefined is not a function

Upon examination in the console, I discovered the following: $(".myCssClass")[0].parentNode <li><span class="myCssClass">some text</span></li> I am attempting to add a CSS class to the parent span tag within the <li> element ...

javascriptjquery

Timeout for jQuery animations

My jQuery animation script is causing an issue where it does not finish the animation before returning to the parent function. Specifically, the JavaScript code changes a background color, calls the animate function, the animation starts but doesn't c ...

javascriptjquery

The scrollbar CSS appears to be missing on iPhone browsers Chrome and Safari

After spending the entire day searching for a solution to override the irritating scrollbar issue on my iPhone, I came across this simple example: .scroller { background: lightblue; height: 1000px; max-width: 400px; margin: 90px auto; padding: ...

htmlcss

Creating an intricate table layout using AngularJS and the ngRepeat directive

I'm attempting to create a table similar to the one shown in the image below using HTML5. In this table, there is a multi-dimensional matrix with Class A and Class B highlighted in yellow. Each class has three modes (highlighted in blue), and each mo ...

javascripthtmlcssangularjshtml-table

Implementing a click event listener on an iframe that has been dynamically generated within another iframe

Below is the code I used to attach a click event to an iframe: $("#myframe").load(function() { $(this.contentWindow.document).on('click', function() { alert("It's working properly"); }); }) Everything seems to be working co ...

javascriptjquery

What is the process for retrieving the information sent from the client application to the jsreport server?

I want to create a downloadable pdf report through my angular application using jsreport. The client app makes a POST request passing sample data to the report server in this manner. $http.post('http://localhost:5488/api/report', { ' ...

javascriptjqueryangularjspostjsreport

Retrieve the values of the recently selected options in a multiple selection

I am trying to retrieve the last or most recently selected option value from a dropdown menu. In my Django code, I have attempted the following: <script type="text/javascript> django.jQuery(document).ready(function(){ django ...

javascriptjquerydjango

What is the best way to close a popup window?

Is there a way to close my popup? function hidePopup(){ document.getElementById("popup-1").classList.remove("active"); } @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); .popup .overlay{ positio ...

javascripthtmlcss

Can someone please provide me with the correct syntax for a jQuery AJAX PUT request that is JSON encoded?

Here is the ajax PUT request that I have written: jQuery.ajax({ url: url_lab_data+"backend/read/{\"f_anid\":"+anid+"}", type: "PUT", data: JSON.stringify({"read": 1}), ...

jqueryajaxjsonrequestput

HTML min-width is not being considered by the media query breakpoint

After resizing the browser window to less than 480px, my site reverts back to its original style (the css not defined inside the mixins). I attempted to limit the html with min-width, but despite the browser displaying a horizontal scrollbar, the css still ...

htmlcssmedia-queriescontainer-queries

Challenges with managing jQuery's .blur() and .focus() events

I am encountering an issue with a form I have created that contains several input fields. When a user clicks on any of the input fields, a hidden div appears with various options related to that field. The user can then select an option from the div, which ...

jqueryeventsfocusblur

Getting tags with text containing specific substring by utilizing CSS selectors

Here is the HTML snippet I am working with: <tr bgcolor="#DEDEDE"> <td> <b>OK:Have idea</b> </td> <td> <b>KO:Write code</b> </td> <td> <b>KO:Ru ...

cssseleniumcss-selectorssubstringwebdriver