What is the best way to retrieve the current hour from a time attribute?

Is there a way to update the time property, messagesList in VueCLI, with the current time when a button is clicked? The time property should have both integer and decimal parts. For example: (23.14)

Here is the available data:

 messagesList : [
            {
              id : 1,
              content : "My message",
              opposite : false,
              me : true,  
              time : 23.13,   
            },
             {
              id : 2,
              content : "Opposite party's message",
              opposite : true,
              me : false,  
              time : 23.13,   
            }
          ],

Here is the code snippet for adding new messages:

this.messagesList.push(
    {
        id : this.messagesList.length + 1,
        content : this.inputText,
        opposite : false,
        me : true,
        time : ?,
    }

Answer №1

To customize the time format displayed when adding a message, you can create a function that returns the current time in your preferred format and then execute it while inserting the message.

Below is an example of the function:

function getTime() {
    return parseFloat(`${new Date().getHours()}.${new Date().getMinutes()}`)
}

Here's how it would be implemented in your code to add a message to the messageList:

this.messagesList.push({
    id: this.messagesList.length + 1,
    content: this.inputText,
    opposite: false,
    me: true,
    time : getTime(),
}

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

Modifying Owlcarousel 2 settings post initialization

I've encountered an issue with the settings of a carrousel plugin I'm using. I've tried to change the loop and nav options but it doesn't seem to be working. Here is the code snippet: var owl = $(".owl-carousel").owlCarousel({loop: tru ...

Hello there! I'm a beginner in React js and I was wondering if you could assist me in transforming this class component into

Hey there! I have the following code snippet and I'm looking to convert this class component to a functional component in React js. I'm new to React and could use some guidance on how to achieve this. My goal is to create a button that, when clic ...

Verify whether the PouchDB database contains any data

Currently, I am developing an application that utilizes PouchDB for local data storage. The app showcases a list of items and my goal is to determine whether the database is empty. This way, if it happens to be empty, I can dynamically add a message ' ...

next-redux-wrapper is being invoked repeatedly and experiencing multiple calls to HYDRATE

I'm embarking on a new Next.js project, transitioning from a standard React app to a Next.js application. Our plan is to utilize Redux Toolkit for global state management and incorporate server-side rendering. During this process, we discovered the ne ...

Sometimes jQuery may require multiple executions with just one click

Content of index.php <script type="text/javascript" src="//<?php echo $_SERVER["SERVER_NAME"];?>/javascript/jquery-1.10.2.min.js" ></script> <script type="text/javascript"> $(document).ready(function() { $( document ).on( 'c ...

Native JavaScript does not handle AJAX responses correctly

I'm facing an issue with my ajax call where the returned HTML works well on changes, but the Javascript that should perform actions based on clicks within the results is not functioning properly. Here is the ajax call: function update_order_shipp ...

Troubleshooting: React js Project console.logs are not being displayed in the browser's

When working on my current project, I noticed that any time I try to use console.log in the dev tools, it shows as cleared. Strangely, console.log works fine in my other projects. Does anyone have an idea how to resolve this issue? Here is a screenshot of ...

Problem with pushing JavaScript objects into arrays

When running a function to fetch data from an API and push it into an array within a loop, I encountered an issue. The resulting discount array appears empty [], but upon inspection, it contains one object. Even though its length shows as 0, the array does ...

React's useEffect delay instability

Currently, I am in the process of creating a Pomodoro clock. My approach involves utilizing the useEffect and setTimeout functions to develop countdowns. Initially, everything appeared to be running smoothly until I noticed a delay ranging from 30ms to 50m ...

Tabledit failing to send post request

I recently integrated tabledit into a webpage, following various examples. However, the plugin is not functioning as expected - nothing is being posted and the result is empty. I am unsure how to get the posting feature to work properly. Can you offer me s ...

Prompting for confirmation when the "Close Button" is clicked in Bootstrap V5 Alert Dismissing

Looking to enhance the user experience by incorporating Sweetalert2 for a confirmation message within the Bootstrap version 5 alert component. Curious how it operates? Upon clicking the "Close Button" (X), the intention is to trigger a confirmation messa ...

Issues with javascript and php carousel functionality not performing correctly

I am currently in the process of creating a slideshow/carousel for a website. Recently, I implemented a PHP for-loop to iterate through a folder of images, allowing me to use the slideshow with an unspecified number of images. However, after making this ch ...

Show a pair of pictures every X hours using Javascript

Trying to create a code that displays different pairs of images each day, but struggling to make it select them randomly. Instead, the code currently just goes through the array one by one. I'm not great with Javascript and haven't found a way to ...

What steps are needed to successfully enable the callback function within the addFilter method from @wordpress/hooks while customizing the tables in WooCommerce analytics reports?

I've been diving into customizing Analytics reports tables for clients on our WooCommerce platform. I followed a guide at this link, but encountered an issue with the JavaScript file. After adding the filter at the end of the file as instructed, noth ...

Using JS or jQuery to organize JSON data into a multidimensional array

Dealing with frontend processing of a response from a server that provides event reviews for the season has been challenging. In this case, there can be multiple reviewers for the same event and the simplified version of the response appears as follows: [ ...

Frontend experiencing issues with Laravel Echo Listener functionality

I have recently developed a new event: <?php namespace App\Events; use Illuminate\Broadcasting\Channel; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Broadcasting\PresenceChannel; use Illuminate&bs ...

Registering users in Laravel using asynchronous JavaScript and XML (AJ

I am having trouble implementing a user registration process using ajax in the Laravel framework. Routes Route::get('/register', 'Auth\AuthController@getRegister')>name('register'); Route::post('/register', ...

JavaScript nested function that returns the ID of the first div element only upon being clicked

I am facing an issue with a function that returns the id of the first div in a post when an ajax call is made. The problem is that it repeats the same id for all subsequent elements or div tags. However, when the function is used on click with specified ...

Unable to authenticate with Firebase using ReactJS

I am currently working on developing a basic registration and login system using firebase authentication. However, I am facing an issue where the user appears to be saved when I restart the site in console.log, but the application redirects them back to th ...

How to implement jquery select functionality on clickable table rows?

I've come across a challenge while trying to implement clickable table rows with the jquery selectable function. Everything works perfectly fine with li elements, but I seem to hit a roadblock when using tables - the click event just stops working. Wh ...