jQuery addClass example

Change class name on click in jQuery

by John Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.4.1/moment-timezone-with-data-2010-2020.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<h3>Make Appointment</h3>
<h5>All times are in local (New Zealand) Time</h5>

<h4>Choose Date</h4>
<div id="date">
  <input id="getdate">
</div>


<h5>Start and End Times for today's appointments are:</h5>
<div id="startTime"></div>
<div id="endTime"></div>

<h5>For your info:</h5>
<div id="msg1"></div>
<div id="msg"></div>

CSS

#msg {
  color: blue;
  font-weight: bold
}

JavaScript

// GET local New Zealand Time and use in datepicker (ignore user's local computer or timezone)
// CHECK the selected date against start and end time - then set the minDate accordingly
// Chnge NZ reference to whatver timezone you want

jQuery.noConflict();
jQuery(document).ready(function() {

  // Jquery Datepicker
  var setDate = moment.tz('Pacific/Auckland');
  jQuery("#getdate").datepicker({
    minDate: checkTime(), // set min date based on NZ timezone time
    dateFormat: 'dd-mm-yy',
    defaultDate: setDate.format('dd-mm-yy'), // get from moment above
    numberOfMonths: 1,
    buttonText: "Choose Date",
    showButtonPanel: true
  });

  function checkTime(setminDate) {
    var NZTime;
    (NZTime = function() {
      NZNow = moment.tz('Pacific/Auckland').format('dddd MMMM Do YYYY HH:mm:ss');
      jQuery("#msg1").text('In NZ it\'s currently ' + NZNow);
    })();
    setInterval(NZTime, 1000);

    var currentTime = moment.tz('Pacific/Auckland');
    var extra = moment().format('YYYY-MM-DD') + ' ';
    var start_time = moment(extra + '08:00'); // NZ time
    var end_time = moment(extra + '18:00'); // NZ time

    jQuery("#startTime").html('Start Time is: ' + start_time.format('HH:mm'));
    jQuery("#endTime").html('End Time is: ' + end_time.format('HH:mm'));
    if (moment(currentTime).isBetween(start_time, end_time)) {
      //console.log('TRUE');
      setminDate = '+0d';
      jQuery("#msg").html('It\'s before the cutoff time - you can book today!');
    } else {
      //console.log('FALSE');
      setminDate = '+1d';
      jQuery("#msg").html('It\'s AFTER the cutoff time - please book for tomorrow');
    }
    return setminDate; // ADD RETURN STATEMENT
  }

}); // end doc ready