Sorting div based on time(24 hour format) Using jQuery

javascript get current time in 24 hour format
jquery convert 24 hour time to 12 hour
how to set am/pm in javascript
javascript get hours in 12 hour format
javascript time format
javascript date
get hours and minutes from date in javascript
javascript gethours timezone

I am trying to sort my divs based on Time like 07:39 > 16:00 > 21:20


<div id="original"> <div timestamp="99" data-price="4811" data-time="16:00">16:00</div>
<div timestamp="999" data-price="4872" data-time="21:00">21:00</div>
<div timestamp="12" data-price="8586" data-time="07:00">07:00</div>
<div timestamp="11" data-price="5760" data-time="18:00">18:00</div>
<div timestamp="10" data-price="9510" data-time="05:30">05:30</div>
<div timestamp="9" data-price="9510" data-time="13:00">13:00</div>
<div timestamp="8"  data-price="4872" data-time="15:00">15:00</div>
<div timestamp="7" data-price="9510" data-time="14:00">14:00</div>


function Depart() {
var item = $("#original div").sort(function (a, b) {
    var Atime = $(a).attr("data-time");
    var Adt = new Date();
    var Adtparts = Atime.split(':');
    Adt.setHours(Adtparts[0], Adtparts[1], 0, 0);
    var Btime = $(b).attr("data-time");
    var Bdt = new Date();
    var Bdtparts = Btime.split(':');
    Bdt.setHours(Bdtparts[0], Bdtparts[1], 0, 0);

    if (Adt.getTime() > Bdt.getTime()) {
        return 1;
    } else if (Adt.getTime() > Bdt.getTime()) {
        return -1;
    else {
      return  0;




This jQuery function does not work. Can you check and tell me what's wrong in this script? The same script works for data-price.

You have done everything right but forgot to call the function


And also you didn't mention the div maindiv in html. If you needed the sorted values inside the #original div then you can mention $("#original").append(item); instead of $("#maindiv").append(item);

See the working demo here

How do you display JavaScript datetime in 12 hour AM/PM format , format using Native method. </ p >. < div id = "old_time" ></ div >. < script >. // JavaScript Program to display. // current time in 24-hour format. var date = new  Plugin for jQuery Datatables sorting of US-style date and time. Requires month, day and year. Time is optional and can be in 12 or 24 hour formats.


Add maindiv in html & call Depart in jquery.

<div id="maindiv"></div>


How To Create A Countdown Timer Using JavaScript, The Valid end date and time should be a string in any of the formats understood by var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));. How can we compare time in strings? We can use Date object, parse time, get milliseconds from 1970, and compare them. But we have am-pm format here. So, to use Date.parse method, we need to convert time to 24 hour format first (or use Date.js library).

you forgot to call Depart(); function

$( document ).ready(function() {
});, Store arbitrary data associated with the specified element and/or return the value that was set. Store then retrieve a value from the div element. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28 We can retrieve several distinct values for a single element one at a time, or as a set:​  It takes into account formats of 9:15 AM, 09:15, and 09:15:30 though it does not sort based on seconds. You could add that by using || aParts[2] - bParts[2] as a part of the return statement.

OK, I was trying to understand your code. But, was taking too much of time. So, I written something mine. Hope you won't mind.

Well, I have not treated the thing as Date() object, string works fine for this. So, what I have done is:

function Depart() {
    var elms = $("[data-time]", "#original"),
        times = [],
        newTime = [],
        html = $("<div />");

    // Getting Time
        times.push($(this).data("time").replace(":", ""));

    times.sort(); // Sorting
    //times.reverse(); // If required

    // Resetting format
    $.each(times, function(c, obj){
        newTime.push(obj.substr(0,2) + ":" + obj.substr(2,4));

    // Creating new HTML
    $.each(newTime, function(c, obj){
            if($(this).data("time") == obj){

    // Setting the HTML


Here is the working fiddle:

I wish, this helps you!

JavaScript getHours() Method, More "Try it Yourself" examples below. Definition and Usage. The getHours() method returns the hour (from 0 to 23) of the specified date and time. Browser  JavaScript uses the 24-hour format as default for DateTime. However, daytime in JavaScript can be displayed in 12 hour AM/PM format using several approaches. We will look into a couple in this article. In this approach, we will change the DateTime format by only using native methods.

Here is the code without the unnecessary date manipulation. This works because your time is padded with 0s

Live demo

function Depart() {
  var item = $("#original div").sort(function (a, b) {
    var Atime = $(a).attr("data-time");
    var Btime = $(b).attr("data-time");
    if (Atime > Btime) return 1;
    if (Atime < Btime) return -1;
    return  0;
  $("#maindiv").append(item); // or $("#original").append(item); 
Depart(); // execute

I guess you want to execute the depart on load and on click of something:

$(function() {
  $("#depart").on("click",function() {
  }).click(); // assign onload and click it right away

<input type="time">, It also uses a 12- or 24-hour format for inputting times, based on system locale. The value of the time input is always in 24-hour format that includes leading <​form> <div> <label for="appt-time">Choose an appointment time (opening or use JavaScript libraries such as the jQuery timepicker plugin. Given a string str, the task is to check whether the string is valid time in 12-hour format or not by using Regular Expression. The valid time in 12-hour format must satisfy the following conditions: It should start from 1, 2, … 9 or 10, 11, 12. It should be followed by a colon(:). It should be followed by two digits between 00 to 59.

Time Picker, Bootstrap time picker is a jQuery plugin which allows the user to select a time in the Bootstrap 24 hours</label> <i class="fas fa-envelope input-prefix"></i> </​div> </div> </div> <div class="md-form md-outline input-with-post-icon timepicker" id="twelve-hour-clock" class="form-control" placeholder="Select time"> <label  For an internal project we needed a calendar with time picker as well so we have updated UI Datepicker with a 24 hour time picker. The updated js and css files are attached if anyone wants to use them or incorporate back into a future version of UI Datepicker. The new date format codes are HH - Hours II - Minutes SS - seconds.

jQuery Scheduler Widget, The last step is to select the DIV element and to build the widget by calling the jqxScheduler constructor. "HH"- the hour, using a 24-hour clock from 00 to 23;. "m"-the minute, from The culture does not use AM or PM (likely all standard date formats use 24 hour time). // null jqwidgets/styles/jqx.base.css" type="text/​css" />. I need to display 12 hour date format on the Top . Below i need to dispaly the the same time in 24 hour format . I need to use the 24 dateformat (ticking ) in the generation of id . i want something on the form like this . line1----- XXXXXXXXXX 11:27:34 AM. line2----- Current User ID is 232734

JavaScript - Date And Time Library Moment.JS, JS client-side date & time manipulating or formatting library. <body>; <div class​="navbar navbar-inverse navbar-fixed-top">; <div class="container"> <span class="col-xs-4"> // Time in 24-hour format. p>; </center>; </footer>; </div>; <​script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>  This method can also be used to set the minutes, seconds and milliseconds. Browser Support. Date .setHours ( hour, min, sec, millisec ) Parameter Values. Required. An integer representing the hour. Expected values are 0-23, but other values are allowed: -1 will result in the last hour of the previous day. 24 will result in the first hour of the

  • You are not even calling a function
  • Why split and use date at all? It will work just fine as a string. In what universe is this true: 16:00 > 07:39 > 21:20 ?
  • @mplungjan: Any pblm with my answer?
  • Because this is so much easier to understand than the 7 lines necessary?
  • @mplungjan: if I remove the line breaks/white spaces and comments, it will be even less lines of code than the original one.
  • But not more understandable - please see my answer for what I mean.