js左右滑动选择日期

基础概念

JavaScript 左右滑动选择日期通常指的是在网页上通过触摸或鼠标操作，使用户能够通过左右滑动来选择日期的功能。这种功能常见于移动设备上的日历应用或需要日期选择的网页表单中。

类型

基于触摸的滑动：适用于智能手机和平板电脑。
基于鼠标的拖拽：适用于桌面电脑。

应用场景

日历应用：用户可以通过滑动查看不同月份的日期。
预订系统：在酒店或机票预订中选择入住和离开日期。
活动安排：在日程管理应用中选择活动的具体日期。

实现示例

以下是一个简单的 JavaScript 示例，展示如何实现左右滑动选择日期的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swipe to Select Date</title>
<style>
  #calendar {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    display: flex;
    align-items: center;
  }
  .date {
    padding: 10px;
    margin: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
  }
</style>
</head>
<body>

<div id="calendar">
  <!-- Dates will be dynamically inserted here -->
</div>

<script>
  const calendar = document.getElementById('calendar');
  const today = new Date();
  let currentDate = new Date(today);

  function renderDates() {
    calendar.innerHTML = '';
    for (let i = -2; i <= 2; i++) {
      const date = new Date(currentDate);
      date.setDate(currentDate.getDate() + i);
      const dateElement = document.createElement('div');
      dateElement.className = 'date';
      dateElement.textContent = date.toLocaleDateString();
      dateElement.onclick = () => {
        currentDate = date;
        renderDates();
      };
      calendar.appendChild(dateElement);
    }
  }

  let startX = 0;
  let scrollLeft = 0;

  calendar.addEventListener('mousedown', (e) => {
    startX = e.pageX - calendar.offsetLeft;
    scrollLeft = calendar.scrollLeft;
  });

  calendar.addEventListener('mouseleave', () => {
    calendar.scrollTo(scrollLeft, 0);
  });

  calendar.addEventListener('mouseup', () => {
    calendar.scrollTo(scrollLeft, 0);
  });

  calendar.addEventListener('mousemove', (e) => {
    if (!startX) return;
    e.preventDefault();
    const x = e.pageX - calendar.offsetLeft;
    const walk = (x - startX) * 3; // scroll-fast
    calendar.scrollLeft = scrollLeft - walk;
  });

  renderDates();
</script>

</body>
</html>

可能遇到的问题及解决方法

问题1：滑动不流畅

原因：可能是由于页面其他元素的性能影响，或者是 JavaScript 处理滑动事件的效率不高。
解决方法：优化页面性能，减少不必要的 DOM 操作，使用 requestAnimationFrame 来平滑动画效果。

问题2：在不同设备上的兼容性问题

原因：触摸事件和鼠标事件的处理方式可能不同，导致在某些设备上无法正常工作。
解决方法：检测设备类型，并根据设备类型绑定相应的事件处理函数。

问题3：日期选择逻辑错误

原因：日期计算或渲染逻辑可能存在 bug。
解决方法：仔细检查日期计算的逻辑，确保每次滑动后日期正确更新，并且边界条件处理得当。

通过上述方法，可以有效地实现和优化 JavaScript 左右滑动选择日期的功能。

页面内容是否对你有帮助？

有帮助

没帮助

AngularJS-Ionic :创建一个可滑动的水平视图，它将更新垂直视图

、、、、

意见如下：解释：在这个视图中，我希望有一个水平条(当前显示1到8个日期，但它可以从月份的第1天到月份的最后一天滑动)，其中包含日期。这条条子可以左右滑动。当用户在水平条上左右滑动时，垂直数据将更新。垂直列表视图将只显示水平条中显示的日期数据。谢谢

浏览 1提问于2018-03-15得票数 9

回答已采纳

1回答

锤击JS滑动日历日期

、

我有锤子js和jquery锤子插件，处理一个非常简单的刷操作。当我将此函数更改为左右容器上的简单单击事件时，每次单击的日期按预期只提前一天。event.gesture.preventDefault();，我如何才能让它只在

浏览 1提问于2017-01-18得票数 0

2回答

如何使基于表视图的选择器控件对VoiceOver可访问？

、、、、

我的应用程序中有一个基于UITableView的选择器控件。用户可以滚动表视图，中间的标记显示选定的项。每个可选择的项目都是一个表视图单元格。打开VoiceOver后，我无法滚动表视图来选择其他元素。我在时钟应用程序中查看了选择器视图。它也不会滚动。但是，当您向上或向下弹出时，它会跳转到下一个值或前一个值。上面写着因此，我推断，这是一个特殊的特点，他们使用的东西，可以滑动或向下调整价值

浏览 4提问于2013-07-25得票数 0

回答已采纳

2回答

react本机幻灯片无法正常工作

、、、、

我在我的项目中使用了组件，但当我转到滑动图像时，它不能正确分页，并像ScrollView一样操作。有没有办法解决这个问题？或者知道React native的另一个幻灯片可以正确地通过滑动图像进行分页吗？

浏览 1提问于2019-01-21得票数 0

1回答

通过左右滑动使物体最小化，同时将另一个物体最大化地放到屏幕上。

、、

当我想要创建一个屏幕时，我应该使用什么样的类/属性/方法来使对象远离屏幕，而当我向左或向右滑动手指时，它会将一个新对象显示到屏幕上，使其最大化。就像当你选择一种音乐，你在左右滑动时，光盘最小化到左右，而另一张光盘从左/右最大化。这方面的一个例子是“愤怒的小鸟星球大战”级别选择页面。

浏览 1提问于2014-05-05得票数 0

回答已采纳

1回答

UIPangesture阻止我的自定义控件的触摸移动事件

、、、

我有一个容器视图控制器，带有平移手势，可以使用左右滑动。向右滑动时，我从右侧带来另一个视图。如果我使用平移手势来识别屏幕上的滑动-它会阻止自定义控件的旋转。

浏览 1提问于2015-05-23得票数 0

1回答

按下键时选择滑块手柄- jqueryUI

、、

我的页面上只有一个滑块，我经常用键盘左右移动手柄。但是，如果不选择句柄，则当我按下键时，它将不会滑动。我试着模拟一下手柄上的点击，但似乎没有选择它。$handle = $slider.find('.ui-slider-handle');如何用键盘左右移动手柄，而不必先选择它？

浏览 2提问于2013-10-03得票数 0

回答已采纳

1回答

天气应用时涡旋效应

、、、、

我在一些地方看到人们在寻找天气应用的效果。这些问题中有很多是针对android应用程序或JAVA的，但我希望在HTML/CSS/Javascript站点上使用。这有可能吗？把我指向另一个方向会很有帮助的。即使我必须深入研究另一种语言，如Rails，这也会有帮助。

浏览 2提问于2017-09-30得票数 1

2回答

如何在jsDatepick中设置最小日期？

我需要将最小日期设置为今天的日期。对此有什么选择吗？

浏览 4提问于2012-10-08得票数 1

3回答

Xamarin表单:可以通过右翻转或左翻转查看图片吗？

、

如果我选择一张照片，所选的照片将显示在另一个页面上，并带有左右箭头。点击左边箭头时，相册的前一张图片在屏幕上是可见的，如果点击右箭头，相册中的下一张图片将出现在屏幕上。可以通过左右滑动来查看图片吗？是否有任何控制来识别右/左屏幕滑动？

浏览 0提问于2019-08-08得票数 1

回答已采纳

1回答

同时将div滑入和滑出页面视图

、、、、

浏览 3提问于2012-06-15得票数 1

回答已采纳

1回答

禁用列表视图的跨幻灯片选择

、、、、

当用户在列表视图中水平拖动时，由于的原因，它会选择该行。这不是我想要的行为。最好，我希望flipview开始左右平移。我认为这与有关，因为当用户对角线平移时，他们可以平移flipview。甚至在selectionmode设置为None时也会发生交叉滑动如何禁用交叉滑动，或者如何确保当用户左右平移时，翻转视图会平移，而不是列表视图项目？

浏览 0提问于2012-08-02得票数 5

回答已采纳

1回答