有什么原生的ui库，或者jquery的UI库，有这种时间范围选择插件 ? 这个是element-ui的组件，但是项目需求，不能用这个组件，是基于jquery的项目

有什么原生的ui库，或者jquery的UI库，有这种时间范围选择插件(组件)?

发布于
2020-03-20

更新于
2020-03-20

样式可以自己模仿element-ui重置掉，也支持你给的时间范围的格式。

/* laydate */
$color : #333; //颜色
$color_s : #999; 
$activeColor: #409eff;
$disableColor: #c0c4cc;
$boxShadow: 0 2px 12px 0 rgba(0,0,0,.1);
$background : rgba(255,255,255,1);
$background_active : #efefef;
$plainBtnBgc : #ECF5FF;


body{
    .layui-laydate{
        font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
    }
    .layui-laydate, .layui-laydate-hint {
            //border: $border;
            box-shadow: $boxShadow;
            background-color: $background;
            color: $color;
    }
    .layui-laydate-header i{
        color: $color_s;
        font-size: 12px;
    }
    .layui-laydate-header i:hover, 
    .layui-laydate-header span:hover{
        color: $activeColor;
    }
    
    .layui-laydate-list{
        background-color: $background_active;
    }
    .layui-laydate .layui-this{
        //color: $activeColor !important;
        //background-color: $plainBtnBgc !important;
        //border: 1px solid $activeColor;
        color: #fff;
        background: $activeColor !important;
    }
    
    .layui-laydate-content td:hover, 
    .layui-laydate-list li:hover{
        color: $activeColor;
        background-color: transparent;
    }
    
    .layui-laydate-content .laydate-day-next, 
    .layui-laydate-content .laydate-day-prev{
        color: $disableColor;
    }
    .layui-laydate-content td.laydate-selected{
        background-color: #f2f6fc;
    }
    .laydate-selected:hover {
        background-color: #f2f6fc!important;
    }
    
    .laydate-footer-btns span{
        /* border: $border;
        background-color: $background; */
        color: $color;
        background-color: $plainBtnBgc;
        border: 1px solid $activeColor;
    }
    .layui-laydate-footer span:hover{
        color: $activeColor;
    }
    
    .layui-laydate-content td, 
    .layui-laydate-content th{
        color: $color;
        line-height: 26px;
    }
}