时间选择框+向上向下无限循环时间滚动列表，选中一个时间实现选择框与时间列表同步

一、效果如图：

二、结构
引入layui

<div class="zdyzszmn-top">
	<div class="date">
    	<div>
	    	<input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
            <img src="./images/c01.png" alt="">
        </div>
        <div class="date-list"></div>
   </div>
</div>

三、js

// 中国标准时间化成年月日格式
function formatDateTime (date) {
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? ('0' + m) : m;
  var d = date.getDate();
  d = d < 10 ? ('0' + d) : d;
  var h = date.getHours();
  var minute = date.getMinutes();
  minute = minute < 10 ? ('0' + minute) : minute;
  // return y + '-' + m + '-' + d+' '+h+':'+minute;
  return y + '-' + m + '-' + d
};


//获取指定日期的相差多少天的日期
// 指定日期--dateParameter格式：("2022-04-01或者2022/04/01")
// 相差多少天--num为数字
// 向前推 type为1；向后推 type为2
function pushByTransDate(dateParameter, num, type) {
  var translateDate = "", dateString = "", monthString = "", dayString = "";
  translateDate = dateParameter.replace("-", "/").replace("-", "/"); 
  var newDate = new Date(translateDate);
  newDate = newDate.valueOf();
  if(type == 1){
    newDate = newDate - num * 24 * 60 * 60 * 1000; // 向前推num天
  }else{
    newDate = newDate + num * 24 * 60 * 60 * 1000; // 向后推num天
  }
  // 时间戳转化成中国标准时间
  newDate = new Date(newDate);
  // 中国标准时间化成年月日格式
  dateString = formatDateTime(newDate)
  return dateString;
};

let dateList = [] // 时间列表数组
let acurrentDate = '' // 当前时间（年月日格式）
let currentDate = '' // 当前选中的时间（年月日格式）

// 默认当前时间的前一天
let aTime = pushByTransDate(acurrentDate, 1, 1)
currentDate = aTime

// 渲染时间选择框默认时间
dateLay(currentDate)

// 根据date时间改变时间框的值并改变时间列表值
function dateLay(data){
  //日期范围
  layui.use('laydate', function(){
    var laydate = layui.laydate;
    //常规用法
    laydate.render({
      elem: '#test1'
      ,value: data
      ,done: function(value, date, endDate){
        currentDate = value

        dateList = [];
        for(var a=6;a>0;a--){
          let nTime = pushByTransDate(acurrentDate, a, 1)
          dateList.push(nTime)
        }
        dateList.push(acurrentDate)
        
        renderDateList()
      }
    });
  })
};


// 向前推6天
for(var a=6;a>0;a--){
  let nTime = pushByTransDate(acurrentDate, a, 1)
  dateList.push(nTime)
}
dateList.push(acurrentDate)

renderDateList()

// 渲染页面
function renderDateList() {
  const prev = dateList[dateList.findIndex(ele => ele === currentDate) - 1]
  const next = dateList[dateList.findIndex(ele => ele === currentDate) + 1]
  const dateListDom = dateList.map((ele, index) => `<div class="date-item ${ele === currentDate ? 'active' : ''}" onClick="handleDateClick('${ele}',${index})">${ele}</div>`).join('')
  $('.zdyzszmn-top .date .date-list').html(`<div class="before" onClick="handleTurns('${prev || ''}','prev')"></div>${dateListDom}<div class="after"  onClick="handleTurns('${next || ''}','after')"></div>`)
};

// 向上\向下按钮点击事件
function handleTurns(date,action) {
	for(var i = 0; i<dateList.length; i++){
		if(date == dateList[i]){
			date && handleDateClick(date,i)
		}
	}
  //console.log(date, !!date);
  if(!date){
    if(action == 'prev'){
      dateList.pop()
      let preDate = new Date(currentDate).getTime() - 24 * 60 * 60 * 1000
      dateList.splice(0, 0, getSimpleDate(preDate))
      renderDateList()
    } else if(action == 'after'){
      dateList.shift()
      let afterDate = new Date(currentDate).getTime() + 24 * 60 * 60 * 1000
      dateList.push(getSimpleDate(afterDate))
      renderDateList()
    }
  }
  currentDate = date;
};

// 时间戳转化成中国标准时间格式
function getSimpleDate(date) {
  let dd = new Date(date) // 时间戳转化成中国标准时间格式
  let ymd = formatDateTime(dd)
  // 中国标准时间格式 =》年-月-日格式
  // let y = dd.getFullYear()
  // let m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth())
  // let d = dd.getDate() < 10 ? '0' + (dd.getDate()) : (dd.getDate())
  // return y + '-' + m + '-' + d
  return ymd
}

// 时间列表的点击事件
function handleDateClick(date, index) {
   currentDate = date;
   dateLay(currentDate)
   
   renderDateList()
}