The JavaScript date picker is malfunctioning in the HTML editor, but it functions properly in Fiddle

I have a working format available in a JS fiddle. Here is the code I have used on my demo site: I created a new folder named "js" and placed datepicker.js inside it, then linked it in my HTML like this:

<script type="text/javascript" src="js/datepicker.js"></script>

My datepicker.js code looks like this:

$(function () {
    $('#departure-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            setTimeout(function () {
                $('#return-date').datepicker('show');
            }, 300)
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });

    $('#return-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });
});

Below is my HTML code:

<input id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">

However, when I press the above button, the .js file is not being called. Any assistance would be greatly appreciated.

Answer â„–1

To successfully use the datepicker functionality, you must ensure that jQuery is included in your project. You can download the latest version of jQuery and place it in your js folder, linking it as you did with datepicker.js. Alternatively, you can directly include it using the following code:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

If this approach does not work, you can try including these specific versions:

<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>

If there are any issues with your current datepicker.js file, switching to the jquery-ui js may solve them. I have personally tested this method with the specified sources, and it worked correctly.

If directly linking to the jQuery site's js files still does not resolve the problem, there might be additional issues on your page that we are not able to see.

Answer â„–2

Everything is running smoothly on my computer with your code. I just utilized the CDN paths for jQuery and jQueryUI from the Google Developer Site.

Your provided code snippet:

<!DOCTYPE html>
<html>
<head>
    <title>JS Datepicker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<input  id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">
<script type="text/javascript">
    $(function () {
    $('#departure-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            setTimeout(function () {
                $('#return-date').datepicker('show');
            }, 300)
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });

    $('#return-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });
});
</script>
</body>
</html>

https://i.sstatic.net/Dw9x6.jpg https://i.sstatic.net/4XcMW.jpg

Answer â„–3

Make sure you don't misplace the position of jQuery, or else it won't work as expected. Here is some code that may assist you:

$(function () {
    $('#departure-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            setTimeout(function () {
                $('#return-date').datepicker('show');
            }, 300)
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });

    $('#return-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });
});
     <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<input  id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">

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

Generating JSON on-the-fly with fluctuating keys and values in conjunction with Express JS

When I fetch an API into my Express server, the data comes in the form of JSON key-value pairs within an array. [{ "quality": "best", "url": "https://someurlhere.example/?someparameters" }, { "quality": ...

Is it possible to implement the Jquery blockui(plugin) code without relying on Ajax?

Hey there, I'm new to Jquery and could really use some help... I've got a page with multiple links, but when a user clicks on one link and it's still processing in the background before loading the page, they keep clicking on other links wi ...

What is the best way to add a new item to a list?

$("ul").append("<li><a href=""><?php echo $this->session->userdata('username'); ?></a></li>"); The code above is causing an issue in my console, specifically it's displaying the error message: Uncaught Sy ...

Generating a new Blob through assembling MediaRecorder blob sections leads to a blank Blob

I’ve encountered a peculiar issue with the new Blob constructor. My code returns an array of Blobs from the MediaRecorder: However, when trying to work with this blob in my code, calling new Blob(audioChunks) results in an empty array being outputted. S ...

Develop a stylish contact form using a mixture of HTML5, Bootstrap, and Php

On my website, I have created a contact us form using HTML, Bootstrap, and PHP. The form functions correctly, and messages are successfully received. However, the issue is that upon clicking the submit button, a new page opens up displaying a "Thank you me ...

Redux's 'connect' function fails to recognize changes in the state array

I've recently implemented redux with a reducer that handles an array of time slots for a specific date. Whenever the date is changed, the reducer successfully updates the state (confirmed through console logs in my mapStateToProps function). However, ...

What is the best way to align the bottom of the last child of a flex element?

Current: Desired: Is it possible to achieve this using the flex or grid model, or do I need to reconsider the structure with a different approach? Below is the code snippet: .sections { display: flex; flex-direction: row; flex-wrap: wrap; jus ...

I am having trouble with a basic AJAX script using iframes. The first call returns a null element, but all subsequent calls work perfectly. What am I missing?

An AJAX script that performs the following sequence of actions: Creates a hidden iframe to buffer server-side output Loads PHP content silently into a div using the iframe Copies the PHP output from the server-side div to the parent page div The issue e ...

Dissecting Distinct and Alphabetized Attributes in JSON/JavaScript

Below is a code snippet that retrieves and organizes a list of values from JSON data in alphanumeric order based on a specific key-value pair: var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 &a ...

The Electron application is experiencing difficulties locating the module at /resources/app/index.js

Just started my journey with electron and successfully created my first electron application. It runs perfectly fine with npm start, but I encounter issues when trying to execute it with npm run. (I am using Ubuntu Linux). The command line interface displa ...

Save array data to a file in Node.js once it finishes looping

I've been struggling to find a solution to my issue despite looking at examples from other questions. I have created a basic web scraper in nodejs that stores data in an array and now I need help writing this data to a file. I'm having difficulty ...

Explore using Laravel for your next search project!

I am working on implementing a search feature for multiple models. After setting up the route and html form, I have successfully retrieved the data in my controller. Now, I am looking to query multiple columns and receive the result as an eloquent or array ...

Extract time value from html datetimepicker input

Recently, I've been utilizing a datetime_picker that I found on the web to create a value for an html text input. However, I encountered a problem in separating the value into distinct date and time components. When using the date_picker, the TEXT inp ...

The Bootstrap DateTimePicker is displaying on the screen in an inaccurate

I'm having an issue with the datetimepicker on my project. The calendar appears incorrectly in Chrome, but looks fine in Edge. Here's a screenshot from Chrome: https://i.stack.imgur.com/Hi0j4.png And here is how it looks in Edge: https://i.stac ...

Reading data from a Node PassThrough stream after writing has finished can be achieved by piping the stream

Is it possible to write to a Node Passthrough stream and then read the data at a later time? I am encountering an issue where my code hangs when trying to do this. Below is a simplified example in Typescript: const stream = new PassThrough(); strea ...

Ways to Create a Webpage with a Single Color Palette

Struggling to update the background color on my webpage and hitting a wall. Even with content, the black background only extends as far as the content does. I've experimented with extending the content, using the body selector, and universal selector ...

What are the best ways to enhance change detection efficiency in Angular?

One issue I am facing involves two components and a service. It appears that when moving from the view of a routed component to elements in different components like a matMenu and an input field, the routed component seems to refresh itself. This becomes p ...

Configuring Laravel and Vue together

Good evening, I am encountering an issue while trying to install Vue into my project. The error occurs when I run the command npm run watch. Can anyone provide assistance on how to troubleshoot and resolve this problem? 0 info it worked if it ends with o ...

Why is it that this specific ASP.NET + jQuery + JavaScript custom MVC setup isn't displaying any content?

After attempting to incorporate this JavaScript MVC example from into an ASP.NET page, I am facing issues as a beginner with jQuery. Nothing seems to show up on the page, and I'm unsure why. Update: I have included the missing HTML listbox, but now ...

Utilizing interactions between a JavaScript scrollable container and Python/selenium

My goal is to utilize Selenium/Python in order to automate the process of downloading datasets from . While I am new to Javascript, I am determined to learn and overcome any obstacles that may arise during this project. Currently, I am focusing on the init ...