一个基于jquery的周日历,简单易懂

周日历

一个基于jquey跟moment的周日历?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

</head>
<body>
 <div class="header">

 </div>
    <div>
        <table>
            <thead class="thead">

            </thead>

            <tbody class="tbody">

            </tbody>

        </table>
    </div>

    <script>
        var jia = 0;
  function week(date){
      var zhou = moment(date).format('dddd');
      var num = 0;
      if(zhou == 'Monday'){
          num = 0
      }else if(zhou == 'Tuesday'){
          num = -6
      }else if(zhou == 'Wednesday'){
          num = -5
      }else if(zhou == 'Thursday'){
          num =-4
      }else if(zhou == 'Friday'){
          num = -3
      }else if(zhou == 'Saturday'){
          num = -2
      }else if(zhou == 'Sunday'){
          num = -1
      }
      var number1 = moment((new Date(date).getTime())-(num*24*60*60*1000)).format('YYYY-MM-DD');
      var last_monday = moment(number1).subtract('days',7).format('YYYY/MM/DD');//周一日期
      var last_monday1 = moment(number1).subtract('days',6).format('YYYY/MM/DD');//周二日期
      var last_monday2 = moment(number1).subtract('days',5).format('YYYY/MM/DD');//周三日期
      var last_monday3 = moment(number1).subtract('days',4).format('YYYY/MM/DD');//周四日期
      var last_monday4 = moment(number1).subtract('days',3).format('YYYY/MM/DD');//周五日期
      var last_monday5 = moment(number1).subtract('days',2).format('YYYY/MM/DD');//周六日期
      var last_sunday = moment(number1).subtract('days',1).format('YYYY/MM/DD');//周日日期
      $('.header').html('
上一周'+last_monday+'-'+last_sunday+'下一周
'
) var tr = '姓名星期一'+last_monday+'星期二'+last_monday1+'星期三'+last_monday2+'星期四'+last_monday3+'星期五'+last_monday4+'星期六'+last_monday5+'星期日'+last_sunday+'' $('.thead').append(tr) var tr1 = '张三内容一内容二内容三内容四内容五内容六内容七' $('.tbody').append(tr1); } week(moment(new Date().getTime()).format('YYYY-MM-DD')); function nextAge(){ jia = jia-1; $('.header').html(''); $('.thead').html(''); $('.tbody').html(''); week(moment((new Date().getTime())+(jia*7*24*60*60*1000)).format('YYYY-MM-DD')); } function nextNew(){ jia++; $('.header').html(''); $('.thead').html(''); $('.tbody').html(''); week(moment((new Date().getTime())+(jia*7*24*60*60*1000)).format('YYYY-MM-DD')); } </script> </body> </html>

复制可以直接看效果
一个基于jquery的周日历,简单易懂_第1张图片
没写样式,凑合看吧

你可能感兴趣的:(一个基于jquery的周日历,简单易懂)