js 实现点击加载-删除-排序-去重时间选择

js 实现点击加载-删除-排序-去重时间选择

js 实现点击加载-删除-排序-去重时间选择

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
        <label class="layui-form-label">时间修改:</label>
        <div class="layui-card-body"  >
          <div id="card" style='width:400px;height:500px' ></div>
        </div>
 </body>
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 <script>
       var start='2019-01-01';
      var end='2019-02-12';
    showTime(start,end);
//显示时间
  function showTime(start,end){ 
 
    var dateOnly = dataScope(start,end);
    var date=getOnlyDate(dateOnly);
    var dateArr=getMaxMinArr(date);
    var _html =''
    var count = 0;
    for ( var i = 0; i <dateArr.length; i++){
      _html += "<span class='tag label label-info' style='float:left;margin:2px;' data ='"+dateArr[i]+"'>" +
              "<font color='#006400'>"+dateArr[i]+"</font>" +
              "<span class='label label-info' data-role='remove'><font color='red'>X</font> <i style='color: mediumvioletred' class='layui-icon layui-icon-close-fill'></i></span></span>";
      count++;
    } 
    $("#card").append(_html);
  }
  //日期删除
  $("#card").on("click",'span',function(){
    $(this).remove();
  })
    //时间排序
  function getMaxMinArr(array) {
    if(Object.prototype.toString.call(array).slice(8,-1) ==='Array'){
      for (var i = 1; i < array.length; i++) {
        var key = array[i];
        var j = i - 1;
        while (j >= 0 && array[j] > key) {
          array[j + 1] = array[j];
          j--;
        }
        array[j + 1] = key;
      }
      return array;
    }else{
      return 'array is not an Array!';
    }
  }
  //时间去重
  function getOnlyDate(dateArr) {
    var dateNew=[];
    dateNew=dateArr;
    var span= $('#card').find('.tag');
    for (var i= 0; i<span.length; i++) {
      var spanTemp = span[i];
      var dateName = spanTemp.getAttribute('data');
      dateNew.push(dateName);
    }
    //开始去重
    var ret = [];
    for (var i = 0; i < dateNew.length; i++) {
      if (dateNew.indexOf(dateNew[i]) == i) {
        ret.push(dateNew[i]);
      }
    }
    $("span.tag").remove();
    return ret;
  }

  //计算时间差
  function  dataScope(value1, value2) {
    var getDate = function(str) {
      var tempDate = new Date();
      var list = str.split("-");
      tempDate.setFullYear(list[0]);
      tempDate.setMonth(list[1] - 1);
      tempDate.setDate(list[2]);
      return tempDate;
    }
    var date1 = getDate(value1);
    var date2 = getDate(value2);
    if (date1 > date2) {
      var tempDate = date1;
      date1 = date2;
      date2 = tempDate;
    }
    date2.setDate(date2.getDate() + 1);
    date1.setDate(date1.getDate() );

    var dateArr = [];
    var i = 0;
    while (!(date1.getFullYear() == date2.getFullYear()
            && date1.getMonth() == date2.getMonth() && date1.getDate() == date2
                    .getDate())) {
      var dayStr =date1.getDate().toString();
      if(dayStr.length ==1){
        dayStr="0"+dayStr;
      }
      var m;
      if(date1.getMonth()>=9){
        m="-"+(date1.getMonth()+1);
      }else{
        m="-0"+(date1.getMonth()+1);
      }
      console.log(m)
      dateArr[i] = date1.getFullYear() +m + "-" + dayStr;
      i++;

      date1.setDate(date1.getDate() + 1);
    }
    return dateArr;
  }
 </script>
</html>