easyui 按年,按年月,按年月日显示提交后台

管理员 发布于 6年前   356

话不多说直接上代码

前端代码:

日期:
    <div id="dates" style="display: inline-block;">
       <input type="text" name="starttime" class="easyui-datebox date" style="width:100px;">~
       <input type="text" name="endtime" class="easyui-datebox date" style="width:100px;">&nbsp;&nbsp;
    </div>
    <div id="years" style="display:none;">
    <input type="text" name="starttime2" class="easyui-combobox year" style="width:130px;" value=""
        data-options='panelHeight:"150",valueField:"id",textField:"name",data:<?php echo $year;?>,editable:false'>
    >至
    <input type="text" name="endtime2" class="easyui-combobox year" style="width:130px;" value=""
        data-options='panelHeight:"150",valueField:"id",textField:"name",data:<?php echo $year;?>,editable:false'>&nbsp;&nbsp;
    </div>

效果图:

image.png

1.年日月:直接用easyui-datebox组件;

2.年月;day,month,year对应三个类型点击触发

        if (v.value != 'day')
        {
            if (v.value == 'month') {
            // ------start 
             //日期按钮只显示年月份
            $('#<?php echo NS;?>searchform .date').datebox({
                onShowPanel: function () {
                    var self = this;
                    var panel = $(this).datebox('panel');
                    var span = $('.calendar-header>.calendar-title>span.calendar-text', panel);
                    span.trigger('click');
                    $('div.calendar-menu-month-inner td', panel)
                        .click(function (e) {
                            setTimeout(function () {
                                $('.calendar-day:not(.calendar-other-month):first', panel).click();
                            }, 0);
                        });
                },
                formatter: function (date) {
                    return date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).match(/\d{2}$/);
                },
                parser: function (str) {
                    if (!str) return new Date();
                    if (str.match(/^\d{4}\-\d{2}$/)) {
                        return new Date(parseInt(str.match(/^\d{4}/), 10), parseInt(str.match(/\d{2}$/), 10) - 1, 01);
                    } else {
                        return new Date();
                    }
                }
            });
            // ------end
            }else { 
                //显示年份下拉框
                $('#dates').hide();
                //$('.year').next(".combo").show();
                $('#years').css('display','inline-block').show();
            }
            //“月报表”或者“年报表”的时候,“时间”选择器清空/变灰
            //$('#<?php echo NS;?>searchform .date').datebox({disabled: true});
            //$('#<?php echo NS;?>searchform .date').datebox('setValue','');
        } else {
            //“日报表”的时候,“时间”选择器恢复
            $('#<?php echo NS;?>searchform .date').datebox({disabled: false});
        }

效果图:

image.png

3.年    取巧了 用隐藏显示实现了 方便 呵呵 后台传进来下拉框的年份

后台传前端:
        $year = array(array('id'=>'','name'=>'不限'));
        $today = date('Y');
        for ($i=2013;$i<=$today;$i++)
        {
            $year[]= array('id'=>$i,'name'=>$i);
        }

直接看效果图:

image.png


请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!

该博客于2020-12-7日,后端基于go语言的beego框架开发
前端页面使用Bootstrap可视化布局系统自动生成

是我仿的原来我的TP5框架写的博客,比较粗糙,底下是入口
侯体宗的博客

      订阅博客周刊

文章标签

友情链接

HouTiZong
侯体宗的博客
© 2020 zongscan.com
版权所有ICP证 : 粤ICP备20027696号
PHP交流群
侯体宗的博客