MateiralizeCSS Timepicker: How to find the time difference between two time pickers, with a space before AM/PM, using momentJS?

Question

How can I find the time difference between two time pickers in MaterializeCSS, while also having a space before AM/PM and momentJS? I want a space before AM/PM because that will allow me to use it internationally.

Example:

Timepicker 1 = 8:00 AM Timepicker 2 = 5:00 PM

Find: Timepicker 2 - Timepicker 1 in HH:mm format

We tried without spaces and it failed. We then tried with spaces and it worked, but we cannot change the format property of the MaterializeCSS timepicker component. We are not using the 'HH:mm:ss' format (24 hour format). We want to use the 'HH:mm t' formart

Here is our Attempt:

    $('#tTimeEntryStarted, #tTimeEntryEnd').pickatime({
        default: '00:00', // Set default time: 'now', '1:30AM', '16:30'
        fromnow: 0,       // set default time to * milliseconds from now (using with default = 'now')
        twelvehour: true, // Use AM/PM or 24-hour format
        donetext: '', // text for done-button
        //cleartext: 'Clear', // text for clear-button
        min: undefined,
        max: undefined,
        canceltext: '', // Text for cancel-button,
        container: undefined, // ex. 'body' will append picker to body 
        autoclose: true, // automatic close timepicker
        ampmclickable: true, // make AM PM clickable
        aftershow: function () { } //Function for after opening timepicker
    });

Following works as space added:

 console.log(moment( new Date(moment(new Date()).format('MM/DD/YYYY') + " " + $("#tTimeEntryEnd").val().replace("AM"," AM").replace("PM"," PM")) -  new Date(moment(new Date()).format('MM/DD/YYYY') + " " + $("#tTimeEntryStarted").val().replace("AM"," AM").replace("PM"," PM")), 'HH:mm'))

The following does not work, but we want something like this so that we can use this internationally (ex: replacing "AM" with " AM" will not work in China, as they have something else for AM):

 console.log(moment( new Date(moment(new Date()).format('MM/DD/YYYY') + " " + $("#tTimeEntryEnd").val()) -  new Date(moment(new Date()).format('MM/DD/YYYY') + " " + $("#tTimeEntryStarted").val()), 'HH:mm'))

The following two will not work. as there is no space before AM:

new Date("2018/1/1 " + moment($("#tTimeEntryEnd").val(), 'hh:mm a'))
new Date("2018/1/1 8:30AM")

The following works, because there is a space before AM, but we cannot change the MaterializeCSS time picker format as HH:mm T:

new Date("2018/1/1 8:30 AM")

Possible duplicate of https://stackoverflow.com/questions/18623783/get-the-time-difference-between-two-datetimes — Tanmay, Jun 28 '18 at 10:47

Muhammad Usman · Answer 1 · 2018-06-28T10:45:19.373

0

You can first create a moment with the given times with

moment("8:00 AM", 'hh:mm a')

and same for the other/end time. And then take the difference between them in hours or minutes for example

var startTime = moment("8:00AM", 'hh:mm a'),
     endTime = moment("5:00PM", 'hh:mm: a');
    
 console.log("in hours", endTime.diff(startTime, 'hours'))
 
 console.log("in minutes", endTime.diff(startTime, 'minutes'))

<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>

edited Jun 28 '18 at 10:45

answered Jun 28 '18 at 10:33

Muhammad Usman

10,039
22
39

Materialize doesn't use Moment, does it? – Luca Kiebel Jun 28 '18 at 10:39
Thank you for the response! The issue with MaterializeCSS is that there is no space before AM/PM of the timepicker (ex: 8:00AM v 8:00 AM). Is there a way to format the timepicker? – SajithG Jun 28 '18 at 10:40
1

@Luca I am not sure. I just saw the question tagged with `momentjs`. So, OP may be using it – Muhammad Usman Jun 28 '18 at 10:41
@SajithG doesn't matter if there is space between or not. This will work – Muhammad Usman Jun 28 '18 at 10:45
you can test with adding a space between and without a space – Muhammad Usman Jun 28 '18 at 10:46
We are using momentJS. We tried without spaces and it failed. We then tried with spaces and it worked. – SajithG Jun 28 '18 at 10:48
you can add that attempt with your question, so I can have a look at it – Muhammad Usman Jun 28 '18 at 10:49
_We tried without spaces and it failed. We then tried with spaces and it worked_ add that **attempt** – Muhammad Usman Jun 28 '18 at 10:56
Just use ` moment($("#tTimeEntryEnd").val(), 'hh:mm a'),` and similar for the start and use the code to get the difference what I've posted above – Muhammad Usman Jun 28 '18 at 11:07
That won't work unfortunately, I will edit the question and demonstrate why. – SajithG Jun 28 '18 at 11:13
Edited question, and I hope it's more clear now. We need 'HH:mm t' but by default the component won't add the SPACE before AM/PM. Many thanks. – SajithG Jun 28 '18 at 11:43

MateiralizeCSS Timepicker: How to find the time difference between two time pickers, with a space before AM/PM, using momentJS?

1 Answers1