layDate 日期与时间组件

1 layDate下载

https://dev.layuion.com/extend/search/layDate/

2 layDate组件的季度、半年的选择

1）首先引入laydate.js文件；

<script type="text/javascript" src="${rc.contextPath}/static/js/laydate.js"></script>

注：其次layDate只能渲染一次，不可重复渲染，所以想要实现多次改变的情况下需要将之前的载体input以及div盒子利用remove函数移除；

2）代码

//html内容拼接
function HtmlJoin(html_yydj,html_yymc){
  var htmlTjzq='';
  var htmlTjsj='';
  var htmlYydj='';
  var htmlYymc='';
  htmlTjzq+= '        <label class="col-xs-1 control-label" >统计周期：</label>\n'        
      +  '        <div class="col-xs-2" > \n'
      +  '          <div class="col-xs-12">\n'
      +  '            <select id="tjzq" onchange="changeTjzq()" class="js-example-templating js-states form-control sedrop" required></select>\n'
      +  '          </div>\n'
      +  '        </div>\n';
        
  htmlTjsj+= '        <label class="col-xs-1 control-label">统计时间：</label>\n'
      +  '        <div class=" col-xs-2">\n'
      +  '          <div class="input-group date" id="tjsjdiv">\n'
      +  '            <input type="text" class="form-control" id="tjDate" autocomplete="off" placeholder="请选择日期">\n'
      +  '            <div class="input-group-addon" id="tjsj">\n'
      +  '              <span class="fa fa-calendar" aria-hidden="true"></span>\n'
      +  '            </div>\n'
      +  '          </div>\n'
      +  '        </div>\n';
        
  htmlYydj+= '        <label class="col-xs-1 control-label">医院等级：</label>\n'
      +  '        <div class=" col-xs-2">\n'
      +  '          <select id="yydj" name="yydj" onchange="changeYydj()" class="js-example-templating js-states form-control" style="height: 31px"><option value="all">全部</option></select>\n'
      +  '        </div>\n';
  
  htmlYymc+= '        <label class="col-xs-1 control-label">医院名称：</label>\n'
      +  '        <div class=" col-xs-2">\n'
      +  '          <select id="org_code" name="org_code" class="js-example-templating js-states form-control" style="height: 31px"><option value="all">全部</option></select>\n'
      +  '        </div>\n'; 
  
  $('#GatherDiv').append(htmlTjzq);
  $('#GatherDiv').append(htmlTjsj);  
  if(html_yydj){
    $('#GatherDiv').append(htmlYydj);
  }
  if(html_yymc){
    $('#GatherDiv').append(htmlYymc);
  }
  monthInit();
}
function changeYydj(){}
//统计时间初始化函数
function monthInit(){
  var nowdate = new Date();
  nowyear = nowdate.getFullYear();
  nowmonth = nowdate.getMonth();
  if(nowmonth < 10){
    nowmonth = '0' + nowmonth;
  }
  if(nowmonth == 0){
    nowyear = nowyear - 1;
    nowmonth = 12;
  }
  nowdate = nowyear + '-' + nowmonth;
  laydate.render({
    elem: '#tjDate',
    eventElem: '#tjsj',
    trigger: 'click',
    type: 'month',
    theme: '#0B9284',
    btns: ['now','confirm'],
    value : nowdate,
    max:0
  });
}

//月度
function TjsjMonth(){
  var nowdate = new Date();
    nowyear = nowdate.getFullYear();
    nowmonth = nowdate.getMonth();

    if(nowmonth < 10){
       nowmonth = '0' + nowmonth;
    }
    if(nowmonth == 0){
       nowyear = nowyear - 1;
       nowmonth = 12;
    }
    nowdate = nowyear + '-' + nowmonth;        
  $("#tjDate").remove();
  $("#tjsj").remove();
  var htmlForm='';
    htmlForm+='<input type="text" class="form-control" id="tjDate" autocomplete="off" placeholder="请选择日期">\n';    
    htmlForm+='<div class="input-group-addon" id="tjsj">\n'
          +'<span class="fa fa-calendar" aria-hidden="true"></span>\n'
        +'</div>\n';                                       
    $('#tjsjdiv').append(htmlForm);  
      
    laydate.render({
      elem: '#tjDate',
      eventElem: '#tjsj',
      trigger: 'click',
      type: 'month',
      theme: '#0B9284',
      btns: ['now','confirm'],
      value : nowdate,
      max:0
    });
}
//季度
function TjsjSeason(){
      $("#tjDate").remove();
      $("#tjsj").remove();
      var htmlForm='';
      htmlForm+='<input type="text" class="form-control" id="tjDate" autocomplete="off" placeholder="请选择日期">\n';
      
      htmlForm+='<div class="input-group-addon" id="tjsj">\n'
            +'<span class="fa fa-calendar" aria-hidden="true"></span>\n'
          +'</div>\n';                                       
      $('#tjsjdiv').append(htmlForm);     
      renderSeasonDate(document.getElementById('tjDate'),document.getElementById('tjsj'),1);
}
    
// 季度计算 
var quarterFn = function(month){
    return month < 4 ? 1 :
              month < 7 ? 2 :
                  month < 10 ? 3 : 4;
}
    
    function renderSeasonDate(ohd,tjsje,sgl){   
      var Season_date = new Date();
      Season_year = Season_date.getFullYear();
      Season_month = Season_date.getMonth() + 1;

      var Seasonnow =  quarterFn(Season_month);
      
      if(Seasonnow != 1){
        Seasonnow = Seasonnow - 1;
      }
      
      if(Seasonnow == 1){
        Season_year = Season_year - 1;
        Seasonnow = 4;
      }    
      Seasonnow = Season_year + "年" + Seasonnow + "季度";
      
      var ele = $(ohd); 
      laydate.render({  
      elem: ohd,
      eventElem: tjsje,
      trigger: 'click',
      type: 'month',  
      format: 'yyyy年M季度', 
      value :Seasonnow,
      btns: ['confirm'],
      range: sgl?null:'~', 
      ready: function(value, date, endDate){
        var hd = $("#layui-laydate"+ele.attr("lay-key"));  
        if(hd.length>0){  
          hd.click(function(){  
            ren($(this));  
          });  
        }  
        ren(hd);  
      },  
      done: function(value, date, endDate){ 
        if(!isNull(date)&&date.month>0&&date.month<5){  
          ele.attr("startDate",date.year+"-"+date.month);  
        }else{
          ele.attr("startDate","");
        }
        if(!isNull(endDate)&&endDate.month>0&&endDate.month<5){  
          ele.attr("endDate",endDate.year+"-"+endDate.month)  
        }else{
          ele.attr("endDate","");
        }  
      }  
      });  
      var ren=function(thiz){  
        var mls=thiz.find(".laydate-month-list");  
        mls.each(function(i,e){  
          $(this).find("li").each(function(inx,ele){  
            var cx = ele.innerHTML;  
            if(inx<4){  
              ele.innerHTML=cx.replace(/月/g,"季度");  
            }else{  
              ele.style.display="none";  
            }  
          });  
        });  
      }  
    }
    
    function isNull(s){
      if(s==null||typeof(s)=="undefined"||s=="")return true;
      return false;
    }

    //半年
    function TjsjHalfYear(){
      $("#tjDate").remove();
      $("#tjsj").remove();
      var htmlForm='';
      htmlForm+='<input type="text" class="form-control" id="tjDate" autocomplete="off" placeholder="请选择日期">\n';
      
      htmlForm+='<div class="input-group-addon" id="tjsj">\n'
            +'<span class="fa fa-calendar" aria-hidden="true"></span>\n'
          +'</div>\n';                                       
      $('#tjsjdiv').append(htmlForm);  
      
      renderHalfYearDate(document.getElementById('tjDate'),document.getElementById('tjsj'),1);
    }
    
    // 年度计算 
      var quarterHalfYear = function(month){
          return month < 7 ? 1 : 2;              
      }
    
    function renderHalfYearDate(ohd,tjsje,sgl) {
      var HalfYear_date = new Date();
      HalfYear_year = HalfYear_date.getFullYear();
      HalfYear_month = HalfYear_date.getMonth() + 1;

      var HalfYearnow =  quarterHalfYear(HalfYear_month);
      
      if(HalfYearnow == 1){
        HalfYear_year = HalfYear_year - 1;
        HalfYearnow = 2;
      }
      else{
        HalfYearnow = HalfYearnow - 1;
      }

      if(HalfYearnow == 1){
        HalfYearnow = HalfYear_year + '-' + "上半年";
      }
      if(HalfYearnow == 2){
        HalfYearnow = HalfYear_year + '-' + "下半年";
      }
      
      var ele = $(ohd);
            laydate.render({
              elem: ohd,
              eventElem: tjsje,
              trigger: 'click',
                type: 'month',
                format: 'yyyy-h半年',
                value : HalfYearnow,
                btns: ['confirm'],
                range: sgl ? null : '~',
                ready: function () {
                  var hd = $("#layui-laydate" + ele.attr("lay-key"));
                  console.log(hd.length);
                    if (hd.length > 0) {
                      hd.click(function () {
                        ren($(this));
                      });
                    }
                   ren(hd);
               }
           });
           var ren = function (thiz) {
             var mls = thiz.find(".laydate-month-list"); 
               mls.each(function (i, e) {                
                 $(this).find("li").each(function (inx, ele) {
                   var cx = ele.innerHTML;
                   if (inx < 2) {                     
                     cx = cx.replace(/月/g, "半年");
                     ele.innerHTML = cx.replace(/一/g, "上").replace(/二/g, "下");
                       } 
                   else 
                   {
                     ele.style.display = "none";
                       }
                   });
               });  
           }
        }
    //年度
    function TjsjYear(){
      var Year_date = new Date();
      Year_year = Year_date.getFullYear() - 1;
      
      $("#tjDate").remove();
      $("#tjsj").remove();
      var htmlForm='';
      htmlForm+='<input type="text" class="form-control" id="tjDate" autocomplete="off" placeholder="请选择日期">\n';
      
      htmlForm+='<div class="input-group-addon" id="tjsj">\n'
            +'<span class="fa fa-calendar" aria-hidden="true"></span>\n'
          +'</div>\n';                                       
      $('#tjsjdiv').append(htmlForm);  
      
      laydate.render({
        elem: '#tjDate',
        eventElem: '#tjsj',
        trigger: 'click',
        type: 'year',
        theme: '#0B9284',
        btns: ['now','confirm'],
        value : Year_year,
        max:0
      });
    }
    
      //统计时间和统计周期的联动
    function changeTjzq(){
      //1 月度  2 季度     3半年   4年度       
      var tjzq = $("#tjzq").val();
      if(tjzq == 'monthly'){
        TjsjMonth();        
      }
      if(tjzq == 'quarter'){
        TjsjSeason();
      }
      if(tjzq == 'halfyear'){
        TjsjHalfYear();
      }
      if(tjzq == 'year'){
        TjsjYear();
      }        
    }