Twitter Bootstrap Question posted in

How can I control time with jquery/javascript? – Twitter bootstrap

I really couldn’t do that so I need to learn how to do that

I want to control time with jquery or javascript doesn’t matter which one it is.I want to explain my scenario is:

I have agency page and my all agency have modal and theese modal has open-hours and closed-hours if you check it out my example..

and if my data-open-hour for example is 09:00 but if time is 10:00 now then remove 09:00 option and make first 10:00 and if data-closed-hours is 20:00 and if time past 20:00 then make disabled Call Today

function agencyModal(modalTitle, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  var html =
    '<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body">';
  html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today">Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6">';
  html = html + '<select class="hour-call form-control">'+getOptions(openHours, closedHours, true)+'</select></div></div>';
  html = html + '</div></div></div></div>';
  // check length and append if it is not added before
  !$(".agencyModal").length && $(document.body).append(html);
  $(".agencyModal").modal();
}


$(document).on("click", ".open-agency", function() {
  var openHours = $(this).data("open-hours");
  var closedHours = $(this).data("closed-hours");
  agencyModal("Test Title ", "70%", "500px", openHours, closedHours);
});

function callNow() {
  return '<option class="call-now">Call Now</option>';
}

function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open,close,now);
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
    options += '<option>Call at '+h+':00</option>'
  }
  return options;
}

$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  if($('.call-today').is(':selected')) 
    $('.hour-call').prepend(callNow());
});
.open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00">See Agency</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Tags:

3

Answers


  1. 0

    Well if you want to display only hours that are higher than the actual hour of the day, you need to test the iterated hour in your getOptions() function.

    This is how should be the loop:

      for (var h = +start; h <= +end; h++) {
    var currHour = (new Date()).getHours();
    if(h>currHour)
        options += '<option>Call at '+h+':00</option>'
  }

    Demo:

    function agencyModal(modalTitle, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  var html =
    '<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body">';
  html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today">Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6">';
  html = html + '<select class="hour-call form-control">'+getOptions(openHours, closedHours, true)+'</select></div></div>';
  html = html + '</div></div></div></div>';
  // check length and append if it is not added before
  !$(".agencyModal").length && $(document.body).append(html);
  $(".agencyModal").modal();
}


$(document).on("click", ".open-agency", function() {
  var openHours = $(this).data("open-hours");
  var closedHours = $(this).data("closed-hours");
  agencyModal("Test Title ", "70%", "500px", openHours, closedHours);
});

function callNow() {
  return '<option class="call-now">Call Now</option>';
}

function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open,close,now);
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
    var currHour = (new Date()).getHours();
    if(h>currHour)
        options += '<option>Call at '+h+':00</option>'
  }
  return options;
}

$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  if($('.call-today').is(':selected')) 
    $('.hour-call').prepend(callNow());
});
    .open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00">See Agency</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    Login or Signup to reply.
  2. 0

    You can get the time from the Date() object like so:

    //get current hours from the current Date object
var date = new Date();
var currentHour = date.getHours();

    And then update your for loop to start only from currentHour + 1:

    for (var h = currentHour; h <= end; h++) {
    options += '<option>Call at '+h+':00</option>'
}

    For the ‘Call Today’ to be disabled you could check the date in the agencyModal() function and add the disabled keyword to the <option>.

    '<option class="call-today"'+(new Date().getHours() > closedHours.split(':')[0] ? 'disabled': '' )+'>'

    However, in order to change back to the full list of open hours when ‘Call Tomorrow’ is selected, you’d need an event listener for the first <select> and then apply the relevant changes from inside that function.

    function agencyModal(modalTitle, modalWidth, modalHeight, openHours, closedHours) {

  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  
  var html =
    '<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body">';
  html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today"'+(new Date().getHours() > closedHours.split(':')[0] ? 'disabled': '' )+'>Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6">';
  html = html + '<select class="hour-call form-control">'+getOptions(openHours, closedHours, true)+'</select></div></div>';
  html = html + '</div></div></div></div>';
  // check length and append if it is not added before
  !$(".agencyModal").length && $(document.body).append(html);
  $(".agencyModal").modal();
}


$(document).on("click", ".open-agency", function() {
  var openHours = $(this).data("open-hours");
  var closedHours = $(this).data("closed-hours");
  agencyModal("Test Title ", "70%", "500px", openHours, closedHours);
});

function callNow() {
  return '<option class="call-now">Call Now</option>';
}

function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open,close,now);
  
  
  //get current hours from the current Date object
  var date = new Date();
  var currentHour = date.getHours();
  
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  // loop and add an option for each
  for (var h = currentHour + 1; h <= end; h++) {
    options += '<option>Call at '+h+':00</option>'
  }
  return options;
}

$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  if($('.call-today').is(':selected')) 
    $('.hour-call').prepend(callNow());
});
    .open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00">See Agency</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    Login or Signup to reply.
  3. 0

    I change a bit in your code

      var dt = new Date();
  var time = dt.getHours()
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
    if (time < h && now == true) {
      options += '<option>Call at ' + h + ':00</option>'
    } else if (!now) {
      options += '<option>Call at ' + h + ':00</option>'
    }
  }

    This will now check the current Hour and remove any before that.

    I’ve also changed this bit

      if ($('.call-today').is(':selected')) {
    $('.hour-call').prepend(getOptions(openHours, closedHours, true));
  } else {
    $('.hour-call').prepend(getOptions(openHours, closedHours, false))
  }

    I will now reset the options when your change the select.

    var openHours;
var closedHours;

function agencyModal(modalTitle, modalWidth, modalHeight, openHours, closedHours) {
  console.log("Open: " + openHours + " Closed hours: " + closedHours);
  var html =
    '<div class="modal fade agencyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body">';
  html = html + '<div class="row"><div class="col-lg-6"><select class="when-call form-control"><option class="call-today">Call Today</option><option class="call-tomorrow">Call Tomorrow</option></select></div><div class="col-lg-6">';
  html = html + '<select class="hour-call form-control">' + getOptions(openHours, closedHours, true) + '</select></div></div>';
  html = html + '</div></div></div></div>';
  // check length and append if it is not added before
  !$(".agencyModal").length && $(document.body).append(html);
  $(".agencyModal").modal();
}


$(document).on("click", ".open-agency", function() {
  openHours = $(this).data("open-hours");
  closedHours = $(this).data("closed-hours");
  agencyModal("Test Title ", "70%", "500px", openHours, closedHours);
});

function callNow() {
  return '<option class="call-now">Call Now</option>';
}

function getOptions(open, close, now) {
  var options = now ? callNow() : '';
  console.log(open, close, now);
  // get open/close time as hours only
  var start = open.split(':')[0];
  var end = close.split(':')[0];
  // using +start will convert to a base 10 number - avoiding the problem that numbers with a leading zero are octal numbers
  var dt = new Date();
  var time = dt.getHours()
  // loop and add an option for each
  for (var h = +start; h <= +end; h++) {
    if (time < h && now == true) {
      options += '<option>Call at ' + h + ':00</option>'
    } else if (!now) {
      options += '<option>Call at ' + h + ':00</option>'
    }
  }
  return options;
}

$(document).on("change", ".when-call", function(event) {
  // not the most efficient way, but you can always remove 'Call now', then add it back only if needed
  $(".hour-call .call-now").remove();
  $('.hour-call option').remove();
  if ($('.call-today').is(':selected')) {
    $('.hour-call').prepend(getOptions(openHours, closedHours, true));
  } else {
    $('.hour-call').prepend(getOptions(openHours, closedHours, false))
  }
});
    .open-agency {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-agency:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<p class="open-agency" data-toggle="modal" data-target=".agencyModal" data-open-hours="09:00" data-closed-hours="22:00">See Agency</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search