YVS1102 YVS1102 - 3 months ago 7
Javascript Question

Check if valid hh:mm format with Moment.js

I'm trying to sum time (format

hh:mm
) from table with Moment.js.

Here is my js:

function timemanage(){
$('.lebih').each (function() {
if(moment('.lebih', 'hh:mm').isValid()){
var value = $(this).text();
if(!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
$('.jamlebih').val(sum);

}else{
alert("No");
}
});
}

$(document).ready(function(){
timemanage();
});


Here is my table:

<table class="table">
<thead>
<tr>
<td> No </td>
<td> Full Name </td>
<td> Attendance Date </td>
<td> In Time </td>
<td> Out Time </td>

<td> Waktu Lebih </td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>[1602744] - RAHMAT </td>
<td>2016-08-28</td>
<td class="jammasuk">
08:55:00
</td>
<td class="jampulang">
16:03:00
</td>
<td class="lebih">Jam Kerja Kurang Dari 8 Jam</td>

</tr>
<tr>
<td>2</td>
<td>[1602744] - RAHMAT </td>
<td>2016-08-29</td>
<td class="jammasuk">
08:55:00
</td>
<td class="jampulang">
16:03:00
</td>
<td class="lebih">Jam Kerja Kurang Dari 8 Jam</td>

</tr>
<tr>
<td>3</td>
<td>[1602744] - RAHMAT </td>
<td>2016-08-30</td>
<td class="jammasuk">
08:55:00
</td>
<td class="jampulang">
16:03:00
</td>
<td class="lebih">Jam Kerja Kurang Dari 8 Jam</td>

</tr>
<tr>
<td>4</td>
<td>[1602744] - RAHMAT </td>
<td>2016-08-31</td>
<td class="jammasuk">
08:55:00
</td>
<td class="jampulang">
18:03:00
</td>
<td class="lebih">01:08</td>

</tr>
<tr>
<td colspan="4"> </td>
<td>Total Jam Lebih</td>
<td>
<input name="jamlebih" type="text" readonly disabled class="jmljam" />

</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Ro Yang DiDapatkan</td>
<td>
<input name="dapetro" type="text" readonly disabled class="ronya" />
</td>
</tr>
</tbody>

</table>


I have read the documentation but I can't see any part on how to check if the format
hh:mm
is valid. With my script above I always receive alert
no
.

Here is my fiddle.

Answer

I do not understand the text on your page, but I have done my best with your explanation. Here is my version: JSFiddle Please note I also changed one of the time boxes for testing purposes to add two values together.

As explained in the comments on your post, you need to give momentjs a value to parse from, that being $(this).text(). But momentjs is very forgiving in parsing. It will still parse the '8' out of your text. So you have to initialize your moment with 'true' as the third argument, like so: var thisMoment = moment(value, 'hh:mm', true);. This enables strict parsing, so moment will not parse the '8'.

It is also a decent idea to use moment's built-in .add(object) to add two moments together. Since we are only using hh:mm, I do var total = moment().startOf('day') to give us a clean slate of 12:00:00 to add to.

You were also trying to change the value of a class that didn't exist. You have $('.jamlebih').val(sum); when you actually want to get it via the input name (Or you can add the class yourself, if you want.) like so: $("input[name='jamlebih']")