JS实现时间选择器

2023年5月27日下午1:17 • JavaScript

JS实现时间选择器的攻略需要遵守以下步骤：

1. 准备工作

首先需要在页面中引入需要用到的JS库，例如jQuery或者Zepto。可以通过CDN或者下载本地使用。

2. 创建HTML结构

时间选择器需要一个输入框来显示选中的时间，同时还需要一个弹窗来显示时间选择器控件。HTML结构可以按照以下方式构建：

<div class="form-group">
  <label for="datepicker">Datepicker:</label>
  <input id="datepicker" type="text" class="form-control" />
</div>

<div id="datepicker-dialog" class="popup">
  <div class="dialog-content">
    <div class="calendar"></div>
    <div class="actions">
      <button id="datepicker-cancel" class="btn">Cancel</button>
      <button id="datepicker-ok" class="btn btn-primary">OK</button>
    </div>
  </div>
</div>

其中，#datepicker是输入框，#datepicker-dialog是弹窗，#datepicker-cancel和#datepicker-ok是弹窗中的取消和确认按钮。

3. 创建JS代码

需要编写一些JS代码来实现时间选择器。具体实现思路如下：

1) 显示弹窗

点击输入框时，需要显示弹窗。可以使用jQuery或者Zepto的点击事件来监听输入框的点击事件，并且设置弹窗的显示和隐藏状态。

$('#datepicker').on('click', function() {
  $('#datepicker-dialog').show();
});
$('#datepicker-cancel').on('click', function() {
  $('#datepicker-dialog').hide();
});

2) 初始化日历

常见的时间选择器都是基于日历的，因此需要初始化一个日历控件。可以使用JS库datepicker来快捷地实现日历控件。

$('.calendar').datepicker({
  format: 'yyyy-mm-dd',
  autoclose: true
});

3) 获取选择的时间

当用户点击确认按钮时，需要获取选择的时间，并且更新输入框的值。可以监听确认按钮的点击事件，并且使用JS库提供的API来获取选择的时间。

$('#datepicker-ok').on('click', function() {
  var chosenDate = $('.calendar').datepicker('getDate');
  var formattedDate = $.datepicker.formatDate('yy-mm-dd', chosenDate);
  $('#datepicker').val(formattedDate);
  $('#datepicker-dialog').hide();
});

4.完整代码示例：

下面是一个完整的时间选择器示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS implementation of a datepicker</title>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.ui/1.11.4/themes/smoothness/jquery-ui.css">
    <style>
      .popup {
        position: fixed;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #ffffff;
        border: 1px solid #cccccc;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        display: none;
      }
      .dialog-content {
        padding: 10px;
      }
      .btn {
        margin: 0 5px;
        border-radius: 0;
      }
    </style>
  </head>
  <body>
    <div class="form-group">
      <label for="datepicker">Datepicker:</label>
      <input id="datepicker" type="text" class="form-control" />
    </div>

    <div id="datepicker-dialog" class="popup">
      <div class="dialog-content">
        <div class="calendar"></div>
        <div class="actions">
          <button id="datepicker-cancel" class="btn">Cancel</button>
          <button id="datepicker-ok" class="btn btn-primary">OK</button>
        </div>
      </div>
    </div>

    <script src="//cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js"></script>
    <script>
      $(document).ready(function() {
        $('#datepicker').on('click', function() {
          $('#datepicker-dialog').show();
        });
        $('#datepicker-cancel').on('click', function() {
          $('#datepicker-dialog').hide();
        });
        $('.calendar').datepicker({
          format: 'yyyy-mm-dd',
          autoclose: true
        });
        $('#datepicker-ok').on('click', function() {
          var chosenDate = $('.calendar').datepicker('getDate');
          var formattedDate = $.datepicker.formatDate('yy-mm-dd', chosenDate);
          $('#datepicker').val(formattedDate);
          $('#datepicker-dialog').hide();
        });
      });
    </script>
  </body>
</html>

这个示例中使用了jQuery和datepicker库来实现时间选择器。当用户点击输入框时，会弹出一个日历控件，当用户选择时间并且点击确认时，会将选中的时间更新到输入框中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现时间选择器 - Python技术站