在周末和关闭商业时间禁用按钮

时间:2018-02-16 21:15:35

标签: javascript jquery html datetime time

示例1:此代码将在周末禁用按钮

<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>

示例2:此代码将在非工作时间禁用,并且仅在工作日的下午5:00(17:00) - 12:00 AM(24:00)可用。时钟位置基于+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>

我的问题是,我需要结合这两个代码,以便我可以实现类似的东西..

  

用户只允许在下午5:00(17:00) - 12:00 AM点击按钮   (24:00)在工作日和周末按钮将被禁用。   如果用户在关闭期间单击它,则需要按钮显示警告消息   日/小时

如何正确组合这两个脚本来制作这样的?感谢

1 个答案:

答案 0 :(得分:2)

这将在凌晨12:00到下午5:00(任何一天)或当天是星期六或星期日时添加已禁用的属性。如果单击并禁用该按钮,则显示警告。

<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>