日期插件layui的》laydate

<form id="searchForm" data-parsley-validate role="form" >
	<div class="form-select-group">
		<label class="col-sm-4 form-control-label">开始日期:</label>
		<div class="col-sm-8 form-control-input">
			<input type="text" id="ksrq" name="ksrq" class="form-control" placeholder="开始日期"  >
		</div>
	</div>
	<div class="form-select-group">
		<label class="col-sm-4 form-control-label">结束日期:</label>
		<div class="col-sm-8 form-control-input">
			<input type="text" id="jsrq" name="jsrq" class="form-control" placeholder="结束日期"  >
		</div>
	</div>
	<div>
		<button id="chaxunButton" type="submit" class="btn btn-primary btn-form-submit">查询</button>
	</div>
</form>
<script type="text/javascript">
    var newDate=new Date();
    var ymdTodayDate=newDate.getFullYear()+'-'+(newDate.getMonth()+1)+'-'+newDate.getDate();
	// 当月第一天 	"yyyy-MM-dd"
    var ymdMonFirstDate=newDate.getFullYear()+'-'+(newDate.getMonth()+1)+'-'+'01';
	// 当天			"yyyy-MM-dd"
    var ymdTodayDateStr=""+ymdTodayDate;
    var ksrq="";
    var jsrq="";
    /**
     * @Description: 
		开始日期默认设初值为当月第一天,最大值当天;
		结束日期默认设置初值为当天,最大值当天;
		开始日期小于等于结束日期
	 * @CodeSteps:
     * 
     */
    // 开始日期
    var ksrqDom = laydate.render({
        elem: '#ksrq',
        max: ymdTodayDateStr,
        type: 'date',
        value: $('#ksrq').val(),
        done: function (value, date) {
            console.log("value--"+value+"date开始时间--"+date);
			// 如果开始日期不为空,则结束日期最小值为开始日期
            if (value != '') {
                jsrqDom.config.min= {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date
                };
                ksrq=$("#ksrq").val();
                jsrq=$("#jsrq").val();
                var valueRe=value.replace(/-/g,"");
                var jsrqRe=jsrq.replace(/-/g,"");
                if(jsrq!='' && parseInt(valueRe)>parseInt(jsrqRe)){
                    ns.tip.toast.error("开始日期不能大于结束日期");
                }
            }
			// 如果开始日期为空,则结束日期最小值为空
            else {
                jsrqDom.config.min= {
                    year: '',
                    month: '',
                    date: ''
                };
            }
 
        }
    });
    // 结束日期
    var jsrqDom = laydate.render({
        elem: '#jsrq',
        max: ymdTodayDateStr,
        type: 'date',
        value: $('#jsrq').val(),
        done: function (value, date) {
            console.log("value--"+value+"date结束时间--"+date);
            // 如果结束日期不为空,则开始日期的最大值为结束日期
            if (value !== '') {
                ksrqDom.config.max== {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date
                };
            }
        }
    });
    // 页面初始化加载
    $(document).ready(function(){
		// 日期设初值
        $('#ksrq').val(ymdMonFirstDate);
        $('#jsrq').val(ymdTodayDate);
        // ksrqDom.config.value=ymdMonFirstDate;
        // jsrqDom.config.value=ymdTodayDate;
        console.log("初始化打印--"+$('#ksrq').val()+$('#jsrq').val());
		// 手动点击查询按钮
        $('#chaxunButton').trigger("click");
    });
</script>

### 调整或设置 LayuiLaydate 插件的显示位置 Layui 的 `laydate` 插件默认会根据触发元素的位置自动计算并展示日期选择器。然而,在某些情况下,可能需要手动调整其弹出位置以满足特定需求。 可以通过自定义 CSS 或者利用插件本身的参数来实现这一目标。以下是具体方法: #### 方法一:通过 `position` 参数调整 虽然官方文档并未直接提供 `position` 参数用于控制弹出位置,但在实际开发中可以尝试修改样式或者监听事件动态调整位置。如果希望更灵活地控制,可考虑以下方式: ```javascript layui.use('laydate', function(){ var laydate = layui.laydate; laydate.render({ elem: '#test1', type: 'datetime', trigger: 'click', ready: function(date){ setTimeout(function() { var picker = document.querySelector('.layui-laydate'); if(picker){ picker.style.top = '20px'; // 设置顶部距离 picker.style.left = '100px'; // 设置左侧距离 } }, 0); }, done: function(value, date, endDate){ console.log(value); // 输出最终值 } }); }); ``` 上述代码中的 `ready` 函数会在日期选择器初始化完成后调用[^1],从而允许开发者在此阶段对 DOM 进行动态操作,例如重新定位日期选择框。 #### 方法二:使用外部容器绑定 另一种解决方案是将日期选择器渲染到指定的父级容器内,而不是依赖于全局范围内的浮层管理机制。这通常适用于复杂布局场景下的精确控制。 ```javascript layui.use(['laydate', 'layer'], function(){ var laydate = layui.laydate, layer = layui.layer; laydate.render({ elem: '#test1', position: 'fixed', // 可选固定模式 container: 'body', // 将日期选择器放置在 body 下方 done: function(value, date, endDate){ var pickerBox = document.querySelector('.layui-laydate-main'); if(pickerBox){ pickerBox.parentNode.style.position = 'absolute'; pickerBox.parentNode.style.top = '80px'; pickerBox.parentNode.style.left = '150px'; } } }); }); ``` 此方法的核心在于更改 `container` 属性指向具体的 HTML 容器节点,并配合 JavaScript 动态设定该节点相对于页面其他部分的具体坐标[^3]。 #### 方法三:CSS 自定义覆盖 对于简单的项目而言,也可以仅依靠外加样式表完成微调工作而不必深入改动逻辑结构。比如下面的例子展示了如何强制改变所有由 `laydate` 渲染出来的组件外观特性: ```css /* 修改日期面板整体偏移 */ .layui-laydate{ top: unset !important; bottom: auto !important; transform-origin: center top !important; } /* 针对某个特殊 ID 的输入框关联的日历单独处理 */ #specialInput+.layui-unselect .layui-laydate{ /* 假设 specialInput 是你的 input id */ margin-top: -70px!important; } ``` 以上三种途径各有优劣,需依据实际情况选取最合适的方案实施优化[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值