Exploring how to compare time in hh:mm format using JavaScript

After switching to 24-hour format for my strings, I'm confused as to why the times are not comparing correctly. What am I doing incorrectly?

function convertToTwentyFourHourTime(amPmString) { 
        var d = new Date("1/1/2013 " + amPmString); 
        return d.getHours() + ':' + d.getMinutes(); 
    }

    var inputStartTime = "6:00 AM";
    var inputEndTime = "10:00 PM";

    var startTime = convertToTwentyFourHourTime(inputStartTime); 
    var endTime = convertToTwentyFourHourTime(inputEndTime); 

    if(startTime < endTime){
        alert("It's working!");
    }
javascript

Answer №1

The reason for the issue is due to the comparison of Strings in your code. When you use 

return d.getHours() + ':' + d.getMinutes();
, it converts the result into a string format, causing "6:0" to be considered greater than "22:0". To resolve this, you can simply return d instead.

function getTwentyFourHourTime(amPmString) { 
    var d = new Date("1/1/2013 " + amPmString); 
    return d; 
}

var inputStart = "6:00 AM";
var inputEnd = "10:00 PM";

var startDay = getTwentyFourHourTime(inputStart); 
var endDay = getTwentyFourHourTime(inputEnd); 


if(startDay < endDay){
alert("works!");
}

Feel free to check out the live demonstration here.

I hope this explanation clarifies the issue for you.

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

Switch out multiline text with javascript

Could someone assist me with this question? I am attempting to locate and replace specific code within a JavaScript file. The code is included in an AJAX response that contains a significant amount of HTML code. After retrieving the AJAX response, I stor ...

javascriptjqueryajaxstringreplace

Is your Angular 2 routing failing to work properly after a page refresh or reload when using gulp?

I've recently started learning Angular 2, and I encountered an issue with routing. During the development phase, I ran my application using npm start. However, after migrating to gulp.js, when I run the application by typing gulp, everything works fin ...

javascriptangularroutesgulp

Is it advisable to use npm devDependencies in a production environment?

While reviewing the package.json file for one of our products at work, I noticed that the SDK uses socket.io for a crucial function even though socket.io-client is listed as a devDependency. Despite this discrepancy, the SDK works flawlessly for our clie ...

javascriptnpm

Return the information from Node.js to the JavaScript on the client side

My goal is to establish a fetch connection from client-side JS to the server Node.JS. When a person clicks on a button in HTML, it triggers a search in the MongoDB database on the server side. Once the element is found, I am unsure how to send that informa ...

javascriptnode.jsexpress

Add styling to a window popup and close it when focus is lost in Ext JS

I am trying to implement a specific functionality where the popup arrow should be at the edge of the textbox as shown in the image below. How can I achieve this? Additionally, how can I make sure that clicking outside the control destroys the popup instead ...

javascriptcssextjstextboxpopover

mentioning someone using the @ symbol

I am currently in the process of creating a tagging system for users. I have almost completed it, but there is one issue that I cannot seem to figure out. I know what the problem is, but I am struggling to come up with a solution. When I input the @ sign ...

javascriptphpjqueryajax

The radio button element could not be located using the attribute "checked="Checked""

While working with Geb, I encountered an issue using the code div.find("input","checked":contains("checked")). This is the snippet of code I attempted to use in order to locate the checked radio button on a webpage. However, I received an error when using ...

javascripthtmlcssseleniumgeb

The Outer Div Can't Contain Google Maps

I am currently working on integrating a map widget into a dashboard I created using gridstack.js. The sample widget layout that I am aiming for can be seen in the link below: https://i.sstatic.net/ZQP6G.png My goal is to embed the map within the inner (w ...

javascripthtmlcssgoogle-mapsgridstack

Using async/await with Axios to send data in Vue.js results in different data being sent compared to using Postman

I am encountering an issue while trying to create data using Vue.js. The backend seems unable to read the data properly and just sends "undefined" to the database. However, when I try to create data using Postman, the backend is able to read the data witho ...

javascriptnode.jsvue.jsasync-awaitaxios

Instructions for returning a function from within another function and then displaying it upon return

My current state: constructor(props) { super(props); this.state = { temperatureConversion: '', Here is the function I'm using: handleChange = async (value) => { this.setState({ value }); await Axios.ge ...

javascriptreactjs

Do I need to make any changes to the application when adding a new couchbase node to the cluster

Currently, I am utilizing the Node.js SDK to establish a connection with a couchbase cluster. Despite this, in the Node.js documentation, there is no clear instruction on how to input multiple IP addresses (of cluster nodes) when creating the cluster objec ...

javascriptnode.jssdkcouchbase

Launching a React build using Docker on Apache or AWS

I am a beginner to the world of docker and react. My goal is to successfully deploy a production build on AWS. Here are the steps I have taken so far: Created a dockerfile. Built and ran it on the server. npm run and npm run build commands are functionin ...

javascriptreactjsapacheamazon-web-servicesdocker

Accessing Next and Previous Elements Dynamically in TypeScript from a Dictionary or Array

I am new to Angular and currently working on an Angular 5 application. I have a task that involves retrieving the next or previous item from a dictionary (model) for navigation purposes. After researching several articles, I have devised the following solu ...

javascriptangulartypescript

The utilization of useState can potentially trigger an endless loop

Currently, I am in the process of developing a web application using Next.js and Tailwind CSS. My goal is to pass a set of data between methods by utilizing useState. However, I have encountered an issue where the application loads indefinitely with excess ...

javascriptreactjswebnext.jsuse-state

How to effectively manage time and regularly execute queries every second using Node.js?

Currently working on developing a web software using node js with an Mssql database. There is a table in the database that includes a datetime value and a bit value. The bit value remains at 0 until the real-time matches the datetime value, at which point ...

javascriptsqlnode.jssql-serverajax

Tips for maintaining video height consistency while adjusting its attributes

When you click on a button, the video's poster and src attributes change. However, after clicking, the video height briefly becomes 0, causing an unsightly effect on the entire page. How can this be avoided? Please note - lorem.mp4 and ipsum.mp4 hav ...

javascripthtmljqueryvideo

Reply after performing several asynchronous queries using mongoose and express

When trying to create a list of products to send to a client, I am encountering an issue where res.send executes before the loop has completed. I have tried using async/await but it doesn't seem to work. Any suggestions on how to resolve this? Below ...

javascriptnode.jsreactjsexpressmongoose

automatically created button, form control named 'answer' that is not valid

Struggling with a challenge in attaching an event to a dynamically generated button. Despite conducting some research, most of the solutions suggest that this issue is typically related to a form control. However, in my scenario, the error "invalid form co ...

javascriptjqueryhtmlforms

Tips for configuring CakePHP to trigger the second submit button when the enter key is pressed

My form includes two submit buttons: "cancel" and "find." While both buttons work correctly when clicked, pressing the enter key always triggers the submission of "cancel." I don't want to change the button order in the form. To address this issue, I ...

javascriptphpformscakephp

Initiating a click function for hyperlink navigation

Here is the HTML and JavaScript code that I am currently working with: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <a href="#f ...

javascriptjqueryhtmlcss