CODEWITHSUNDEEP
javascriptjqueryhtmldatetimetime
okezumi
okezumi

Reputation: 45

Disable button during weekend and off businees hour

example 1: this code will disable a button during weekend

<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.disabled {
  background: grey;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton">Press me only on weekday</button>

<script>
$(function() {
  var now = new Date(),
      days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
      day = days[now.getDay()],

      $button = $('#myButton');

  if (day === days[0] || day === days[6]) {
      $button.addClass('disabled');
  }

  $button.click(function() {
      if ($(this).hasClass('disabled')) {
          alert('We are not accepting entries during weekends.')
          return;
      }
  });
})
</script>

</body>
</html>

example 2: this code will disable during off hours and only available during 5:00PM(17:00) - 12:00AM (24:00) in weekdays. Clock location base on +8 UTC

<input class="submit" type="submit" id="checktime" value="Check"/>

<script type="text/javascript" defer="defer">
<!-- 
var enableDisable = function(){
    var UTC_hours = new Date().getUTCHours() +8;
    if (UTC_hours > 17 && UTC_hours < 24){
        document.getElementById('checktime').disabled = false;
    }
    else
    {
        document.getElementById('checktime').disabled = true;
    }
};
setInterval(enableDisable, 1000*60);
enableDisable();
// -->
</script>

my problem is, I need to combine both of this code so that I can achieve something like this..

User only allow to clicking the button during 5:00PM(17:00) - 12:00AM (24:00) in weekday and on the weekend the button will be disabled. Button needed to show a alert message if user click it during off day/hour

how to combine this two script properly to make like this? thanks

Upvotes: 0

Views: 1368

Answers (1)

dukedevil294
dukedevil294

Reputation: 1305

This will add the disabled attribute when it's between 12:00 am and 5:00 pm (on any day) or when the current day is Saturday or Sunday. Then show an alert if the button is clicked and disabled.

<script>
    $(function() {
        var now = new Date(),
        days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
  day = days[now.getDay()],
        UTC_hours = new Date().getUTCHours() +8;
        $button = $('#myButton');

        if (day === days[0] || day === days[6] || (UTC_hours >= 0 && UTC_hours < 17)) {
            $button.prop( "disabled", true );
        } else {
            $button.prop( "disabled", false );
        }

        $button.click(function() {
            if ($(this).is(':disabled')) {
                alert('We are not accepting entries during weekends.')
                return;
            }
        });
   })
</script>

Upvotes: 2

Related Questions