MDB - 1 year ago 90
HTML Question

# Count the frequency that the time will occur between two dates using moment js

``````    \$('#btn').click(function () {
var now = moment();
var later = moment().minutes(1440).seconds(00); /*just a sample future date*/

var morning_break = moment().hours(10).minutes(00).seconds(00); /*10 am*/
var afternoon_break = moment().hours(15).minutes(00).seconds(00); /*3pm*/
var lunch_break = moment().hours(12).minutes(00).seconds(00); /*lunch*/

var early_break_count = 0;
var lunch_break_count = 0;
var afternoon_break_count = 0;

if(morning_break.isBetween(now, later)){
early_break_count++;
}
if(lunch_break.isBetween(now, later)){
lunch_break_count++;
}
if(afternoon_break.isBetween(now, later)){
afternoon_break_count++;
}

});
``````

I know this will only count those specific break times on the first day. My question is how to count each break time when the future date is more than 2 days. e.g. 3 or 6 days or so on. Take note that the start date might not always be the same. It could be 11 A.M. (in this case, the 10 A.M. break will not be counted).

Concept is..

In 2 days, if the start time is JAN 1, 2016 at 9 A.M and the end time is JAN 3, 2016 at 6 P.M., then there will be

• early_break_count = 2;

• lunch_break_count = 2;

• afternoon_break_count = 2;

In 2 days, if the start time is JAN 1, 2016 at 11 A.M and the end time is JAN 3, 2016 at 2 P.M., then there will be

• early_break_count = 1;

• lunch_break_count = 2;

• afternoon_break_count = 1;

Use a `while` loop like this:

``````\$('#btn').click(function() {
var now = moment().hours(11).minutes(00).seconds(00);
var later = now.clone().add({d: 1, h: 3});

var morning_break = now.clone().hours(10); /*10 am*/
var afternoon_break = now.clone().hours(15); /*3pm*/
var lunch_break = now.clone().hours(12); /*lunch*/

var early_break_count = 0;
var lunch_break_count = 0;
var afternoon_break_count = 0;

do {
if (morning_break.isBetween(now, later)) {
early_break_count++;
}
if (lunch_break.isBetween(now, later)) {
lunch_break_count++;
}
if (afternoon_break.isBetween(now, later)) {
afternoon_break_count++;
}

} while (morning_break.diff(later) <= 0);

alert('between ' + now.format('MMMM Do YYYY, h:mm:ss a') + ' and ' + later.format('MMMM Do YYYY, h:mm:ss a') + ':\n' +
'morning breaks: ' + early_break_count + '\n' +
'lunch breaks: ' + lunch_break_count + '\n' +
'afternoon breaks: ' + afternoon_break_count);
});``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

<button type="button" id="btn">Click Me</button>``````

Just for fun, here's a more comprehensive program:

``````\$(function () {
var \$beginDate = \$('#begindate');
var \$beginTime = \$('#begintime');
var \$endDate   = \$('#enddate');
var \$endTime   = \$('#endtime');
var \$events    = \$('#events');
var \$message   = \$('#message');
var \$template  = \$('#event-template');
var dateRegExp = /^(\d{4})-(\d{2})-(\d{2})\$/;
var timeRegExp = /^(\d{2}):(\d{2})\$/;
var tempRegExp = /\{\{ *([^\}]+) *\}\}/g;

function isInvalidDate(str) {
return !(dateRegExp.test(str));
}

function isInvalidTime(str) {
return !(timeRegExp.test(str));
}

\$events.append(\$(\$template.html()));

schedule();
}

function removeEvent() {
\$(this).closest('div').remove();

schedule();
}

function parseMoment(dateStr, timeStr) {
var date = moment(dateStr);
var time = timeStr.match(timeRegExp).slice(1);

return date.hours(parseInt(time[0])).minutes(parseInt(time[1]));
}

function formatEvent(event) {
return \$('#count-template').html().replace(tempRegExp, function (match, field) {
return event[field];
});
}

function countEvents(beginDate, endDate, events) {
events.sort(function (a, b) {
return a.date.diff(b.date);
});

do {
events.forEach(function (event) {
if (event.date.isBetween(beginDate, endDate)) {
event.count++;
}

});
} while (events[0].date.diff(endDate) <= 0);

return events.sort(function (a, b) {
return a.order - b.order;
}).reduce(function (template, event) {
return template + formatEvent(event);
}, '');
}

function schedule() {
var beginDateStr = \$beginDate.val();
var beginTimeStr = \$beginTime.val();
var endDateStr   = \$endDate.val();
var endTimeStr   = \$endTime.val();

var events = \$('#events input').toArray().map(function (input) {
return \$(input).val();
});

if (isInvalidDate(beginDateStr)) {
} else if (isInvalidTime(beginTimeStr)) {
} else if (isInvalidDate(endDateStr)) {
} else if (isInvalidTime(endTimeStr)) {
} else if (events.length === 0) {
} else if (events.some(isInvalidTime)) {
\$message.text('Please select a time for each daily event');
} else {
var beginDate = parseMoment(beginDateStr, beginTimeStr);
var endDate   = parseMoment(endDateStr, endTimeStr);

events = events.map(function (timeStr, index) {
return {
order: index + 1,
count: 0,
date: parseMoment(beginDateStr, timeStr)
};
});

var message = countEvents(beginDate, endDate, events);

\$message.html(message);
}
}

\$('body').on('change', schedule);

\$('#events').on('click', '.remove', removeEvent);

schedule();
});``````
``````div {
}

label[for] {
display: inline-block;
width: 60px;
text-align: right;
}

#events {
counter-reset: event;
}

label.event::before {
counter-increment: event;
content: "Event " counter(event);
}``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

<script type="text/x-template" id="event-template">
<div>
<label class="event"></label>
<input type="time" />
<button type="button" class="remove">&times; Remove</button>
</div>
</script>

<script type="text/x-template" id="count-template">
<div>
Event {{order}} occurs {{count}} times
</div>
</script>

<div>
<label for="begindate">Between </label>
<input type="date" id="begindate" value="2016-07-26" />
<input type="time" id="begintime" value="11:00" />
</div>
<div>
<label for="enddate">and </label>
<input type="date" id="enddate" value="2016-07-27" />
<input type="time" id="endtime" value="14:00" />
</div>
<p id="message"></p>
<div id="events">
<h3>Daily Events</h3>
<div>
</div>
<div>
<label class="event"></label>
<input type="time" value="10:00" />
<button type="button" class="remove">&times; Remove</button>
</div>
<div>
<label class="event"></label>
<input type="time" value="12:00" />
<button type="button" class="remove">&times; Remove</button>
</div>
<div>
<label class="event"></label>
<input type="time" value="15:00" />
<button type="button" class="remove">&times; Remove</button>
</div>
</div>``````

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download