左右滑动的日历（移动端 jquery-3.6.0 AmazeUI-2.7.2）

最新推荐文章于 2022-09-05 16:14:00 发布
最新推荐文章于 2022-09-05 16:14:00 发布
阅读量467 收藏 1
点赞数
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26730215/article/details/121718856
版权

        第一版，待重新调整。

效果图：

 

 代码：

css: workAttendance.css

header{
    font-size: 2rem;
    color:white;
    background-color: #4873C1;
    height: 5rem;
}
.top{
    text-align: center;
}
.cancel{
    float:left;
    margin-top: 1.5rem;
    margin-left: 1rem;
    font-size: 2rem;
}
.title{
    font-size: 3rem;
}
main{
    width:100%;
    height:10rem;
}
.dateTable td{
    width: 3rem;
    height: 3rem;
}

html: workAttendance.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="workAttendance.css">
  <script src="jquery-3.6.0/jquery-3.6.0.min.js"></script>
  <script src="AmazeUI-2.7.2/assets/js/amazeui.min.js"></script>
</head>

<body>
  <header>
  </header>
  <main>
    <div>
      <div class="selectDate" style="display: none;">
        <select style="width: 10rem;height:3rem;font-size:2rem;" id="ayear">
        </select><b style="height:3rem;font-size:2rem;">年</b>
        <select style="width: 10rem;height:3rem;font-size:2rem;" id="bmonth">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select><b style="height:3rem;font-size:2rem;">月</b>
      </div>
      <div id="date" style="background-color:#4873C1;font-size: 2.5rem;margin: 0;padding: 0;color: white;"></div>
      <table id="dateTable"
        style="height:60rem;width:100%;text-align: center;background-color: #4873C1;color: white;font-size:2rem;border-spacing:3rem;">
      </table>
    </div>
  </main>

  <script type="text/javascript">
    var userData;
    var clickDayId;
    $(document).ready(function () {
      var date = new Date;
      var ayear = document.getElementById("ayear");
      for (var i = 2200; i > 1970; i--) {
        ayear.add(new Option(i, i));
      }
      $("#ayear").val(date.getFullYear());
      $("#bmonth").val(date.getMonth() + 1)
      var dateSelect = document.getElementById("date");
      dateSelect.innerText = date.getFullYear() + "年" + (date.getMonth() + 1) + "月";
      selectDate();
    })

    function timehtml(yeargoal, monthgoal) {
      //月末
      var time = new Date(yeargoal, monthgoal, 0);
      //获得这个月由多少天
      var date = time.getDate();
      var time2 = new Date(yeargoal, monthgoal - 1, 1);
      //获得这个月的一号是星期几
      var day = time2.getDay();

      //月
      var mon = time.getMonth() + 1;
      //年
      var year = time.getFullYear();
      //行标签头
      var hangT = "<tr style=''>";
      //空的td块
      var lieK = "<td style=''></td>";
      var timestr = hangT;
      //日历表头
      timestr = timestr + "<td style='width:12%;'>" + "日" + "</td>";
      timestr = timestr + "<td style='width:12%;'>" + "一" + "</td>";
      timestr = timestr + "<td style='width:12%;'>" + "二" + "</td>";
      timestr = timestr + "<td style='width:12%;'>" + "三" + "</td>";
      timestr = timestr + "<td style='width:12%;'>" + "四" + "</td>";
      timestr = timestr + "<td style='width:12%;'>" + "五" + "</td>";
      timestr = timestr + "<td style='width:12%;'>" + "六" + "</td>";
      timestr = timestr + "</tr><tr style='heigth:3rem;'>";
      for (var i = 0; i < day; i++) {
        timestr = timestr + lieK;
      }
      var dayNum = 0;
      for (var j = 1; j <= date; j++) {
        timestr = timestr + "<td style='background-color: #4873C1;color:white;border-radius:50%;' id='" + year + mon + j + "' onclick='dateClick(" + year + "," + mon + "," + j + ")'>" + j + "</td>";
        if (day == 6) {
          dayNum++;
          timestr = timestr + "</tr>";
          day = -1;
        }
        day++;
      }
      if (day > 0) {
        for (var i = day; i <= 6; i++) {
          timestr = timestr + lieK;
        }
        dayNum++;
      }
      timestr = timestr + "</tr>";

      if (dayNum < 6) {
        timestr = timestr + "<tr style='heigth:3rem;visibility: hidden'><td style=''>1</td></tr>";
      }
      return timestr;
    }

    function dateClick(year, mon, j) {
      if (j != '') {
        //把上一个样式删除
        if (clickDayId != null && clickDayId != '') {
          var dayEle = document.getElementById(clickDayId);
          if (dayEle) {
            dayEle.style.color = 'white';
            dayEle.style.backgroundColor = '#4873C1';
          }
        }
        clickDayId = year + "" + mon + "" + j;
        //修改样式
        var dayEle = document.getElementById(clickDayId);
        if (dayEle) {
          dayEle.style.color = 'blue';
          dayEle.style.backgroundColor = 'white';
        }
      }
    }
    function selectDate() {
      var yeargoal = document.getElementById("ayear").value;
      var monthgoal = document.getElementById("bmonth").value;
      var str = timehtml(yeargoal, monthgoal);
      var dateSelect = document.getElementById("date");
      dateSelect.innerText = yeargoal + "年" + monthgoal + "月";
      $("table").html(str);
    }
    $("#ayear").change(function () {
      if ($("#bmonth").val() != "") {
        selectDate();
      }
    })
    $("#bmonth").change(function () {
      if ($("#ayear").val() != "") {
        selectDate();
      }
    })
    // 左右滑动日历
    var startX = 0, startY = 0, touchD;
    function touchStart(evt) {
      try {
        var touch = evt.touches[0], //获取第一个触点
          x = Number(touch.pageX), //页面触点X坐标
          y = Number(touch.pageY); //页面触点Y坐标
        //记录触点初始位置
        startX = x;
        startY = y;
      } catch (e) {
      }
    }

    function touchMove(evt) {
      try {
        var touch = evt.touches[0], //获取第一个触点
          x = Number(touch.pageX), //页面触点X坐标
          y = Number(touch.pageY); //页面触点Y坐标
        //判断滑动方向
        if (x - startX > 0) {
          touchD = -1;
        }
        if (x - startX < 0) {
          touchD = 1;
        }
      } catch (e) {
      }
    }

    function touchEnd(evt) {
      if (touchD && touchD != "") {
        try {
          var yeargoal = document.getElementById("ayear").value;
          var monthgoal = document.getElementById("bmonth").value;

          var mon = parseInt(monthgoal) + parseInt(touchD);
          var year = yeargoal;
          if (mon > 12) {
            year = parseInt(yeargoal) + parseInt(1);
            mon = 1;
          }
          if (mon < 1) {
            year = parseInt(yeargoal) - parseInt(1);
            mon = 12;
          }
          $("#ayear").val(year);
          $("#bmonth").val(mon);
          selectDate();
          touchD = "";
        } catch (e) {
        }
      }
    }
    //绑定事件
    function bindEvent() {
      document.addEventListener('touchstart', touchStart, false);
      document.addEventListener('touchmove', touchMove, false);
      document.addEventListener('touchend', touchEnd, false);
    }
    bindEvent();
  </script>
</body>

</html>

jq：Download jQuery | jQuery

AmazeUI：JS 插件 | Amaze UI

lz加
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery移动端触屏滑动日期控件
07-15
jQuery移动端触屏滑动日期控件。
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 ...本资源包含jQuery-3.6.0（压缩版本与未压缩版本） 压缩版本：开发时使用，更轻量 未压缩版本：易于学习理解 使用方法：解压后直接将.js文件拉入项目中，进行导入即可
jQuery实现移动端手机选择日期日历插件
小天空的博客
09-05 3795
2、new Date(2022,0,1)　　: 可以把"2022-01-01"分割成年 月 日。1、new Date("2022/01/01") ：这种写法在safari、chrome上都支持。new Date("2022-01-01")在。项目需要引入jquery框架。和苹果版微信上面竟然不支持，项目开发中遇到的问题。
手机端 基于amazeui 日期插件 个人觉得还不错
云之蓝的博客
10-09 4438
本人自己 开发的是在手机端应用的 。 当然，这个并不只局限于手机端，下面先来一张效果图 注意 ： 插件单独引用 在显示上不会有太大问题，应用到项目中页面 就会出现样式覆盖问题 或者报错 此时不要慌 有错误一个个解决就可以了 1、amazeui.min.css 中 有一个全局样式 会让你的项目页面出现混乱 用下面的全局样式 放在当前页面 或者 去此css文件中删除*+address, *
小程序 日历 左右滑动
qq_42897782的博客
04-03 2130
效果图 wxml <scroll-view class="scroll-view" scroll-left="{{scrollLeftIndex*itemWidth}}" scroll-x scroll-with-animation> <view class='item' style='width:{{itemWidth}}px' wx:for="{{da...
Jquery实现可左右滑动日历
tian154731的博客
02-24 990
通过Jquery实现自定义可左右滑动日历 如何使用： 1. html写法 <body> <div style="width: 100%; height: 72px; background: #e4e4e4;"> <div style="width: 100%; height: 24px; line-height: 24px;"> <p style="color: #323232; width: 14.2%; float: left; t
jQuery移动端日历考勤记录
墨鱼部落格
03-15 415
jQuery移动端日历考勤记录 jQuery日历插件制作一款可以选择年月日历的考勤记录插件。可以记录每日考勤打卡情况效果。 演示地址 下载地址
移动端日历组件设计与实现
CRMEB小程序商城的博客
04-19 4794
前言 在大多数的客户端应用中，日期的选择与操作是一个常见的功能，使用日历组件完成对于这一功能的实现，往往是一个高效的解决方案。对于日历组件的设计与开发，在常见的开源项目中，通常有两种设计思路： 横向切换展示，默认渲染单个月份，通过按钮或左右滑动，进行月份切换； 纵向切换展示，默认渲染展示多个月份，上下滑动进行月份切换； 例如添加 picker 进行视图切换，添加自定义按钮，日期单选/多选，自定义文案，日期范围限制等等功能，这些基本都是在两种思路的基础上进行的功能扩展。 在日常的应用中，两种方式各有优劣：
jQuery滚动选择日期日历插件
ICode联盟
03-27 458
下载地址 手机网站经常出现的上下滑动选择日期，这个上下滑动日历插件效果还不错，值得一用。 dd:
amaze ui日期选择器
benmin1的博客
06-30 5964
<div class="am-input-group am-datepicker-date date" data-am-datepicker="{format: 'yyyy-mm-dd'}"> <input id="date" name="entity.date" type="text" class="am-form-field" style="background-color:#fff;
jQuery手机移动端日期时间选择代码
06-10
这是一款兼容PC端和移动端的时间插件下载，jQuery手机移动端日期时间选择代码特效。
JQ版本自定义日历控件
03-13
JQ版本自定义日历控件
单行横向滑动的日历控件
08-17
单行横向滑动的日历控件，可设置起始结束日期
jQuery移动端扁平化日历带事件代码.zip
07-11
jQuery移动端日历带事件代码是一款带农历日历，显示当日课表待办事项列表代码。 function announceList(v){ console.log(v) if(v.children().hasClass('sc-mark-show')){ var year = $('.sc-select-year').text(); var monthCH = $('.sc-select-month').text(); var day = v.children()[1].innerText; var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH) 1; var date = year '-' month '-' day; var content = mark[date]; var matterHtml=''; for(var i=0;i<content.length;i ){ matterHtml ='' '' '' content[i].title '' '' content[i].startTime ' - ' content[i].endTime ''; } $('.matter').html(matterHtml); }else{ var matterHtml='' matterHtml ='当前日期暂无活动'; $('.matter').html(matterHtml); } }
jQuery-3.6.0.min.js
最新发布
11-14
jQuery-3.6.0.min.js
jquery-3.6.0.js
01-07
jquery下载后粘贴即可使用
jquery-3.6.0.min(1).js
12-05
jquery-3.6.0.min(1).js
jquery-3.6.0.min.js（jQuery下载）
03-17
目前主要用的jquery
jquery移动端实现阶段日历（非整年整月，只一个周期）
张井乙ccccyc的博客
09-06 1306
jquery移动端实现阶段日历（非整年整月，只一个周期）如有更好的解决方案，欢迎留言讨论切磋~ 不知道能不能看懂标题。。。实在不知该怎么用标题描述。。。本文实现的是20天的移动端日历，能选择，带左右翻页，主要用于一个周期内选择时间，不需要展示整年整月以及农历，节假日。 下边上图以便更好理解本文内容。 HTML div布一个表格，10天为一个展示，并列两个，可左右切换
jquery-3.6.0.min.js下载
09-12
jquery-3.6.0.min.js是一个JavaScript库，...需要注意的是，为了正确使用jQuery，确保在引入jquery-3.6.0.min.js文件之前，先引入jQuery所依赖的库，如jQuery依赖的jQuery Migrate插件等。 希望以上解答对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值