laydate 时间范围的限制

laydate 使用版本号:laydate-v5.0.9

1.png

2.png

3.png

4.png

5.png
html 元素:
 <div class="form-list form-list-column">
        <div class="form-label">
            <span class="form-title">选择开始日期:</span>
            <input type="text" id="startDate" placeholder="开始日期">
        </div>
        <div class="form-label">
            <span class="form-title">选择结束日期:</span>
            <input type="text" id="endDate" readonly placeholder="结束日期">
        </div>
        <div class="opera-area">
            <div type="button" class="btn btn-lg btn-no-radius btn-ok">确定</div>
            <div type="button" class="btn btn-lg btn-no-radius btn-cancel">取消</div>
        </div>
  </div>

<script src="/lib/laydate/laydate.js"></script>
重置 laydate样式

.layui-laydate-header i,
 .layui-laydate-content table{
    font-size: 13px!important;
  }
.layui-laydate-footer span:hover{
    color: #0079c4!important;
 }

js代码修改:
要么把 btns:['clear', 'confirm'],要么把 showBottom: false 选择 现在 会解除限制
注:选择更换时间的时候,会按照选择框的时间 来做 active 状态,minmax 还是可以的

testObj = {
    init: function(){
        this.bindEvent();
    },
    bindEvent: function(){
        // 开始时间
        var start = laydate.render({
            elem: '#startDate',
            theme: '#0079c4',
            trigger: 'click',
            btns: ['clear', 'confirm'],
            // showBottom: false,
            done: function (value, date) {
                end.config.min = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date,
                    hours: date.hours,
                    minutes: date.minutes,
                    seconds: date.seconds
                };
                // 作为 结束选择 的 开始时间
                end.config.value = value;
            }
        });
        // 结束时间
        var end = laydate.render({
            // 绑定元素
            elem: '#endDate',
            //  主题色
            theme: '#0079c4',
            //  触发方式
            trigger: 'click',
            // 底部按钮
            btns: ['clear', 'confirm'],
            // showBottom: false,
            // 选择完成回调
            done: function (value, date) {
                start.config.max = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date,
                    hours: date.hours,
                    minutes: date.minutes,
                    seconds: date.seconds
                };
                start.config.value = value;
            }
        });
        laydate.render(start);
        laydate.render(end);
    }
}
testObj.init()

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 5,747评论 4 12
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 19,476评论 1 42
  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 7,084评论 0 11
  • 秋雨不停下着,淅沥。。。淅沥。。。 撑着雨伞踯躅于林阴小道 听着潺潺的泉水声,欣赏着林中的雨景 肺部并发出新暖气 ...
    袁夜阅读 78评论 7 7
  • 一夜春风,一夜春雨。 我背着书包上学时,天开始放晴了。 我发现路边的樱花开了,这般景象没法比喻,仿佛走...
    AA我是红太狼阅读 94评论 0 0