MDB MDB - 4 months ago 23
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++;
}

alert(early_break_count);
alert(lunch_break_count);
alert(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;



How am I able to do that? Please enlighten me on this. Thank you. Please help..

Answer

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++;
    }
    
    morning_break.add(1, 'd');
    lunch_break.add(1, 'd');
    afternoon_break.add(1, 'd');
  } 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));
  }
  
  function addEvent() {
    $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++;
        }

        event.date.add(1, 'd');
      });
    } 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)) {
      $message.text('Please select a begin date');
    } else if (isInvalidTime(beginTimeStr)) {
      $message.text('Please select a begin time');
    } else if (isInvalidDate(endDateStr)) {
      $message.text('Please select an end date');
    } else if (isInvalidTime(endTimeStr)) {
      $message.text('Please select an end time');
    } else if (events.length === 0) {
      $message.text('Please add a daily event');
    } 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);
  
  $('#add').on('click', addEvent);
  $('#events').on('click', '.remove', removeEvent);
  
  schedule();
});
div {
  padding: 0 0.5em 0.5em 0;
}

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>
    <button type="button" id="add">Add a Daily Event</button>
  </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>

Comments