美文网首页
laydate 时间范围的限制

laydate 时间范围的限制

作者: sunsboyxu | 来源:发表于2018-12-24 15:30 被阅读0次

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()

相关文章

网友评论

      本文标题:laydate 时间范围的限制

      本文链接:https://www.haomeiwen.com/subject/frlzkqtx.html