layer时间插件

引入:
        <link rel="stylesheet" href="<{$cdnsite}>/default/common/layui/css/layui.css?<{$version}>" />
    <script type="text/javascript" src="<{$cdnsite}>/default/js/jquery-1.9.1.min.js?<{$version}>1"></script>
    <script type="text/javascript" src="/default/common/layui/layui.js"></script>

PHP代码:
 $searchdata = array(
            'name' => '',
            'mobile' => '',
            'timeset' => '',
            'stime' =>  date("Y-m-d",time()),
            'etime' =>  date("Y-m-d",time()),
            'status' => '',
            'city' => '',
        );


HTML代码:
<input type="hidden" class="layui-input" id="p_stime" value="<{$searchdata.stime}>"  name="stime" >
<input type="hidden" class="layui-input" id="p_etime" value="<{$searchdata.etime}>"  name="etime" >


                <div class="layui-inline">
            <label class="layui-form-label">时间选择:</label>
            <div class="layui-input-inline" id="timeset">
                <select name="timeset" lay-filter="text1">
                    <option value="">-不限-</option>
                    <option value="today" <{if $searchdata.timeset eq 'today'}>selected
                    <{/if}>>今日</option>
                    <option value="yesterday" <{if $searchdata.timeset eq 'yesterday'}>selected
                    <{/if}>>昨天</option>
                    <option value="lastweek" <{if $searchdata.timeset eq 'lastweek'}>selected
                    <{/if}>>最近7天</option>
                    <option value="thismonth" <{if $searchdata.timeset eq 'thismonth'}>selected
                    <{/if}>>本月</option>
                    <option value="lastmonth" <{if $searchdata.timeset eq 'lastmonth'}>selected
                    <{/if}>>上月</option>
                    <option value="customize" <{if $searchdata.timeset eq 'customize'}>selected
                    <{/if}>>自定义</option>
                </select>
            </div>
        </div>
        <div <{if $searchdata.timeset eq 'customize'}> style="display:''";<{else}>style="display:none;"<{/if}>
             class="layui-inline" id="customtime" style="display: none;">
            <label class="layui-form-label">日期选择:</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" class="layui-input" id="stime" >
            </div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" class="layui-input" id="etime"  >
            </div>
        </div>



JS代码:
 var stime = '<{$searchdata.stime}>';
    var  etime = '<{$searchdata.etime}>';
    layui.use(['form', 'laydate'], function() {
        var form = layui.form;

        var laydate = layui.laydate;
        //日历格式

        var stime_box = laydate.render({
            elem: '#stime', //需显示日期的元素选择器
            value: stime,
            done:function(value,date){
                $('#p_stime').val(value);
            }
        });
        //日历格式
        var etime_box = laydate.render({
            elem: '#etime', //需显示日期的元素选择器
            value: etime,
            done:function(value,date){
                $('#p_etime').val(value);
            }
        });

        //select下拉
        form.on('select(text1)', function(data) {
            if(data.value == 'customize') {
                $('#customtime').show();
            } else {
                $('#stime').val('');
                $('#etime').val('');
                $('#customtime').hide();
            }
        });
    });

猜你喜欢

转载自www.cnblogs.com/mrszhou/p/9000890.html