laydate 使用版本号:laydate-v5.0.9
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>
重置 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
状态,min
和 max
还是可以的
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()
作者:sunsboyxu
链接:https://www.jianshu.com/p/e0b95d509970
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。