Combining Date and Time in JavaScript

Hi Experts,
JavaScript newbie!
I have a function which compares two times - start & finish (hh:mm) - gathered from 4 asp:dropdownlists (start hh, start mm, stop hh, stop mm).
However there is now a need to bring dates into the calculation so that if the start time is for example 22:00  today and the stop time is 02:00 tomorrow, the function will correctly calculate a duration of 4hrs and not 'think' that the stop time is before the start time.

I have included two calendar datepickers in the web form which write the selected dates to two asp:textboxes (startdate & enddate)

I presume I can access these as shown below but then I come a bit unstuck as how to enable the function to understand these as dates and bring them into the existing calculations:

var startdate = document.getElementById('<%=TxtStartDate.ClientID%>').value;

Select allOpen in new window

This is the function without dates - which works fine - you'll note just one date variable which isn't really used in the calc:

function TimeDuration() {
            var therate = document.getElementById('<%=DDLRate.ClientID%>').value;
            var date = document.getElementById('<%=TxtDate.ClientID%>').value;
            var starthours = document.getElementById('<%=DDLStartHrs.ClientID%>').value;
            var startmins = document.getElementById('<%=DDLStartMins.ClientID%>').value;
            var endhours = document.getElementById('<%=DDLStopHrs.ClientID%>').value;
            var endmins = document.getElementById('<%=DDLStopMins.ClientID%>').value;
             

            if (date != '' && starthours != '' && startmins != '' && endhours != '' && endmins != '') {
                // SPLIT INTO HOURS AND MIN
                //var ds = start.split(':');
                //var de = end.split(':');
                // WORK OUT DIFF IN MIN
                var diff = (starthours * 60 + startmins * 1) - (endhours * 60 + endmins * 1);
                //var diff = (de[0] * 60 + de[1] * 1) - (ds[0] * 60 + ds[1] * 1);
                // SET THE SIGN IF START > END
                var sign = (diff < 0) ? '' : '';

                // WORK WITH ABS VALUE
                diff = Math.abs(diff);

                // SET THE DIFF IN MINUTES
                //document.getElementById('mindiff').value = sign + diff;

                // CREATE A FORMATTED STRING hh:mm
                var hours = parseInt(diff / 60);
                var min = diff - (hours * 60);

                // LETS PAD THE STRING
                min = "00" + min;
                hours = "00" + hours;
                var hoursdecimal = "";
                var hoursrounded = "";
                var duration = sign + hours.substr(hours.length - 2) + ':' + min.substring(min.length - 2);

                
                if (duration.split(':')[1] >= '00' && duration.split(':')[1] <= '14') {
                    hoursdecimal = duration.split(':')[0] + ".00";
                    hoursrounded = duration.split(':')[0] + ":00";
                }

                if (duration.split(':')[1] >= '15' && duration.split(':')[1] <= '29') {
                    hoursdecimal = duration.split(':')[0] + ".25";
                    hoursrounded = duration.split(':')[0] + ":15";
                }

                if (duration.split(':')[1] >= '30' && duration.split(':')[1] <= '44') {
                    hoursdecimal = duration.split(':')[0] + ".50";
                    hoursrounded = duration.split(':')[0] + ":30";
                }

                if (duration.split(':')[1] >= '45' && duration.split(':')[1] <= '59') {
                    hoursdecimal = duration.split(':')[0] + ".75";
                    hoursrounded = duration.split(':')[0] + ":45";
                }

                // SET THE FORMATTED DIFF
                document.getElementById('<%=TxtDuration.ClientID%>').value = duration;
                // SET THE FORMATTED DIFF
                document.getElementById('<%=TxtDurationRounded.ClientID%>').value = hoursrounded;
                // SET THE FORMATTED DIFF
                document.getElementById('<%=TxtDurationDecimal.ClientID%>').value = hoursdecimal;


                if (therate == "2" && starthours != "--hh--" && startmins != "--mm--" && endhours != "--hh--" && endmins != "--mm--" && duration > "03:30") {
                    alert('Text goes here');
                    document.getElementById('<%=DDLStopHrs.ClientID %>').value = "";
                    document.getElementById('<%=DDLStopMins.ClientID %>').value = "";
                    document.getElementById('<%=TxtDuration.ClientID%>').value = "00:00";
                    document.getElementById('<%=TxtDurationRounded.ClientID%>').value = "00:00";
                    document.getElementById('<%=TxtDurationDecimal.ClientID%>').value = "00.00";
                }

                if (therate != "3" && starthours != "--hh--" && startmins != "--mm--" && endhours != "--hh--" && endmins != "--mm--" && duration < "01:00" && duration >= "00:00") {
                    alert('Text goes here)

                    document.getElementById('<%=DDLStopHrs.ClientID %>').value = "";
                    document.getElementById('<%=DDLStopMins.ClientID %>').value = "";
                    document.getElementById('<%=TxtDuration.ClientID%>').value = "00:00";
                    document.getElementById('<%=TxtDurationRounded.ClientID%>').value = "00:00";
                    document.getElementById('<%=TxtDurationDecimal.ClientID%>').value = "00.00";
                }

                //if (starthours != "--hh--" && startmins != "--mm--" && endhours != "--hh--" && endmins != "--mm--" ) {
                
                
                //}
            }
            var start = (starthours * 60 + startmins * 1);
            var end = (endhours * 60 + endmins * 1);

            if (starthours != "--hh--" && startmins != "--mm--" && endhours != "--hh--" && endmins != "--mm--" && start >= end) {

                alert('End time should be after start time.');
                document.getElementById('<%=DDLStopHrs.ClientID %>').focus();

            }


        }
    </script>

Select allOpen in new window

And this should give you an idea of what I'm trying to do (when you've stopped laughing some help would be really good) thanks in advance...

function TimeDuration() {
            var therate = document.getElementById('<%=DDLRate.ClientID%>').value;
            var startdate = document.getElementById('<%=TxtStartDate.ClientID%>').value;
            var enddate = document.getElementById('<%=TxtEndDate.ClientID%>').value;
           var starthours = document.getElementById('<%=DDLStartHrs.ClientID%>').value;
            var startmins = document.getElementById('<%=DDLStartMins.ClientID%>').value;
            var endhours = document.getElementById('<%=DDLStopHrs.ClientID%>').value;
            var endmins = document.getElementById('<%=DDLStopMins.ClientID%>').value;

            function parseDate(str) {
                var mdy = str.split('/')
                return new Date(mdy[2], mdy[0] - 1, mdy[1]);
            }

            function daydiff(startdate, enddate) {
                return (enddate - startdate) / (1000 * 60 * 60 * 24);
            }

            alert(daydiff(parseDate($('#startdate').val()), parseDate($('#enddate').val())));

            if (startdate != '' && starthours != '' && startmins != '' && enddate != '' && endhours != '' && endmins != '') {
                // SPLIT INTO HOURS AND MIN
                //var ds = start.split(':');
                //var de = end.split(':');
                // WORK OUT DIFF IN MIN
               var diff = (startdate + (starthours * 60 + startmins * 1)) - (enddate + (endhours * 60 + endmins * 1));
                //var diff = (de[0] * 60 + de[1] * 1) - (ds[0] * 60 + ds[1] * 1);
                // SET THE SIGN IF START > END
                var sign = (diff < 0) ? '' : '';

                // WORK WITH ABS VALUE
                diff = Math.abs(diff);

                // SET THE DIFF IN MINUTES
                //document.getElementById('mindiff').value = sign + diff;

                // CREATE A FORMATTED STRING hh:mm
                var hours = parseInt(diff / 60);
                var min = diff - (hours * 60);

Select allOpen in new window