education/classroom

View on GitHub
app/assets/javascripts/datetimepicker.js

Summary

Maintainability
A
0 mins
Test Coverage
function offsetToTimezoneString(offset){
  var sign = offset > 0 ? "-" : "+";
  var wholeTime = String(Math.floor(Math.abs(offset)));
  var fractionTime = String((Math.abs(offset))%1 * 60);
  var paddedString = wholeTime.length == 1 ? "0" + wholeTime + fractionTime : wholeTime + fractionTime;

  return sign + paddedString;
}

function leftpad(val){
  return ("0" + val).slice(-2);
}

function timeRoundedUp() {
  var currentDateTime = new Date();
  var nextHour = currentDateTime.getHours() + 1;

  return (leftpad(nextHour) + ':00');
}

function initializePicker(picker){
  if($(picker).val() !== ""){
    var d = new Date($(picker).val() + " UTC");
    var dateString = leftpad(d.getMonth()+1)
                       + "/"
                       + leftpad(d.getDate())
                       + "/"
                       + d.getFullYear()
                       + " "
                       + leftpad(d.getHours())
                       + ":"
                       + leftpad(d.getMinutes())
                       + " "
                       + offsetToTimezoneString(d.getTimezoneOffset()/60);

    $(picker)[0].value = dateString;
  }

  $(picker).datetimepicker({
    format: 'm/d/Y H:i O',
    defaultTime: timeRoundedUp()
  });
}

$('.jquery-datetimepicker').each(function(){
  initializePicker(this);
});

// Since turbolinks dynamically loads pages, we can't just run JS on page load to initialize datepickers
// This observer listens for when the body is re-added to the DOM, which is how turbolinks updates
// Then we search the body for any new datetimepickers.
var config = { attributes: true, childList: true, subtree: true, characterData: true };
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    for(var i = 0; i < mutation.addedNodes.length; i++){
      if(mutation.addedNodes[i].nodeName.toLowerCase() == "body"){
        var body = mutation.addedNodes[i];
        $(body).find(".jquery-datetimepicker").each(function(){
          initializePicker(this);
        })
      }
    }
  });
});

observer.observe(document, config);