The addition of days is producing an incorrect result

When extracting the date from FullCalendar and attempting to edit it, I noticed that moment.js seems to overwrite all previously saved dates. Here is an example of what's happening:

var date_start = $calendar.fullCalendar('getView').start.toDate();
date_start.setHours(0);
var date_end = $calendar.fullCalendar('getView').start.toDate();
date_end.add(1, "days");
console.log("start => " , date_start);
console.log("end => " , date_end)

The result returned shows:

start => Sat Oct 24 2015 00:00:00 GMT+0200 (Central Europe Standard Time)
end => Sat Oct 24 2015 00:00:00 GMT+0200 (Central Europe Standard Time)

However, the correct end date should be:

end => Sun Oct 25 2015 00:00:00 GMT+0200 (Central Europe Standard Time)

It should be noted that I am saving the end date as the start date because of a bug in this extension, which causes the resource to be split across multiple days within a single day.

My issue is specifically related to the line date_end.add(1, "days"); as it appears to replace all dates with the value of the date_start variable.

JSFiddle Link

javascriptfullcalendarmomentjs

Answer №1

Each time you are using the same reference to the date object.

For the second one, it is recommended to create a new object.


var date_start = $('#calendar').fullCalendar('getView').start.toDate();
date_start.setHours(0);
// create a new instance
var date_end = moment(date_start);
date_end.add(1, "days");
console.log("start => ", date_start);
console.log("end => ", date_end.toDate());

Check out the DEMO here

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 causes the Object expected error in jQuery?

Looking for a way to demo horizontal collapse pane with a simple web page that includes html, css, and jquery. <html> <head> <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> <title>Sa ...

javascriptjqueryhtmlcssdebugging

Trouble arises when attempting to transfer cookies between server in Fastify and application in Svelte Kit

In the process of developing a web application, I am utilizing Fastify for the backend server and Svelte Kit for the frontend. My current challenge lies in sending cookies from the server to the client effectively. Despite configuring Fastify with the @fas ...

javascripttypescriptcookiessveltefastify

Implementing CSS styling within a JavaScript file

I have a vague memory of an easy way to incorporate CSS code within a JS file, but I can't recall the specific details. Simply inserting CSS code into a JS file doesn't seem to work, so there may be a need for comments or some other method. *No ...

javascripthtmlcss

Display an array containing date objects in a dropdown menu for users to select from

I am working with an API call that returns an array of objects. Each object in the array contains a date or timestamp in ISO format. Right after my render() method, I have the following code snippet: const pickerItems = this.props.currentData.trips.map(t ...

javascriptreactjsreact-native

Converting CommonJS default exports into named exports / Unable to load ES module

I've encountered an issue while creating a Discord bot with discord.js using TypeScript. When attempting to run the resulting JavaScript code, I'm facing an error that states: import { Client, FriendlyError, SQLiteProvider } from 'discord.js ...

javascriptnode.jstypescriptdiscord.jscommonjs

Create a solution that is compatible with both web browsers and Node.js

I am developing a versatile library that can be utilized in both the browser and in node environment. The project involves three json config files, with the latter two extending the tsconfig.json. tsconfig.json (contains build files) tsconfig.browser.js ...

javascriptnode.jstypescriptbrowser

Expo + tRPC: Oops! Looks like the application context couldn't be retrieved. Don't forget to wrap your App inside the `withTRPC` HoC for

I'm currently working on a straightforward tRPC server setup: // server.ts import { initTRPC } from "@trpc/server"; import { z } from "zod"; const t = initTRPC.create(); export const appRouter = t.router({ greeting: t.procedu ...

javascripttypescriptreact-nativeexpotrpc.io

I'm experiencing some strange symbols on my page that look like ''. It appears to be a problem occurring between the servlet and the Javascript. How can I resolve this issue?

After retrieving a CSV file from my servlet, I noticed that characters like 'é', 'á' or 'õ' are not displaying properly on my page. Strangely, when I access the servlet directly via browser, everything appears fine. I atte ...

javajavascriptjqueryjspservlets

Update the network name in the Axios request

Currently, I am utilizing Axios for handling both GET and POST requests. One question that has been on my mind is how to modify the network name: At present, the name serves as the parameter accompanying each request. However, I ponder whether it's f ...

javascriptvue.jsaxios

Providing properties to the main Vue.js components

An Issue I'm Facing I am currently attempting to pass a prop to my root constructor. To achieve this, I have been exploring the use of propsData, which I learned about from this resource: var appComponent = Vue.component('app', require(&ap ...

javascripttypescriptvue.js

Create a small circle in the bottom left corner with a constrained size

I'm trying to create a circle at the top of the screen on mobile, similar to the image below. The circle should take up a percentage of space, with the rest of the content appearing against a blue background as shown in the image. However, I'm h ...

javascripthtmlcssvue.jsvuetify.js

JavaScript Glitches

Embarking on the journey of web design and programming, I am venturing into the world of creating a simple gallery using JavaScript. Despite the convenience offered by jQuery, unfortunately, it is off-limits for this particular assignment. The challenge l ...

javascripthtml

Generate a graph showcasing the frequency of character occurrences within a specific column of a .csv file

I'm currently working on creating a graph using d3.js What I need to accomplish is reading the some_column column in a .csv file and counting the occurrences of | to plot them accordingly on the y-axis. The line should be plotted based on the number ...

javascriptd3.js

Exploring React JS Subdomains

I have been developing a MERN application that needs to support dynamic subdomains for each company, like companyname.localhost. In order to make this work, I made an adjustment in my .env file with the line: DANGEROUSLY_DISABLE_HOST_CHECK=true After a us ...

javascriptnode.jsreactjsexpresssubdomain

Utilizing Vue's v-for directive to display computed properties once they have been fully loaded

Utilizing the v-for directive to loop through a computed property, which is dependent on a data attribute initialized as null. I'm planning to load it during the beforeMount lifecycle hook. Here's a simplified version of the code: <th v-for= ...

javascriptvue.js

Utilizing Vuex state within Vue-Router route definitions

My Vuex store setup in main.js looks like this: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //initialize the store const store = new Vuex.Store({ state: { globalError: '', user: { ...

javascriptvue.jsvuejs2vue-routervuex

What is the best way to save geolocation coordinates in a Javascript array?

I am attempting to utilize HTML5 geolocation to determine a user's location and then store the latitude and longitude coordinates in an array for future use with Google Maps and SQL statements. However, when I attempt to add these coordinates to the a ...

javascriptarrayshtmlgeolocation

refresh Laravel 5.1 webpage content seamlessly without page reloading

Is there a way to update page content in Laravel 5.1 every second without reloading the page for all users? Here is my current view: I'm trying to refresh data without reloading the page using a foreach loop, but I'm not sure how to accomplish ...

javascriptphpjqueryjsonlaravel

Adjust the counter by increasing or decreasing based on the selection or deselection of tags

Currently, I am utilizing Next.js to manage a question form that consists of multiple questions with multiple answers. Users have the option to select one or multiple tags for each question. When a user selects one or more tags to answer a question, it sho ...

javascriptreactjsnext.js

What is the best way to create a case-insensitive search feature in Node.js?

I have implemented a search function that takes input from the client as Str. If it matches with content in a file, I send that response. For example, if I have text in a file labeled Lorem, and the client searches for lorem, it returns an empty array due ...

javascriptnode.jssearch