Add Hours to Time in Jquery Moment Js Example

May 17, 2024 | jQuery


Hello Dev,

This article delves into the intricacies of subtracting hours using jQuery and Moment.js. You'll gain insight into how Moment.js facilitates the subtraction of hours from time. Through this tutorial, we'll provide a clear example of subtracting hours from the current time using Moment.js.

I'll offer a straightforward example utilizing Moment.js' add() method to add hours to a date and the subtract() method to subtract hours from a date.

Read Also: Add Seconds to Time in Jquery Moment Js Example Example 1: Add Hours to Time
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add Hours to Time in Jquery Moment Js Example -- ItErrorSolution.com</title>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
<p id="result"></p>
<p id="result1"></p>

<script>
$(document).ready(function() {
    // Define the number of hours to subtract
    var hoursToSubtract = 2; // Example: subtract 2 hours
    
    // Get the current time
    var currentTime = moment();
    
    // Subtract hours from the current time
    var newTime = currentTime.add(hoursToSubtract, 'hours');
    
    // Display the new time
    $('#result').text("New Time: " + newTime.format('DD/MM/YYYY HH:mm:ss'));
});
</script>
</body>
</html>
Output:
Add Method Time: 17/05/2024 08:32:05
Read Also: How to Subtract Seconds to Datetime in Jquery Moment Js? Example 2: Subtract Hours to Time
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add Hours to Time in Jquery Moment Js Example -- ItErrorSolution.com</title>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
<p id="result"></p>

<script>
$(document).ready(function() {
    // Define the number of hours to subtract
    var hoursToSubtract = 2; // Example: subtract 2 hours
    
    // Get the current time
    var currentTime = moment();
    
    // Subtract hours from the current time
    var newTime = currentTime.subtract(hoursToSubtract, 'hours');
    
    // Display the new time
    $('#result').text("New Time: " + newTime.format('DD/MM/YYYY HH:mm:ss'));
});
</script>
</body>
</html>
Output:
Subtrack Method Time: 17/05/2024 08:32:14

This example demonstrates how to use jQuery and Moment.js to add seconds to the current time, providing a practical way to manipulate and display dynamic times based on user-defined intervals

Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!



Tags :
#jQuery
ItErrorSolution.com

ItErrorSolution.com

"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"