会议室预定简单功能实现

以下是一个基于jQuery UI的简单预定会议室的页面：

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>会议室预定</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <style>
    .ui-timepicker-standard {
      font-family: Arial;
      font-size: 14px;
      width: 100%;
    }

    .ui-datepicker {
      margin-top: 12px;
    }

    .ui-timepicker-list li {
      cursor: pointer;
    }

    #availableTimeslots {
      margin-top: 20px;
      border: 1px solid #ccc;
      height: 400px;
      overflow-y: auto;
      padding: 10px;
    }

    .timeslot {
      border: 1px solid #ccc;
      padding: 5px;
      margin-bottom: 5px;
      background-color: #f9f9f9;
      cursor: pointer;
    }

    .timeslot.unavailable {
      background-color: #ddd;
      cursor: not-allowed;
    }

    .timeslot.selected {
      background-color: #428bca;
      color: #fff;
    }

    #reserveBtn {
      margin-top: 20px;
      padding: 10px;
      background-color: #428bca;
      color: #fff;
      border: none;
      cursor: pointer;
    }

    #reserveBtn:hover {
      background-color: #3071a9;
    }
  </style>
</head>

<body>
  <h1>会议室预定</h1>

  <div>
    <label for="datepicker">日期:</label>
    <input type="text" id="datepicker">
    <label for="starttimepicker">开始：</label>
    <input type="text" id="starttimepicker">
    <label for="endtimepicker">结束：</label>
    <input type="text" id="endtimepicker">
    <button id="addToCartBtn" disabled>加入预定</button>
  </div>

  <div id="availableTimeslots"></div>

  <div>
    <button id="reserveBtn" disabled>预定会议室</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $(document).ready(function () {
      // Datepicker
      $("#datepicker").datepicker({
        minDate: 0,
        onSelect: function (dateText, inst) {
          updateAvailableTimeslots(dateText);
        }
      });

      // Timepicker
      $('#starttimepicker,#endtimepicker').timepicker({
        timeFormat: 'HH:mm',
        interval: 30,
        dropdown: true,
        scrollbar: true,
        minTime: '8:00',
        maxTime: '22:00',
        dynamic: false,
        change: function (time) {
          var startTime = $('#starttimepicker').val();
          var endTime = $('#endtimepicker').val();
          // 检查选择的时间段是否在可预定时间范围内
          if (startTime < '8:00' || endTime > '22:00' || startTime >= endTime) {
            $('#startdatepicker,#enddatepicker').val('');
            $('#addToCartBtn').prop('disabled', true);
          } else {
            updateAvailableTimeslots($('#datepicker').val());
          }
        }
      });

      // 拖拽选择时间段
      $(document).on('mousedown', '.timeslot',
        function (e) {
          $('.timeslot').removeClass('selected');
          $(this).addClass('selected');
          $('#reserveBtn').prop('disabled', false);
          $('#addToCartBtn').prop('disabled', true);
        }
      );

      // 预定会议室
      $('#reserveBtn').on('click', function () {
        var selectedTimeslot = $('.timeslot.selected');
        var date = $('#datepicker').val();
        var startTime = $('#starttimepicker').val();
        var endTime = $('#endtimepicker').val();
        alert(`您预定了 ${date} ${startTime}-${endTime} 的会议室`);
        selectedTimeslot.removeClass('available').addClass('unavailable').removeClass('selected');
        $('#reserveBtn').prop('disabled', true);
      });
    });

    function updateAvailableTimeslots(date) {
      $('#availableTimeslots').html('');
      var startTime = $('#starttimepicker').val();
      var endTime = $('#endtimepicker').val();
      if (startTime && endTime) {
        var startHour = parseInt(startTime.split(':')[0]);
        var endHour = parseInt(endTime.split(':')[0]);
        for (var hour = startHour; hour < endHour; hour++) {
          var timeslot = $('<div></div>').addClass('timeslot available');
          timeslot.text(hour + ':00 - ' + (hour + 1) + ':00');
          $('#availableTimeslots').append(timeslot);
        }
      } else {
        $('#addToCartBtn').prop('disabled', true);
      }
    }
  </script>
</body>

</html>
```

在这个实现中，用户可以选择预定日期和开始结束时间，并在可预定时间范围内拖拽选择时间段。预定按钮将被激活并点击后会展示一个简单的提示信息，并将已选择的时间段设置为不可预定。
posted @ 2023-04-24 20:41 今年我十八岁阅读(69) 评论(0) 收藏举报
刷新页面返回顶部
今年我十八岁

会议室预定简单功能实现

公告
