实现点击radio 自动添加时间

本文介绍了一个使用layui框架实现的订单统计查询表单。该表单包括开始时间和结束时间的选择,以及预设时间范围的单选按钮。通过JavaScript实现了日期选择器的功能,并根据用户选择的预设时间范围自动填充起止日期。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

实现的效果



代码

          <form method="post" action="{:url('group/statistics/orderStatistics')}" class="layui-form">
                <div class="layui-form-pane">
                    <div class="layui-form-item">
                        <label class="layui-form-label wd1">开始时间</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" {if isset($startTime)} value="{$startTime}" {/if} required
                            placeholder="开始日期" id="LAY_demorange_s"
                            name="startTime">
                        </div>
                        <label class="layui-form-label wd1">结束时间</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" {if isset($endTime)} value="{$endTime}" {/if} required
                            placeholder="截止日期" id="LAY_demorange_e"
                            name="endTime">
                        </div>
                        <label>
                            <input class="layui-input" id="radio" style="display: none" name="radio">
                        </label>
                        <button type="submit" class="layui-btn">搜索</button>
                    </div>
                </div>
            </form>
            <form class="layui-form" action="">
                <div class="layui-input-block">
                    <input type="radio" lay-filter="time" {if isset($radio) && $radio==7} checked="checked" {/if}
                    name="time_choice" value="7" title="7天">
                    <input type="radio" lay-filter="time" {if isset($radio) && $radio==15} checked="checked" {/if}name="time_choice"
                    value="15" title="15天">
                    <input type="radio" lay-filter="time" {if isset($radio) && $radio==30} checked="checked" {/if}
                    name="time_choice" value="30" title="1个月">
                    <input type="radio" lay-filter="time" {if isset($radio) && $radio==90} checked="checked" {/if}name="time_choice"
                    value="90" title="3个月">
                </div>
            </form>






js

<script>
    layui.use(['layer', 'laydate'], function () {
        var laydate = layui.laydate;
        var start = {
            max: laydate.now(),
            istoday: false,
            choose: function (datas) {
                end.min = datas; //开始日选好后,重置结束日的最小日期
                end.start = datas; //将结束日的初始值设定为开始日
            }
        };
        var end = {
            max: laydate.now(),
            istoday: true,
            choose: function (datas) {
                /*start.max = datas; //结束日选好后,重置开始日的最大日期*/
            }
        };
        document.getElementById('LAY_demorange_s').onclick = function () {
            start.elem = this;
            laydate(start);
        };
        document.getElementById('LAY_demorange_e').onclick = function () {
            end.elem = this;
            laydate(end);
        };
    });
</script>

<script>
    layui.use('form', function () {
        var form = layui.form();
        form.on('radio(time)', function (value) {
            var timeNow = new Date().setHours(0, 0, 0, 0) / 1000; //获取当天到零点的时间戳
            var timeLastWeek = timeNow - 604800;
            var timeLastFifteen = timeNow - 1296000;
            var timeLastMonth = timeNow - 2678400;
            var timeLastTreeMonth = timeNow - 8035200;

            // //判断选择条件
            if (value.value == 7) {
                document.getElementById('LAY_demorange_e').value = date('Y-m-d', timeNow);
                document.getElementById('LAY_demorange_s').value = date('Y-m-d', timeLastWeek);
                document.getElementById('radio').value = value.value;
            } else if (value.value == 15) {
                document.getElementById('LAY_demorange_e').value = date('Y-m-d', timeNow);
                document.getElementById('LAY_demorange_s').value = date('Y-m-d', timeLastFifteen);
                document.getElementById('radio').value = value.value;
            } else if (value.value == 30) {
                document.getElementById('LAY_demorange_e').value = date('Y-m-d', timeNow);
                document.getElementById('LAY_demorange_s').value = date('Y-m-d', timeLastMonth);
                document.getElementById('radio').value = value.value;
            } else if (value.value == 90) {
                document.getElementById('LAY_demorange_e').value = date('Y-m-d', timeNow);
                document.getElementById('LAY_demorange_s').value = date('Y-m-d', timeLastTreeMonth);
                document.getElementById('radio').value = value.value;
            }
        });
    });
</script>


<script>
    /**
     * 和PHP一样的时间戳格式化函数
     * @param  {string} format    格式
     * @param  {int}    timestamp 要格式化的时间 默认为当前时间
     * @return {string}           格式化的时间字符串
     */
    function date(format, timestamp) {
        var a, jsdate = ((timestamp) ? new Date(timestamp * 1000) : new Date());
        var pad = function (n, c) {
            if ((n = n + "").length < c) {
                return new Array(++c - n.length).join("0") + n;
            } else {
                return n;
            }
        };
        var f = {
            // Day
            d: function () {
                return pad(f.j(), 2)
            },
            D: function () {
                return f.l().substr(0, 3)
            },
            j: function () {
                return jsdate.getDate()
            },
            l: function () {
                return txt_weekdays[f.w()]
            },
            N: function () {
                return f.w() + 1
            },
            S: function () {
                return txt_ordin[f.j()] ? txt_ordin[f.j()] : 'th'
            },
            w: function () {
                return jsdate.getDay()
            },
            z: function () {
                return (jsdate - new Date(jsdate.getFullYear() + "/1/1")) / 864e5 >> 0
            },

            // Month
            F: function () {
                return txt_months[f.n()]
            },
            m: function () {
                return pad(f.n(), 2)
            },
            M: function () {
                return f.F().substr(0, 3)
            },
            n: function () {
                return jsdate.getMonth() + 1
            },
            t: function () {
                var n;
                if ((n = jsdate.getMonth() + 1) == 2) {
                    return 28 + f.L();
                } else {
                    if (n & 1 && n < 8 || !(n & 1) && n > 7) {
                        return 31;
                    } else {
                        return 30;
                    }
                }
            },

            // Year
            L: function () {
                var y = f.Y();
                return (!(y & 3) && (y % 1e2 || !(y % 4e2))) ? 1 : 0
            },
            //o not supported yet
            Y: function () {
                return jsdate.getFullYear()
            },
            y: function () {
                return (jsdate.getFullYear() + "").slice(2)
            },

            // Time
            a: function () {
                return jsdate.getHours() > 11 ? "pm" : "am"
            },
            A: function () {
                return f.a().toUpperCase()
            },
            B: function () {
                // peter paul koch:
                var off = (jsdate.getTimezoneOffset() + 60) * 60;
                var theSeconds = (jsdate.getHours() * 3600) + (jsdate.getMinutes() * 60) + jsdate.getSeconds() + off;
                var beat = Math.floor(theSeconds / 86.4);
                if (beat > 1000) beat -= 1000;
                if (beat < 0) beat += 1000;
                if ((String(beat)).length == 1) beat = "00" + beat;
                if ((String(beat)).length == 2) beat = "0" + beat;
                return beat;
            },
            g: function () {
                return jsdate.getHours() % 12 || 12
            },
            G: function () {
                return jsdate.getHours()
            },
            h: function () {
                return pad(f.g(), 2)
            },
            H: function () {
                return pad(jsdate.getHours(), 2)
            },
            i: function () {
                return pad(jsdate.getMinutes(), 2)
            },
            s: function () {
                return pad(jsdate.getSeconds(), 2)
            },
            O: function () {
                var t = pad(Math.abs(jsdate.getTimezoneOffset() / 60 * 100), 4);
                if (jsdate.getTimezoneOffset() > 0) t = "-" + t; else t = "+" + t;
                return t;
            },
            P: function () {
                var O = f.O();
                return (O.substr(0, 3) + ":" + O.substr(3, 2))
            },
            c: function () {
                return f.Y() + "-" + f.m() + "-" + f.d() + "T" + f.h() + ":" + f.i() + ":" + f.s() + f.P()
            },
            //r not supported yet
            U: function () {
                return Math.round(jsdate.getTime() / 1000)
            }
        };
        return format.replace(/[\\]?([a-zA-Z])/g, function (t, s) {
            if (t != s) {
                // escaped
                ret = s;
            } else if (f[s]) {
                // a date function exists
                ret = f[s]();
            } else {
                // nothing special
                ret = s;
            }
            return ret;
        });
    }
</script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值