Interactive calendar control for selecting dates in JavaScript

I have implemented two date inputs in my PHP form:

  • Arrival Date
  • Departure Date

Currently, when the Date Icon is selected, it displays the CURRENT DATE AND MONTH.

What I am looking for is that when the user selects the Arrival Date first and then the Departure Date, the DATE ICON should pop up based on the Arrival date.

For example - If I select July 8th as the Arrival Date, then when I click on the Departure date icon, it should default to July 8th.

This would enhance user-friendliness by formatting the second drop-down box in this manner.

javascript

Answer №1

Transform this on the initial date entry, input onchange="somefunc()"

function somefunc()
{
 document.getElementById('Departure').value= document.getElementById(Arrival).value;
}

Then go back to your calendar I recommend using to enhance your experience

Answer №2

The issue was resolved by implementing onblur() in place of onchange..Many thanks! –

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

What is the best method for determining values within JSON data?

In my possession is a JSON file containing user data that looks like this: [ { "id": 0, "username": "Antony", "users": [ { "id& ...

javascriptjqueryjson

The order of console outputs can be inconsistent and may not always align with the order in which they are called

Hello there! I'm diving into the world of JavaScript and have a query to share on Stackoverflow. If something seems missing in my question, please do point it out for me. Question 1: Can someone shed light on why the output sequence in the console s ...

javascriptconsole.logfunction-expression

An express error caught off guard: Unexpected "write after end" issue detected

My current goal is to create a proxy for an api call from the client side through my server for a third party service. The main reasons for implementing this proxy are due to CORS issues and the need to include a secret key on the server side for added sec ...

javascriptnode.jsapiexpress

The onClick functionality for the IconComponent (dropdown-arrow) in React Material UI is not functioning properly when selecting

I have encountered a problem in my code snippet. The issue arises when I attempt to open the Select component by clicking on IconComponent(dropdown-arrow). <Select IconComponent={() => ( <ExpandMore className="dropdown-arrow" /> )} ...

javascriptreactjsmaterial-ui

Having trouble with setting up the next image configuration for graphcms' images

I've been using graphcms solely for my image assets and trying to integrate them into my Next JS (v12.0.1) frontend. However, I keep getting the error message hostname not configured in next.config.js, even though I have already specified it in my nex ...

javascriptreactjsgraphqlnext.jsapollo-client

Surprising results from implementing the useLocation() hook in a React application

Currently, I am embarking on a personal endeavor to create an online auction platform. One of the key functionalities I am working on is rendering detailed product information when a user clicks on a specific product for purchase. Initially, everything wor ...

javascriptnode.jsreactjsexpress

Can a JavaScript object be created in TypeScript?

Looking for a way to utilize an existing JavaScript "class" within an Angular2 component written in TypeScript? The class is currently defined as follows: function Person(name, age) { this.name = name; this.age = age; } Despite the fact that Java ...

javascriptangulartypescript

Navigating the implementation of undefined returned data in useQuery hook within Apollo and ReactJS

I am facing an issue with my code where the cookieData is rendered as undefined on the initial render and query, causing the query to fail authentication. Is there a way to ensure that the query waits for the response from the cookie API before running? co ...

javascriptreactjsgraphqlnext.jsapollo

What causes the circular progress bar to disappear when hovering over the MUI React table?

My goal was to create a table with a CircularProgressBar that changes its background color from orange to dark blue when hovering over the row. However, despite my efforts, I couldn't get it to work as intended. Additionally, I wanted the progressBar ...

javascripthtmlcssreactjsmaterial-ui

Ways to retrieve the complete user object in passport

Recently, I've been diving into utilizing Express authentication with Passport and React for the frontend. While working on this project, a question came up: How can I access the entire authenticated user object? This is what my database model looks l ...

javascriptreactjsexpresspassport.jspassport-local

The trio of Javascript, Ajax, and FormData are

I'm struggling with sending form values to a PHP file. Here's the code I have: <form role="form" id="upload_form" method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="formlabel">Title< ...

javascriptphpajax

Ways to confirm the presence of strings within an array?

For instance: var array = ["apple", "banana", "cherry", "date", "elderberry", "fig"]; What is the best way to determine if "apple", "banana", and "cherry" are present in the array? I attempted using the indexOf() method but struggled to check for multip ...

javascriptarraysstring

Encountering issue while static generating project: Cannot find resolution for 'fs' module

I am encountering an issue in my Next.js app when trying to serve a static file. Each time I attempt to use import fs from 'fs';, an error is thrown. It seems strange that I have to yarn add fs in order to use it, as I thought it was not necessa ...

javascriptnode.jsnext.js

I find the SetInterval loop to be quite perplexing

HTML <div id="backspace" ng-click="deleteString(''); decrementCursor();"> JS <script> $scope.deleteString = function() { if($scope.cursorPosVal > 0){ //$scope.name = $scope.name - letter; ...

javascripthtmlcssangularjs

Having trouble choosing the component-button using Protractor

I'm having trouble selecting the "Add New" button using any locator component. Check out the audience.po.ts file and the method "ClickAddNewBtn()": clickAddNewBtn() { console.log("Clicking on the Add New button."); return element(by.cs ...

javascriptangulartypescriptprotractor

Ways to repair the mouse hover transform scale effect (animation included)

I am currently facing an issue with my GridView that contains images. When I hover over the top of the image, it displays correctly, but when I move to the bottom, it does not show up. After some investigation, I suspect that there may be an overlay being ...

javascriptjqueryasp.netcss

React Redux - There is an error during rendering as expected props have not been received yet

After retrieving data from an API and storing it in the Redux state, I utilize a helper function within mapStateToProps to filter and modify a portion of that data before passing it along as props. Although everything appears to be functioning correctly b ...

javascriptreactjsreduxrenderlifecycle

Struggling with displaying MySQL data in JSON format using Highcharts

Currently, I am attempting to display data from a PHP file on an area graph by using the example found here. Initially, all the data was commented out before being passed to the array. Now, my focus is solely on displaying one portion of the data. I suspec ...

javascriptphpmysqljsonhighcharts

What steps can I take to display a download button when a file is clicked on?

As a backend developer, I usually don't delve into JavaScript tasks, but I have a simple query for JavaScript developers that I need help with. Here is my question: I am trying to display a download button when a specific file is clicked using jQuery ...

javascriptjquerynode.jsreactjs

Is there a way to display a date that is two days before the current date in a React date picker using only vanilla JavaScript

Greetings, I am currently immersed in working with a Shopify app that utilizes React. Unfortunately, I do not have access to their code base or API. The challenge at hand is sending the correct delivery date to the Shopify system. The app currently allows ...

javascriptapishopify